Class: Map


The map is the main API component. You can use it for painting markers, features, etc...
Uses ol.Map 'core' ol.Map .
For access to OpenLayers object, use the getMap() function

Example for creating the map:

var map = new cercalia.Map({ target:'divMap', controls: [] });

We offer several basemaps: cercalia.MapTypes.CERCALIA, cercalia.MapTypes.OSM or cercalia.MapTypes.SATELLITE. It's also possible to add or change a base map using WMS requests.

new cercalia.Map(options)

src/cercalia/map.js, line 89
Name Type Description

Map options

Name Type Description
altRotation boolean | undefined

Enable or disable the ALT (keyboard) rotation map.

bounds cercalia.Bounds | undefined

Initial map bounding box. Default: null.

center cercalia.LonLat | undefined

Center map coordinates. Default values x=-2.530985346701069, y=40.14298996438731

controls Array.<string> | undefined

Map controls to include. Values:

  • cercalia.control.MapControls.SCALELINE
  • cercalia.control.MapControls.CLEAN
  • cercalia.control.MapControls.GAS_STATIONS
  • cercalia.control.MapControls.LAYER_SWITCHER
  • cercalia.control.MapControls.METEO
  • cercalia.control.MapControls.NAVBAR
  • cercalia.control.MapControls.MOBILEBAR
  • cercalia.control.MapControls.TRAFFIC
  • cercalia.control.MapControls.ZOOM
  • cercalia.control.MapControls.LOGISTICS_RESTRICTIONS
  • cercalia.control.MapControls.ISOCHRONES
  • cercalia.control.MapControls.STREET_VIEW

    If you want a map without controls put value [].
centerOnGeolocation boolean | undefined

Use the user location to center the map. Default: false.

defaultClick function | undefined

Assign function to click on map. Function parameters: (1->pixel, 2->cercalia.LonLat).
1) Pixel where clicked with mouse right click.
2) Map coordinate.

disableMouseOverEvents boolean | undefined

Disables mouse over events. Recommended for better performance when there are a lot of markers drawn in map. And if marker/feature mouseOver/mouseOut events aren't needed.

geolocationEnabled boolean | undefined

Enable automatically geolocation. Your position will be drawn to map.

greyscale boolean | undefined

Base layer colors in greyscale. Default false.

mapLayers Array.<string> | undefined

List of maps to add to LayerSwitcher control. Possible values in array: cercalia.MapTypes.CERCALIA, cercalia.MapTypes.OSM,cercalia.MapTypes.SATELLITE`

mapType string | undefined

Default base map, possible values: cercalia.MapTypes.CERCALIA, cercalia.MapTypes.OSM, cercalia.MapTypes.SATELLITE
Default value cercalia.MapTypes.CERCALIA

minZoom number | undefined

Minimum zoom. Default value 2

maxZoom number | undefined

Maximum zoom. Default value 19

onRotationEnd function | undefined

Function is called when the rotation of the map changes (called at the event's end).

onZoomEnd function | undefined

Function is called when the zoom of the map changes (called at the event's end).

multipleFeaturesInPixel boolean | undefined

Return multiple features in same pixel, for mouse events. Default true.

printMode boolean | undefined

Print mode, only for internal use. Or if you don't want to add webcomponents to map.

restrictedBounds cercalia.Bounds | undefined

Bounding box limits for map navigation. Default null.

rightClickMenu boolean | undefined

Enable/Disable menu on mouse right click. Default true.

rightClickFunction function | undefined

Assign function to mouse right click. For apply this option it's necessary to disable contextmenu on map initialization with option (rightClickMenu:false).
The function parameters are: (1->pixel, 2->cercalia.LonLat).
1) Pixel where clicked with mouse right click.
2) Map coordinate.

Default: null.

rightClickMenuOptions Array.<string> | undefined

Map rightClick menu options to include. Values:

  • cercalia.ContextMenu.Option.ADDRESS
  • cercalia.ContextMenu.Option.ROUTING
  • cercalia.ContextMenu.Option.DISTANCE

    If you want a map without rightClick menu options put value [].
    Default [cercalia.ContextMenuOptions.Location, cercalia.ContextMenuOptions.Routing].
restrictedBounds cercalia.Bounds | undefined

Extension bounds. Navigation will be restricted to this bounds. Default false.

rotation number | undefined

Initial map rotation (degrees). Default value 0.

separateOverlapMarkersOnZoom number | undefined

Separate overlapped markers from zoom level. Default is disabled

scaleUnits string | undefined

Scale units. Available values cercalia.MetricSystem.METRIC|cercalia.MetricSystem.IMPERIAL|cercalia.MetricSystem.NAUTIC_MILES. Default cercalia.MetricSystem.METRIC.

showCoordinatesInDMS boolean | undefined

Show coordinates in DMS (Degree, minutes, seconds). Default false.

showUrlCoordinates boolean | undefined

Show coordinates to hash url. Example:[-2.530985346701069,40.14298996438731,6z]. Default false.

target string

HTML element ID map container. Mandatory field. Required.

zoom number | undefined

Initial zoom level [0-19]. Default value 6






src/cercalia/map.js, line 1551

Add base layer. Only when layer switcher control is available.

Name Type Description
baseLayer cercalia.BaseLayer

Base layer.

addControl(control, opt_position)

src/cercalia/map.js, line 2858

Add the given control to the map.

Name Type Description
control cercalia.control.Control | ol.control.Control


position number


addCustomControl(control, opt_position)

src/cercalia/map.js, line 2896

Add custom control. You can specify children position inside control container. Default append to last child.

Name Type Description
control cercalia.control.Custom

Custom control.

position number


addFeature(feature, opt_layer)

src/cercalia/map.js, line 2042

Paint cercalia.Feature list on the map.

Name Type Description
feature cercalia.Feature


layer ol.layer.Layer


addFeatures(features, opt_layer)

src/cercalia/map.js, line 2053

Paint cercalia.Feature on the map.

Name Type Description

List of features.

layer ol.layer.Layer


addLayer(layer, opt_position, opt_draggable)

src/cercalia/map.js, line 1257

Adds a layer ol.layer.Layer specifying the position (optional). The layers are declarated in an array and the Z value works from less to more. The Layer basemap (map), is fixed in the first position 0.
If you need to change the baseLayer, change it to position 1 or remove the baseLayer.

Name Type Description
layer ol.layer.Layer | ol.layer.Group | cercalia.Heatmap | cercalia.KML | cercalia.WMS

Layer to add.

position number

Position in array (like zIndex)

draggable boolean

If layer object is instanceof ol.layer.Vector. Optionally can disable drag events for performance. Default true.

addMarker(marker, opt_layer)

src/cercalia/map.js, line 1997

Paint cercalia.Marker list on the map.

Name Type Description
marker cercalia.Marker

Marker to add.

layer ol.layer.Layer


addMarkers(markers, opt_layer)

src/cercalia/map.js, line 2008

Paint on the map the cercalia.Marker list. In this function must send an Array.

Name Type Description

List of markers.

layer ol.layer.Layer


addWMSLayer(wmsLayer, position)

src/cercalia/map.js, line 1959

Adds a WMS layer cercalia.WMS to the map

Name Type Description
wmsLayer cercalia.WMS

WMS Layer.

position number

WMSLayer position. If not declared, it's included just one level over the basemap.

centerToFeatures(features, opt_changeZoom, opt_animation)

src/cercalia/map.js, line 1679

Center the map

Name Type Description
features Array.<cercalia.Feature> | cercalia.Feature

Features list or object.

changeZoom boolean

Change zoom on features center. Default: true.

animation boolean

Enable or disable animation. Default true.

centerToMarkers(opt_markers, opt_changeZoom, opt_animation)

src/cercalia/map.js, line 1622

Centers the map to the markers list. Optionally it's possible to change the zoom for including all the markers. If markers array is not specified, by default centers to all markers

Name Type Description

List Markers, if not specified center to all markers.

changeZoom boolean

Default true.

animation boolean

Enable or disable animation. Default true.


src/cercalia/map.js, line 1235

Change page logo. If content is null, then it restores default logo.

Name Type Description
content string

HTML content


src/cercalia/map.js, line 2938

Close all menus and reset nav bar menu view.


src/cercalia/map.js, line 2352

Close all open popups


src/cercalia/map.js, line 1412

Returns the pixel value from a coordinate

Name Type Description
lonLat cercalia.LonLat


Return pixel of map.


src/cercalia/map.js, line 3065
Name Type Description
callbackFn function

Callback function


src/cercalia/map.js, line 2609

Disable markers clustering. Every marker will be painted singly, with its icon.


src/cercalia/map.js, line 2845

Disable the painting status


src/cercalia/map.js, line 2737

enableClustering(opt_distance, opt_clickFunction, opt_mouseOverFunction, opt_doubleClickFunction, opt_mouseOutFunction)

src/cercalia/map.js, line 2504

Enable markers clustering. Note: When clustering is enabled drag markers won't work.

Name Type Default Description
distance number 40

Distance, in pixels, to group markers with clusters. Default value: 40.

clickFunction function

Call function on cluster click.
Parameters avaliable (clusterFeature, features).
First parameter it's an object ol.Feature visible on map as a cluster,
Second parameter it's a cercalia.Marker array objects with the features contained in a cluster.

mouseOverFunction function

Call function on cluster mouseover. Same parameters used in 'clickFunction' event

doubleClickFunction function

Call function on double click on cluster.
Parameters avaliable (clusterFeature, features).

mouseOutFunction function

Call function on cluster mouseout. Same parameters used in 'clickFunction' event

enableDrawInteraction(type, opt_dragFeatures, opt_styles, opt_drawEndFunction, opt_freehand)

src/cercalia/map.js, line 2754

Enable the painting status. The features can be draggables, changing the features styles.

Name Type Description
type string

Type [Point|LineString|Polygon|Circle|Square|Rectangle]

dragFeatures boolean

Boolean. true or false.

styles Object

JS object with the style values: {strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity, radius}. For example: {strokeColor:'#ff0000',fillColor:'#00ff00',radius:5,fillOpacity:0.5}

drawEndFunction function

Call function when user finish drawing the feature. Send the same feature painted

freehand boolean

Operate in freehand mode for lines, polygons, and circles. This makes the interaction always operate in freehand mode


src/cercalia/map.js, line 737

Enable or disable mouse over/out events. When there are thousands markers drawn then map has poor performance, so its recommended to disable

Name Type Description
enable boolean

Enable or disable


src/cercalia/map.js, line 2726