;
`

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

`js
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

$3

> 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 .

`js
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.

$3

> addFeature

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

`js
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.

`js
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.

`js
layer.removeAllFeatures();
`

$3

`js
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

`js
layerGroup.addLayer(layer);
`

> removeLayer

will remove the layer from the LayerGroup

`js
layerGroup.removeLayer(layer);
`

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

$3

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.

`js
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.

`js
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.

`js
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.

`js
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.

`js
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.

`js
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());
`

$3

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

`js
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

`js
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

`js
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

`js
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

`js
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

`js
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

`js
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

`js
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

`js
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

`js
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

`js
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);
``