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: https://espanolfarm.com