HowTo: remove Javascript imports from OpenLayers map examples
OpenLayers is a fine alternative to the map visualization part of Google Maps Platform, however many of its examples sometimes use features from future and server-side Javascript versions, like “imports”.
Based on lou’s answer at https://stackoverflow.com/questions/51093964/why-examples-dont-work-a-struggle-with-imports/56549364, here’s a fix I just did to make the Marker animation example work when you just copy-paste the example code in an .html file without any pre-processing:
<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 -->
src="https://cdn.polyfill.io/v2/polyfill.min.js?
features=requestAnimationFrame,Element.prototype.classList,URL">
MAKE THE ABOVE A SINGLE ROW
http://br
MAKE THE ABOVE A SINGLE ROW
</head>
<body>
<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';
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 Map({
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}',
MAKE THE ABOVE A SINGLE ROW
maxZoom: 23
})
/*
new BingMaps({
imagerySet: 'AerialWithLabels',
key: 'Bing Maps Key from http://www.bingmapsportal.com/ here'
})
*/
}),
vectorLayer
]
});
Here’s the modified result:
Comments (0)
Trackbacks (0)
Leave a comment
Trackback
George Birbilis @zoomicon 