Instantly share code, notes, and snippets.

@tschaub /.gitignore
Last active Aug 13, 2018

Embed
What would you like to do?
OpenLayers + Webpack
/node_modules/
bundle.js

OpenLayers + Webpack

This example demonstrates how the ol package can be used with webpack 2.

Clone the project.

git clone git@gist.github.com:79025aef325cd2837364400a105405b8.git ol-webpack

Install the project dependencies.

cd ol-webpack
npm install

Create a bundle for the browser.

npm run build

Open index.html to see the result.

open index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using OpenLayers with Webpack</title>
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" type="text/css">
<style>
html, body {
margin: 0;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="./bundle.js"></script>
</body>
</html>
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
{
"name": "ol-webpack",
"version": "1.0.0",
"description": "Example using OpenLayers with Webpack",
"scripts": {
"build": "webpack --config webpack.config.js --mode production"
},
"devDependencies": {
"webpack": "^4.12.1",
"webpack-command": "^0.3.0"
},
"dependencies": {
"ol": "^5.0.0"
}
}
const webpack = require('webpack');
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
};
@juusechec

This comment has been minimized.

Show comment
Hide comment
@juusechec

juusechec Mar 10, 2017

Excelente, lo probaré. Gracias.

juusechec commented Mar 10, 2017

Excelente, lo probaré. Gracias.

@hutzelknecht

This comment has been minimized.

Show comment
Hide comment
@hutzelknecht

hutzelknecht Mar 22, 2017

Nice - thanks for this - was waiting for this change. will try as soon as i return from the FossGIS 2017

hutzelknecht commented Mar 22, 2017

Nice - thanks for this - was waiting for this change. will try as soon as i return from the FossGIS 2017

@darkscript

This comment has been minimized.

Show comment
Hide comment
@darkscript

darkscript Jan 16, 2018

Great guide, thanks, am trying to use webpack with ol and ol-ext, got import export problem, @tschaub, would you please check this simple repo and maybe you will see what's the issue. Thanks

darkscript commented Jan 16, 2018

Great guide, thanks, am trying to use webpack with ol and ol-ext, got import export problem, @tschaub, would you please check this simple repo and maybe you will see what's the issue. Thanks

@sbowler

This comment has been minimized.

Show comment
Hide comment
@sbowler

sbowler Aug 10, 2018

Not sure if this is the best place to put this, but I was noticing OL is a very large part of my webpack build even though I'm using very little of OL currently with a blank canvas map. Is there some way to optimize this? I thought part of the point of going to modules like this was so that it doesn't need to pull in a bunch of stuff you're not using.

This is basically the extent of my code

import 'ol/ol.css';
import { Map, View } from 'ol';
import * as Control from 'ol/control';

this.$olMap = new Map({
    target: this.$el,
    controls: Control.defaults({
    rotate: true,
    zoom: true
  }),
  layers: layers.getLayers(),
  view: this.view
});

webpack analysis:
olwebpack

sbowler commented Aug 10, 2018

Not sure if this is the best place to put this, but I was noticing OL is a very large part of my webpack build even though I'm using very little of OL currently with a blank canvas map. Is there some way to optimize this? I thought part of the point of going to modules like this was so that it doesn't need to pull in a bunch of stuff you're not using.

This is basically the extent of my code

import 'ol/ol.css';
import { Map, View } from 'ol';
import * as Control from 'ol/control';

this.$olMap = new Map({
    target: this.$el,
    controls: Control.defaults({
    rotate: true,
    zoom: true
  }),
  layers: layers.getLayers(),
  view: this.view
});

webpack analysis:
olwebpack

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment