OpenLayers

OpenLayers

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');
read more >>

flag-icon-css

Flag-Icon-CSS

Library name Flag-Icon-CSS
Difficulty None
Returned value Graphic object
Description A collection of all country flags in SVG.
Link https://github.com/lipis/flag-icon-css
Documentation https://github.com/lipis/flag-icon-css
License MIT
Library implementation
  • Go to ‘Tools’ menu, select ‘Add library’ (read more how to add library here)
  • Give a name to the library (Flag-Icon-CSS), add required file:

CSS: https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/css/flag-icon.min.css

  • Add description (optional). 
  • Click ‘OK’.
How to use this library?

Add a flag in the cell(s) by adding a div, span or element with flag-icon and flag-icon- class, where code read more >>

3Dmol library

3Dmol

Library name 3Dmol
Difficulty Medium (intermediate JavaScript knowledge required)
Returned value Graphic object
Description WebGL accelerated JavaScript molecular graphics library.
Link https://github.com/3dmol/3Dmol.js
Documentation http://3dmol.csb.pitt.edu/doc/index.html
License BSD-3
Library implementation
  • Go to ‘Tools’ menu, select ‘Add library’ (read more how to add library here)
  • Give a name to the library (3DMol), add required file:

Url 1: https://cdnjs.cloudflare.com/ajax/libs/3Dmol/1.3.7/3Dmol-nojquery-min.js

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

There are different graphic objects offered by this library. We will use one of them for this example (read more how to add a custom function here):

  • MOLA

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

Function name DMOLA Arguments – dataset Syntax =DMOLA(dataset) Description

Calls the library function and returns the result as an graphic object. Dataset is a data bank model and is loaded from server.

Function body

//create temporary container for graphic manipulations
var garbageContainer;
if (!document.getElementById('garbageContainer')) {
 garbageContainer = document.createElement('div');
read more >>

IP Subnet Calculator

IPSubnetCalculator

Library name IPSubnetCalculator
Difficulty Low (basic JavaScript knowledge required)
Returned value Array of objects
Description JavaScript module for calculating optimized subnet masks for standard and non-standard IP ranges, e.g. 5.4.3.21 – 6.7.8.9.
Link https://github.com/franksrevenge/IPSubnetCalculator
License MIT
Library implementation
  • Go to ‘Tools’ menu, select ‘Add library’ (read more how to add library here)
  • Give a name to the library (IPSubnetCalculator), add required file:

read more >>

Add library

Add Library To Spreadsheet

There are thousands of JavaScript and CSS libraries available to be used for free. You can find them on different repositories (just to mention CDNJS, jsDeliv, Google Hosted Libraries). When a library is added to the spreadsheet, user can create their own custom function that uses the functions/methods/classes provided by the library and thus extend the functionality of the spreadsheet. It can be a simple function that returns an alphanumerical value, but it also can be an advanced graphical function that shows a chart or a drawing. The scope and variety of use is limitless.

So, how to start?

In menu ‘Tools’ select ‘Add library’.

The library is already added. You can add as many libraries as you want to the spreadsheet, but please bear in mind that every new file takes some memory resources and you can end up with a very slow working spreadsheet, therefore use it with caution.

The next step is to create a custom function (if you don’t know how to do it – read it here). The body of a function can look like this:

var a = library_namespace.function1(argument1, argument2, ...); //function1 returns a string or number
return a;

And that’s it. More advanced and real-life examples will be added on a regular basis. Stay with us!