Menu
On the page https://openlayers.org/en/latest/examples/image-vector-layer.html I copied the HTML code from under the map to /tmp/a.html and run firefox /tmp/a.html.
At first two problems appeared easy to fix:
To fix it:
<script> by <script type="module">
<meta charset="UTF-8"> into <head></head>
But what to do with the third error?
TypeError: Error resolving module specifier: ol/Map.js
I have Firefox 60.0.1.
So, are the HTML codes in the examples meant to be used as I did, or did I misunderstand something?
And what do I need in my code to import Map from ol/Map.js?
(I tried to reformulate the question, but if I still deserve a negative ranking, please explain why. Thanks)
360
It's because there are some changes due to latest release of OpenLayers (V5.0). Now samples are based on ES6 modules whereas there was before another way of doing
You can compare the "simple" v4.6.5 sample with "simple" master sample
Using <script type="module"> is not enough as it does not solve dependencies when doing import Map from ol/Map.js
There are at least 3 ways of doing:
The usual way to create Openlayers sample using version 5.0.0 is using à bundler like Webpack or Parcel. There is a tutorial for this.
I've also investigated JSPM with this sample
You can always use the old way of doing, like in version 4.6.5 using this other official tutorial without using import.
For solution 1, you can use codesandbox.io to avoid setting a local parcel/webpack environment like illustrated with this tweet.
I know there is a work on progress to refactor the code for samples and I also submitted some suggestions for codesandbox.io e.g https://github.com/openlayers/openlayers/issues/8324
129
had the same problem. openlayers is outstanding, v5 examples are not :(
e.g.https://openlayers.org/en/latest/examples/animation.html
my fix for v5(.3.0) examples:
<!-- ADD build-REFERENCE for v5(.3.0) // github.com/openlayers/openlayers/ -->
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script>
// CONVERT imports to var
var Map = ol.Map; //~ import Map from 'ol/Map.js';
var View = ol.View; //~ import View from 'ol/View.js';
var {easeIn, easeOut} = ol.easing; //~ import {easeIn, easeOut} from 'ol/easing.js';
var TileLayer = ol.layer.Tile; //~ import TileLayer from 'ol/layer/Tile.js';
var {fromLonLat} = ol.proj; //~ import {fromLonLat} from 'ol/proj.js';
var OSM = ol.source.OSM; //~ import OSM from 'ol/source/OSM.js';
// ...
process: use "copy" on example page, "paste" to new html file. modify like above. run in firefox.
11
based on lou's answer, here's a fix I just did for the Marker animation example:
<head>
<meta charset="UTF-8">
<title>Marker Animation</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/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>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<label for="speed">
speed:
<input id="speed" type="range" min="10" max="999" step="10" value="60">
</label>
<button id="start-animation">Start Animation</button>
<script>
var Feature = ol.Feature; //import Feature from 'ol/Feature.js';
//var Map = ol.Map; //import Map from 'ol/Map.js'; //commented-out, use ol.Map in code instead of Map, internal JS Map object causes conflicts in newer browsers
var View = ol.View; //import View from 'ol/View.js';
var Polyline = ol.format.Polyline; //import Polyline from 'ol/format/Polyline.js';
var Point = ol.geom.Point; //import Point from 'ol/geom/Point.js';
var {Tile, Vector} = ol.layer; //import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
var TileLayer = Tile;
var VectorLayer = Vector;
//var BingMaps = ol.source.BingMaps; //import BingMaps from 'ol/source/BingMaps.js';
var VectorSource = ol.source.Vector; //import VectorSource from 'ol/source/Vector.js';
var {Circle, Fill, Icon, Stroke, Style} = ol.style; //import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style.js';
var CircleStyle = Circle;
// This long string is placed here due to jsFiddle limitations.
// It is usually loaded with AJAX.
var polyline = [ ...
and to use an ESRI sattelite map or OpenStreetMap (plain) map instead of Bing Maps one (which requires a key), do this extra edit to the Marker animation example:
var map = new ol.Map({ //don't do new Map(...) here, uses some internal JS Map object in newer browsers
target: document.getElementById('map'),
loadTilesWhileAnimating: true,
view: new View({
center: center,
zoom: 10,
minZoom: 2,
maxZoom: 19
}),
layers: [
new TileLayer({
source:
//new ol.source.OSM()
new ol.source.XYZ({
attributions: ['Powered by Esri',
'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
attributionsCollapsible: false,
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
maxZoom: 23
})
/*
new BingMaps({
imagerySet: 'AerialWithLabels',
key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
})
*/
}),
vectorLayer
]
});
The example doesn't work because of you maybe just copy past data from page and not look to DOC menu item https://openlayers.org/en/latest/doc/tutorials/bundle.html So step by step: 1. npm init (here u set your index.js as an entry point) 2. npm install ol (it adds OpenLayer to your application) 3. npm install --save-dev parcel-bundler 4. npm start (it run a web server on localhost:1234 and you will see your example working fine If needed, then 5. npm build (it create /dist folder which you needed a copy to your web server, inside it will be converted js file.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
