Home > Posts > HowTo: remove Javascript imports from OpenLayers map examples

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:&nbsp; <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:

image

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: