├── _config.yml
├── .gitignore
├── map.PNG
├── index.html
├── README.md
├── package.json
├── webpack.config.js
└── main.js
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | bundle.js
3 | *.iml
4 | .idea
5 |
--------------------------------------------------------------------------------
/map.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SamuelIrungu/ol-ol-ext-webpack-example/HEAD/map.PNG
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Using OpenLayers with Webpack
6 |
7 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # OpenLayers + ol-ext + Webpack
2 |
3 | This example demonstrates how `ol` and `ol-ext` packages can be used with webpack 2.
4 |
5 | Clone the project.
6 |
7 | git clone https://github.com/darkscript/ol-ol-ext-webpack-example.git
8 |
9 | Install the project dependencies.
10 |
11 | cd ol-webpack
12 | npm install
13 |
14 | Create a bundle for the browser.
15 |
16 | npm run build
17 |
18 | Open `index.html` to see the result.
19 |
20 | open index.html
21 |
22 | Map with openlayers and ol-ext controls
23 |
24 | > [
25 | 
26 | ](https://github.com/darkscript/ol-ol-ext-webpack-example)
27 |
28 | For more information, go to ol-ext [examples](http://viglino.github.io/ol-ext/). Also go to to [Openlayers](https://openlayers.org/).
29 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ol-ext-ol-webpack-example",
3 | "version": "1.1.1",
4 | "description": "Example using OpenLayers and ol-ext with Webpack",
5 | "scripts": {
6 | "build": "webpack --config webpack.config.js --mode production"
7 | },
8 | "devDependencies": {
9 | "babel-core": "^6.26.3",
10 | "babel-loader": "^7.1.5",
11 | "babel-preset-env": "^1.7.0",
12 | "css-loader": "^3.2.0",
13 | "style-loader": "^0.23.1",
14 | "webpack": "^5.53.0",
15 | "webpack-cli": "^4.8.0"
16 | },
17 | "dependencies": {
18 | "ol": "^6.7.0",
19 | "ol-ext": "^3.2.6"
20 | },
21 | "main": "index.js",
22 | "repository": "https://github.com/darkscript/ol-ol-ext-webpack-example.git",
23 | "author": "darkscript",
24 | "license": "BSD-3-Clause",
25 | "private": false
26 | }
27 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack')
2 |
3 | module.exports = {
4 | entry: './main.js',
5 | output: {
6 | filename: 'dist.js',
7 | path: __dirname
8 | },
9 | devtool: 'source-map',
10 | module: {
11 | rules: [
12 | {
13 | test: /\.css$/,
14 | use: [
15 | {loader: 'style-loader'},
16 | {loader: 'css-loader'}
17 | ]
18 | },
19 | {
20 | test: /\.js$/,
21 | exclude: /(node_modules|bower_components)/,
22 | use: {
23 | loader: 'babel-loader',
24 | options: {
25 | presets: ['babel-preset-env']
26 | }
27 | }
28 | }
29 | ]
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | import 'ol/ol.css';
2 | import 'ol-ext/control/Permalink.css';
3 | import 'ol-ext/control/Search.css';
4 | import 'ol-ext/control/Swipe.css';
5 | import Map from 'ol/Map';
6 | import View from 'ol/View';
7 | import ScaleLine from 'ol/control/ScaleLine';
8 | import Permalink from 'ol-ext/control/Permalink';
9 | import SearchNominatim from 'ol-ext/control/SearchNominatim';
10 | import TileLayer from 'ol/layer/Tile';
11 | import OSM from 'ol/source/OSM';
12 | import Stamen from 'ol/source/Stamen';
13 | import Swipe from 'ol-ext/control/Swipe';
14 |
15 | // Layers
16 | let osm = new TileLayer({
17 | source: new OSM()
18 | });
19 | let stamen = new TileLayer({
20 | source: new Stamen({
21 | layer: 'watercolor'
22 | })
23 | });
24 | let label = new TileLayer({
25 | source: new Stamen({
26 | layer: 'terrain-labels'
27 | })
28 | });
29 |
30 | let map = new Map({
31 | target: 'map',
32 | layers: [osm, stamen, label],
33 | view: new View({
34 | center: [0, 30],
35 | zoom: 4
36 | })
37 | });
38 |
39 | // Control
40 | let ctrl = new Swipe();
41 |
42 | // Set stamen on left
43 | ctrl.addLayer(stamen);
44 | // OSM on right
45 | ctrl.addLayer(osm, true);
46 | map.addControl(ctrl);
47 |
48 | map.addControl(new ScaleLine());
49 | map.addControl(new Permalink());
50 |
51 | // Search control
52 | const search = new SearchNominatim();
53 | // Move to the position on selection in the control list
54 | search.on('select', function (e) {
55 | // console.log(e);
56 | map.getView().animate({
57 | center: e.coordinate,
58 | zoom: Math.max(map.getView().getZoom(), 16)
59 | });
60 | });
61 | map.addControl(search);
62 |
--------------------------------------------------------------------------------