Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Created May 14, 2018 01:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/21a32b3bacdd4a813fc48a5130200d38 to your computer and use it in GitHub Desktop.
Save ThomasG77/21a32b3bacdd4a813fc48a5130200d38 to your computer and use it in GitHub Desktop.
Demo using native ECMAScript modules in OpenLayers 5.0.0-beta.12
<!DOCTYPE html>
<html>
<head>
<title>Simple Map using native ECMAScript modules</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.0.0-beta.12/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
</head>
<body>
<div id="map" class="map"></div>
<script type=module>
import Map from 'https://dev.jspm.io/npm:ol@5.0.0-beta.12/Map.js';
import View from 'https://dev.jspm.io/npm:ol@5.0.0-beta.12/View.js';
import TileLayer from 'https://dev.jspm.io/npm:ol@5.0.0-beta.12/layer/Tile.js';
import OSM from 'https://dev.jspm.io/npm:ol@5.0.0-beta.12/source/OSM.js';
const map = new Map({
layers: [
new TileLayer({
source: new OSM()
})
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment