OpenLayers

You are here:

 

Library name OpenLayers
Difficulty Low to medium
Returned value Graphic object
Description A high-performance, feature-packed library for creating interactive maps on the web.
Link https://openlayers.org
Documentation https://openlayers.org/en/latest/doc/quickstart.html
License BSD-2-Clause
Library implementation
  • Go to ‘Tools’ menu, select ‘Add library’ (read more how to add library here)
  • Give a name to the library (OpenLayers), add required file/s:

Url 1: https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js

CSS: https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css

  • Add description (optional).
  • Click ‘OK’.
Custom functions

To add a simple map in a spreadsheet create one simple function (read more how to add a custom function here):

  • OPENLAYERS

This function is only our proposal to deal with the library, but user can define their own function(s).

Function name OPENLAYERS
Arguments – longitude
– latitude
– zoom
Syntax =OPENLAYERS(longitude, latitude, zoom)
Description

Calls the library function and returns the result as a map object.

Function body
//create temporary container for graphic manipulations
var garbageContainer;
if (!document.getElementById('garbageContainer')) {
 garbageContainer = document.createElement('div');
 garbageContainer.id = 'garbageContainer';
 document.body.appendChild(garbageContainer);
} else {
 garbageContainer = document.getElementById('garbageContainer');
}
//create container element (div) for graph and set unique id property
var tempUUID = Formula.CREATEUUID(16);
var container = document.createElement('div');
container.setAttribute('id', 'OPENLAYERS_' + tempUUID);
container.style.width = '600px';
container.style.height = '450px';
container.style.position = 'relative';
garbageContainer.appendChild(container);
//create map object
var map = new ol.Map({
 target: 'OPENLAYERS_' + tempUUID,
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 view: new ol.View({
  center: ol.proj.fromLonLat([longitude, latitude]),
  zoom: zoom
 })
});
//return container with a map
return container;
Example =OPENLAYERS(C5,E5,G5)

Example spreadsheet is shown below:

Get a copy of this spreadsheet