ol-helper

ol-helper is a lightweight and easy to use featured-package library for creating interactive maps on web using OpenLayers with faster pace.

Getting Started

npm install ol-helper

How to use

Import just what you need for your application:

import { getMap } from 'ol-helper/map';

this.map = getMap('map');

<div id='map' />;

above lines will render the map with OSM base tiles to the html markup with id map by default, center is at long/lat [0,0] and zoom level is set to 1.

params: getMap method takes two arguments, first if the target to which the map will render and second an object as parameter with properties of View constructor. example

this.map = getMap(target='map',{
    center: [80,-34],
    zoom: 5,
    padding: [15,15,15,15],
    ...
})

Note: getMap method returns the Map object with some additional helper methods attached to it at the run-time.

• addLayerSwitcher
• deleteLayerByName
• deleteLayerGroupByName
• findLayerByName
• findLayerGroupByName

Helper functions available to the map object

addLayerSwitcher

this method will add the LayerSwitcher on the map, which can be used to make layer visible/invisible by simply toggling the checkboxes along the the layer names.

    this.map.addLayerSwitcher();

Note: To see the layer on the LayerSwitcher dialogue box, it is mandatory to add the title property to the Layer or LayerGroup.

deleteLayerByName

this method will delete a VectorLayer from the map with given layer name as a parameter.

    this.map.deleteLayerByName('Vector_layer');

params: method takes one argument that is the name of the layer to be deleted.

deleteLayerGroupByName

this method will delete a LayerGroup from the map with given layerGroup name as a parameter.

    this.map.deleteLayerGroupByName('Layer_group');

params: method takes one argument that is the name of the LayerGroup to be deleted.

findLayerByName

this method will find a VectorLayer from the map with given layer name as a parameter.

    this.map.findLayerByName('Vector_layer');

params: method takes one argument that is the name of the layer to be found.

returns: VectorLayer object if found or null Note: It does not matter if the layer is nested inside some LayerGroup, method will recursively search for the layer.

findLayerGroupByName

this method will find a LayerGroup from the map with given LayerGroup name as a parameter.

    this.map.findLayerGroupByName('Vector_group');

params: method takes one argument that is the name of the LayerGroup to be found.

returns: LayerGroup object if found or null

Add layer to the map

You can add a VectorLayer to a map by simply calling the getLayer fuction .

import { getLayer } from 'ol-helper/layers';
import { getMap } from 'ol-helper/map';

this.map = getMap('map');
let layer = getLayer({
	layerName: 'Vector layer',
});
this.map.addLayer(layer);

above sample code snippet wil render the default map and will add an empty vector layer with property name = layerName to the map, where, layerName is a mandatory parameter or else it will throw an error.

params: object with following keys | Key | mandatory | Type | Value | | ------ | ------ | ------ | ------ | | layerName | Yes | string | name of the layer | | featureArray | No |array | array of objects, where each object contains coordinates (mandatory) key with value [long, lat] and metaData key whose value can be of type any example [{coordinates: [long, lat], metaData: "coordinates information"}]| | clusterSource | No | boolean | true/false, depends whether you want layer with clustering or not | | clusterDistance | No | number | Minimum distance in pixels between clusters. | | style | No |Style object | given Style will be applied to the layer if passed as a parameter |

Note: All other VectorLayer properties can be passed as parameters which will be applied to the layer.

layer object returned by the getLayer function have all the default properties and methods present in VectorLayer, but several other methods are also added :-

• addFeature
• addFeatures
• removeAllFeatures

all these helper functions returns the same layer object, so you can chain these helper functions one-after-other.

Helper functions available to the layer object

addFeature

this method will add the given feature to the current layer.

import { getLayer } from 'ol-helper/layers';
import { getMap } from 'ol-helper/map';
import { getPoint } from 'ol-helper/features';

this.map = getMap('map');
let layer = getLayer({
	layerName: 'Vector layer',
});
let feature = getPoint({ coordinates: [-57, 30] });
layer.addFeature(feature);
this.map.addLayer();

param: Feature object

addFeatures

this method will add multiple Features to the current layer.

import { getMap } from 'ol-helper/map';
import { getLayer } from 'ol-helper/layers';
import { getFeatureArray } from 'ol-helper/features';

this.map = getMap('map');
let layer = getLayer({
	layerName: 'Vector layer',
});
let featureData = [{ coordinates: [-57, 30] }, { coordinates: [-10, 90] }];
let featureArray = getFeatureArray(featureData);
layer.addFeatures(featureArray);
this.map.addLayer();

param: array of Features

removeAllFeatures

this method will remove all the Features from the current layer.

layer.removeAllFeatures();

Add LayerGroup to the map

import { getMap } from 'ol-helper/map';
import { getLayer } from 'ol-helper/layers';
import { getLayerGroup } from 'ol-helper/layerGroup';

this.map = getMap('map');
let newLayerGroup = getLayerGroup({ layerGroupName: 'Test group' }); // get LayerGroup with name 'Test group'
newLayerGroup.setProperties({ title: 'Test group' }); // will show LayerGroup on LayerSwitcher dialogue box
let layer = getLayer({
	layerName: 'Vector layer',
});
newLayerGroup.addLayer(layer); // add layer to LayerGroup
this.map.addLayer(newLayerGroup); // add LayerGroup to the map
newLayerGroup.removeLayer(layer); // remove layer from LayerGroup

methods added to the LayerGroup at the run-time

addLayer

will add the layer to the LayerGroup

layerGroup.addLayer(layer);

removeLayer

will remove the layer from the LayerGroup

layerGroup.removeLayer(layer);

Note: to see the LayerGroup on the LayerSwitcher dialogue box add title property to the LayerGroup.

Helper functions to get basic Features

here are some helper functions which can be used to get Feature objects from your geospatial data

• getLineString
• getCircle
• getPoint
• getPolygon
• getGeoJSONPolygon
• getFeatureArray

getLineString

Above method will return a new Features whose geometry is LineString params: method accepts an object with two keys pointA and pointB and values are array of longitude and latitude.

    import { getLineString } from 'ol-helper/features';

    let pointA = [-34,80]; // [long,lat]
    let pointB = [-19,10]; // [long,lat]
    let lineStringFeature = getLineString({pointA, pointB});
    .
    . //code to get new layer or find existing layer
    .
    layer.addFeature(lineStringFeature);

getCircle

Above method will return a new Features whose geometry is Circle params: method accepts an object with three keys coordinates, radius and metaData.

    import { getCircle } from 'ol-helper/features';

    let options = {
        coordinates: [-12,50]; // [long,lat]
        radius: 500;
        metaData: "information related to the coordinates"
    }
    let circleFeature = getCircle(options);
    .
    . //code to get new layer or find existing layer
    .
    layer.addFeature(circleFeature);

getPoint

Above method will return a new Features whose geometry is Point params: method accepts an object with two keys coordinatesand metaData.

    import { getPoint } from 'ol-helper/features';

    let options = {
        coordinates: [-12,50]; // [long,lat]
        metaData: "information related to the coordinates"
    }
    let pointFeature = getPoint(options);
    .
    . //code to get new layer or find existing layer
    .
    layer.addFeature(pointFeature);

getPolygon

Above method will return an array of Features where geometry of each feature is LineString params: method accepts an array of coordinates.

    import { getPolygon } from 'ol-helper/features';

    let param = [[-12,50], [-42,14], [-90, 78], [-12,50]];
    let polygonFeature = getPolygon(param);
    .
    . //code to get new layer or find existing layer
    .
    layer.addFeature(polygonFeature);

getGeoJSONPolygon

Above method will return a Features where geometry is MultiPolygon params: method accepts an array of coordinates.

    import { getPolygon } from 'ol-helper/features';
    import { getLineStyle } from 'ol-helper/styles'

    let param = [[-12,50], [-42,14], [-90, 78], [-12,50]];
    let polygonFeature = getPolygon(param);
    .
    . //code to get new layer or find existing layer
    .
    layer.addFeature(polygonFeature).setStyle(getLineStyle());

getFeatureArray

Above method will return an array of Features where geometry is Point params: method accepts an array of objects, where each object should contain key coordinates and its value is long-lat pair [long,lat] and second key is optional metaData which will contain the information regarding the coordinates.

    import { getFeatureArray } from 'ol-helper/features';
    import { getPointStyle } from 'ol-helper/styles'

    let featureArray = [
        {coordinates: [-90,78], metaData: "coordinates information"},
        {coordinates: [-10,08], metaData: "coordinates information"},
        {coordinates: [10,88], metaData: "coordinates information"},
    ];
    let features = getFeatureArray(featureArray);
    .
    . //code to get new layer or find existing layer
    .
    layer.addFeatures(features).setStyle(getPointStyle());

Helper functions to get basic Styles

here are some helper functions which can be used to get Styles for your geospatial data.

• getLineStyle
• getStarStyle
• getPointStyle
• getIconStyle
• getClusterStyle
• getCircleStyle

Note: params are not mandatory for above helper methods, all these Styles methods have default styles applied to them.

getLineStyle

import { getLineStyle } from 'ol-helper/styles';

// code to layer and add features to it
layer.setStyle(getLineStyle());

params: an object with three properties strokeColor: color of the strokes fillColor: color which will be filled between strokes width: width of the strokes

import { getLineStyle } from 'ol-helper/styles';

.
.   // code to layer and add features to it
.
let options = {
    strokeColor: 'rgba(195, 0, 46,0.55)',
	fillColor: 'rgba(255, 255, 255, 0.55)',
	width: 1,
}
layer.setStyle(getLineStyle(options));

getStarStyle

import { getStarStyle } from 'ol-helper/styles';

// code to layer and add features to it
layer.setStyle(getStarStyle());

params: an object with three properties strokeColor: color of the strokes fillColor: color which will be filled between strokes width: width of the strokes

import { getStarStyle } from 'ol-helper/styles';

.
.   // code to layer and add features to it
.
let options = {
    strokeColor: 'rgba(195, 0, 46,0.55)',
	fillColor: 'rgba(255, 255, 255, 0.55)',
	width: 1,
}
layer.setStyle(getStarStyle(options));

getPointStyle

import { getPointStyle } from 'ol-helper/styles';

// code to layer and add features to it
layer.setStyle(getPointStyle());

params: an object with four properties strokeColor: color of the strokes fillColor: color which will be filled between strokes width: width of the strokes, radius: radius of the point

import { getPointStyle } from 'ol-helper/styles';

.
.   // code to layer and add features to it
.
let options = {
    strokeColor: 'rgba(195, 0, 46,0.55)',
	fillColor: 'rgba(255, 255, 255, 0.55)',
	width: 1,
	radius: 6
}
layer.setStyle(getPointStyle(options));

getIconStyle

import { getIconStyle } from 'ol-helper/styles';

// code to layer and add features to it
layer.setStyle(getIconStyle());

params: any/all properties of Icon class constructor

import { getIconStyle } from 'ol-helper/styles';

.
.   // code to layer and add features to it
.
let options = {
    anchor: [0.5, 0.9],
	anchorXUnits: 'fraction',
	anchorYUnits: 'fraction',
	src: "./image.png",
	scale: 0.4,
}
layer.setStyle(getIconStyle(options));

getClusterStyle

import { getMap } from 'ol-helper/map';
import { getClusterStyle, getIconStyle } from 'ol-helper/styles';
import { getLayer } from 'ol-helper/layers';

let map = getMap('map');
let clusterArrayData = [
	{ coordinates: [-57, 30], metaData: { id: 256 } },
	{ coordinates: [-57, 35], metaData: { id: 256 } },
	{ coordinates: [-57.1224, 37], metaData: { id: 256 } },
	{ coordinates: [-57.1224, 47], metaData: { id: 256 } },
	{ coordinates: [-57, 31], metaData: { id: 256 } },
];
let clusterLayer = getLayer({
	layerName: 'Cluster layer',
	title: 'Cluster layer',
	featureArray: clusterArrayData,
	clusterSource: true,
	clusterDistance: 10,
});
clusterLayer.setStyle(function (features) {
	let featureCount = features.get('features').length;
	if (featureCount > 1) return getClusterStyle({ count: featureCount });
	return getIconStyle();
});
map.addLayer(clusterLayer);

params: an object with five properties strokeColor: color of the strokes fillColor: color which will be filled between strokes width: width of the strokes, radius: radius of the point, count: number of features overlapping

getCircleStyle

import { getCircleStyle } from 'ol-helper/styles';

// code to layer and add features to it
layer.setStyle(getCircleStyle());

params: an object with three properties strokeColor: color of the strokes fillColor: color which will be filled between strokes width: width of the strokes

import { getCircleStyle } from 'ol-helper/styles';

let circleLayer = getLayer({ layerName: 'circle', title: 'circle' });
circleLayer.addFeature(getCircle({ coordinates: [-83, 12], radius: 500000 }));
let options = {
	strokeColor: 'rgba(195, 0, 46,0.55)',
	fillColor: 'rgba(255, 255, 255, 0.55)',
	width: 1,
};
circleLayer.setStyle(getCircleStyle(options));
map.addLayer(circleLayer);