Class: Map

cercaliagl.Map


Javascript ES5

const map = new cercaliagl.Map({ ... });

The map is the main API component. You can use it for painting markers, features, etc...
This class is an implementation of maplibre.Map (https://maplibre.org/)
For access to MapboxGL Map object, use the getMapboxglMap() method.
To enable 3D landmarks add the parameter &plugin=threebox to the URL

This is the main class of Cercali API Javascript. There are many methods such as create/delete markers or features, handle events interaction with map such as zoom in, zoom out, center, etc.

It also has lot of properties in constructor. Look carefull at the methods and properties.

Example for creating the map:

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

new Map(options)

Map.js, line 250
Name Type Description
options

Map Options

Name Type Description
target string

HTML element ID map container. Mandatory field.
bounds module:cercaliagl/Bounds~Bounds

Initial map bounding box. Default: null.
center module:cercaliagl/LonLat~LonLat

Center map coordinates. Default values x=-2.530985346701069, y=40.14298996438731
controls Array.<string>

Map controls to include. Values:

  • cercaliagl.control.MapControls.SCALELINE
  • cercaliagl.control.MapControls.CLEAN
  • cercaliagl.control.MapControls.GAS_STATIONS
  • cercaliagl.control.MapControls.LAYER_SWITCHER
  • cercaliagl.control.MapControls.METEO
  • cercaliagl.control.MapControls.NAVBAR
  • cercaliagl.control.MapControls.MOBILEBAR
  • cercaliagl.control.MapControls.TRAFFIC
  • cercaliagl.control.MapControls.ZOOM
  • cercaliagl.control.MapControls.LOGISTICS_RESTRICTIONS
  • cercaliagl.control.MapControls.LAYER_REGIONS
  • cercaliagl.control.MapControls.ISOCHRONES
  • cercaliagl.control.MapControls.LOGO
  • cercaliagl.control.MapControls.BUILDINGS3D
  • cercaliagl.control.MapControls.DRAW
  • cercaliagl.control.MapControls.ZBE

    If you want a map without controls put value `[]`.
srcArrow string

Arrow to be used when feature has showDirections = true
disableKeyboardControls boolean

Disable controls to move/rotate/pan map with the keyboard = true
drawStyles Array.<module:cercaliagl/MapStyler~StyleLayerJSON>

Draw styles. Default [].
adaptDrawStylesToFeatureStyle boolean

Adapt draw styles to feature style. Default false.
mapLayers Array.<string>

Default map base layers. cercalia.MapTypes.CERCALIA, cercalia.MapTypes.OSM, `cercalia.MapTypes.SATELLITE``.
customBaseLayers Array.<module:cercaliagl/layer/XYZ~XYZ> | Array.<module:cercaliagl/layer/WMS~WMS>

Custom base layers
zoom number

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

Minimum zoom. Default value 2
maxZoom number

Maximum zoom. Default value 19
tollInfoType module:cercaliagl/service/Routing~TollInfoType

Format of the toll information displayed when calculating a route. Default value basic.
tollCurrency string

Currency of the toll information displayed when calculating a route. Default value undefined.
routingNet string

Custom routing net. Default value undefined.
cooperativeGestures boolean

Setting cooperativeGesturs to true, scroll to zoom requires command key, and two fingers to pan the map on mobile version.
restrictedBounds module:cercaliagl/Bounds~Bounds

Bounding box limits for map navigation. Default null.
rotation number

Map bearing in degrees. Default value 0
defaultClick function

Assign function to click on map. Function parameters: (1->pixel, 2->cercalia.LonLat).

  1. Pixel where clicked with mouse right click.
  2. Map coordinate.

defaultBaseLayer string

Default base layer. Default cercalia.
lang string

Language, you must put useBrowserLanguage to false. Default en.
useBrowserLanguage boolean

Enable/Disable the usage by default of the browser language. Default true.
geolocationEnabled boolean

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

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

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>

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]`.
multipleFeaturesInPixel boolean

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

Map pitch. Default value 0
onRotationEnd function

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

Function is called when map is moved (called at the event's end).
onZoomEnd function

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

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

Antialias for GL render. Default false.
themeColor string

Theme color
routing3d boolean

Draw 3D polyline for calculated route feature. Default false.
freehandOnDrawPolygonMobile boolean

Draw polygon button on mobile will active freehand mode. Default false.
interactive boolean

Disable the map interactions. Default false.
scaleUnits module:maplibre-gl~Unit

Units used on the scale and on the measurements results. Default metric. Values: 'imperial', 'metric' or 'nautical'.

Methods

module:cercaliagl/Map~Map.animateMarker(marker, feature, speed, numSteps)

Map.js, line 2084
Name Type Description
marker module:cercaliagl/Marker~Marker

Marker that will be animated
feature module:cercaliagl/Feature~Feature

Feature (type linestring) where marker will be animated
speed number

Speed of marker
numSteps number

Number of steps to divide the marker path

addAnimatedFeature(feature, layer, callbackFn)

Map.js, line 1338
Name Type Description
feature module:cercaliagl/Feature~Feature

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer
callbackFn function

callback function when finished

addBaseLayer(baseLayer, mapType)

Map.js, line 1716
Name Type Description
baseLayer module:cercaliagl/layer/XYZ~XYZ | module:cercaliagl/layer/WMS~WMS

Base layer
mapType string | undefined

Map type

addCustomControl(control, position)

Map.js, line 946

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

Name Type Description
control module:cercaliagl/control/Custom~Custom

Custom control.
position number

Position.

addFeature(feature, layer, updateGeoJSON)

Map.js, line 1327
Name Type Description
feature module:cercaliagl/Feature~Feature

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer
updateGeoJSON boolean (defaults to true)

Update GeoJSON after add feature, true by default

addFeatures(features, layer)

Map.js, line 1348
Name Type Description
features Array.<module:cercaliagl/Feature~Feature>

Features
layer module:cercaliagl/layer/Feature~Feature

Feature layer

addGroupBaseLayer(id, label, baseLayers, mapType)

Map.js, line 1728
Name Type Description
id string

id
label string

label
baseLayers Array.<(module:cercaliagl/layer/XYZ~XYZ|module:cercaliagl/layer/WMS~WMS)>

Base layers
mapType string | undefined

Map type

addLayer(layer, beforeLayerId)

Map.js, line 1045

Add layer

Name Type Description
layer module:cercaliagl/layer/Base~LayerLike

Layer
beforeLayerId string

Before layer id. Only when base layer is MVT type.

addMarker(marker, layer)

Map.js, line 1280
Name Type Description
marker module:cercaliagl/Marker~Marker

Marker
layer module:cercaliagl/layer/Marker~Marker

addMarkers(markers, layer)

Map.js, line 1290
Name Type Description
markers Array.<module:cercaliagl/Marker~Marker>

Marker
layer module:cercaliagl/layer/Marker~Marker

Layer

centerOnGeolocation()

Map.js, line 736

Center on current GPS position

centerToFeatures(features, options)

Map.js, line 1538
Name Type Description
features Array.<module:cercaliagl/Feature~Feature>

Features
options

Options

Name Type Description
animation boolean

Animation.
duration number

Duration if animation is enabled. Default 2000.
changeZoom boolean

Change zoom
zoom number

zoom to change

centerToMarkers(markers, options)

Map.js, line 1522
Name Type Description
markers Array.<module:cercaliagl/Marker~Marker>

Markers
options

Options

Name Type Description
animation boolean

Animation.
duration number

Duration if animation is enabled. Default 2000.
changeZoom boolean

Change zoom
zoom number

zoom to change

changeBaseLayer(baseLayer)

Map.js, line 1800

Available layers.

  • cercaliagl.MapTypes.CERCALIA
  • cercaliagl.MapTypes.SATELLITE
  • cercaliagl.MapTypes.OSM
  • cercaliagl.MapTypes.DARK
  • cercaliagl.MapTypes.SILVER
  • cercaliagl.MapTypes.BLANKMAP
  • cercaliagl.MapTypes.GOOGLE_STYLE
  • cercaliagl.MapTypes.GOOGLE_STYLE_V2
  • cercaliagl.MapTypes.GOOGLE_STYLE_TRANSPARENT
  • cercaliagl.MapTypes.EMPTY
Name Type Description
baseLayer string

Base layer

closeAll()

Map.js, line 1661

Close all menus and reset nav bar menu view.

closePopups(layer)

Map.js, line 1470

Close all open popups

Name Type Description
layer module:cercaliagl/layer/Marker~Marker | undefined

coordToPixel(coordinate){module:maplibre-gl~PointLike}

Map.js, line 1222

Returns the pixel value from a coordinate

Name Type Description
coordinate module:cercaliagl/LonLat~LonLat

Coordinate.
Returns:
Return pixel of map.

disableClustering(layerId)

Map.js, line 1916

Disable marker clustering. Only available for module:cercaliagl/layer/Marker~Marker layer.

Name Type Description
layerId string

Layer id. Default LayersId.MARKERS_LAYER_ID.

disableDrawInteraction()

Map.js, line 1878

Disable draw interaction

disableHeatmap(layerId)

Map.js, line 1988
Name Type Description
layerId string

Layer id. Default LayersId.MARKERS_LAYER_ID.

enableClustering(options)

Map.js, line 1898

Enable marker clustering. Only available for module:cercaliagl/layer/Marker~Marker layer.

Name Type Description
options

Clustering options

Name Type Description
layerId string

Layer id. Default LayersId.MARKERS_LAYER_ID.
onClick function

Click over callback function.
onMouseOver function

Mouse over callback function.
onMouseOut function

Mouse out callback function.
maxZoom number

Max zoom for clustering. Default 16.
radius number

Radius in pixels to cluster. Default 40.

enableDrawInteraction(type, options)

Map.js, line 1844

Enable draw interaction

Name Type Description
type string

Available values line|polygon|draw_magnetic_polygon|circle|freehand_polygon
options

Draw options

Name Type Description
onDrawEnd function

Callback function when feature has been drawn. It receive geometry drawn

enableHeatmap(options)

Map.js, line 1975

Converts layer into heatmap. There are two layers: Zone layer for heat, and points layer. Points layers is useful to show markers in the nearest zooms. For better adaptation customize layer styles. Depends of number and density you should adjust heat layer styles. Read MapboxGL documentation to styling both layers: https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#heatmap.

Default values for styles for zones if options.styleHeatZones property is not provided:

{
  maxzoom: 15,
  paint: {
    'heatmap-intensity': [
      'interpolate', ['linear'], ['zoom'], 0, 0.1, 15, 1.5,
    ],
    'heatmap-color': [
      'interpolate', ['linear'],
      ['heatmap-density'], 0, 'rgba(0, 0, 255, 0)', 0.1, 'royalblue', 0.3, 'cyan', 0.5, 'lime', 0.7, 'yellow', 1, 'red',
    ],
    'heatmap-radius': [
      'interpolate', ['linear'], ['zoom'], 0, 1, 15, 14,
    ],
    'heatmap-opacity': [
      'interpolate', ['linear'], ['zoom'], 7, 0.8, 15, 0.3,
    ],
  },
}

Default values for styles for points if options.styleHeatPoints property is not provided:

{
  minzoom: 14,
  paint: {
    'circle-radius': [
      'interpolate', ['linear'], ['zoom'], 12, 3, 16, 6,
    ],
    'circle-color': 'rgba(0,0,0,0.4)',
    'circle-stroke-color': 'white',
    'circle-stroke-width': 1,
  },
}
Name Type Description
options

Heatmap layer options

Name Type Description
layerId string

Layer id. Default LayersId.MARKERS_LAYER_ID.
styleHeatZones module:cercaliagl/layer/Marker~StyleHeatLayer

Style layer zone. Read MapboxGL documentation https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#heatmap.
styleHeatPoints module:cercaliagl/layer/Marker~StyleHeatLayer

Point layer zone. Use layer type: circle styles. https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#circle

exportPNG(filename)

Map.js, line 1630

Export PNG image

Name Type Description
filename string (defaults to ExportCercaliaMap.png)

Filename.

getCenter(){module:cercaliagl/LonLat~LonLat}

Map.js, line 1076

Get map center

Returns:
Map center

getContainerId(){string}

Map.js, line 1116

Returns the container ID

Returns:
id Map container Id

getContextMenu(){module:cercaliagl/ContextMenu~ContextMenu}

Map.js, line 1023

Get context menu. Useful if user wants to add or remove

Returns:
Context menu

getControlByName(name){module:cercaliagl/control/ViewInterface~MapControl|null}

Map.js, line 1781
Name Type Description
name string

Name

getFeatureById(id, layer){module:cercaliagl/Feature~Feature|null}

Map.js, line 1461

Get marker by ID. It returns null if it is not found.

Name Type Description
id string

Id.
layer module:cercaliagl/layer/Feature~Feature

Marker layer.
Returns:
marker Marker or null if not found.

getFeatures(layer)

Map.js, line 1450
Name Type Description
layer module:cercaliagl/layer/Feature~Feature

getGeolocation(){module:cercaliagl/Geolocation~Geolocation}

Map.js, line 1707
Returns:
Geolocation

getLang(){string}

Map.js, line 2039
Returns:
Language

getLayerById(layerId){module:cercaliagl/layer/Base~LayerLike}

Map.js, line 1058

Get layer by id

Name Type Description
layerId string

Layer id

getMapDistance(){module:cercaliagl/MapDistance~MapDistance}

Map.js, line 1699
Returns:
Map routing object

getMapRouting(){module:cercaliagl/MapRouting~MapRouting}

Map.js, line 1691
Returns:
Map routing object

getMarkerById(id, layer){module:cercaliagl/Marker~Marker|null}

Map.js, line 1442

Get marker by ID. It returns null if it is not found.

Name Type Description
id string

Id.
layer module:cercaliagl/layer/Marker~Marker

Marker layer.
Returns:
marker Marker or null if not found.

getMarkers(layer)

Map.js, line 1431
Name Type Description
layer module:cercaliagl/layer/Marker~Marker

getRotation(){number}

Map.js, line 1606
Returns:
Rotation in degrees.

getSize(){Array.<number>}

Map.js, line 1107

Return width & height container div in pixels

Returns:
Size in pixels

getZoom(){number|undefined}

Map.js, line 1203
Returns:
Current zoom level of map.

hideControls()

Map.js, line 2064

Hide all map controls

hideLabels(layer)

Map.js, line 1485

hide all marker labels

Name Type Description
layer module:cercaliagl/layer/Marker~Marker | undefined

isReady()

Map.js, line 585

off(eventName, callbackFn)

Map.js, line 1834
Name Type Description
eventName string

Event name
callbackFn function

Callback function

on(eventName, callbackFn)

Map.js, line 1825
Name Type Description
eventName string

Event name
callbackFn function

Callback function

openContextMenu(center)

Map.js, line 1033

Open the context menu at the coordinates specified by parameters. If not specified, opens the context menu in the map center according to the current position.

Name Type Description
center module:cercaliagl/LonLat~LonLat

Coordinate

openPopups()

Map.js, line 1508

Show all markers popups. Only for markers with popup created

panTo(position, animation)

Map.js, line 1182

Moves the map to the new center

Name Type Description
position module:cercaliagl/LonLat~LonLat

Coordinates.
animation boolean (defaults to true)

Enable or disable animation. Default true.

panToBounds(bounds, animation)

Map.js, line 1192

Map center maintaining the zoom level

Name Type Description
bounds module:cercaliagl/Bounds~Bounds

Mapbounds.
animation boolean

Enable or disable animation. Default true.

pixelsToMeters(pixels){number|null}

Map.js, line 1244

Calculate the real distance in meters, from pixels values.

Name Type Description
pixels number

Pixels to measure
Returns:
meters Return measure in meters.

pixelToCoord(pixel){module:cercaliagl/LonLat~LonLat}

Map.js, line 1233

Returns the coordinate from a pixel value

Name Type Description
pixel module:maplibre-gl~PointLike

pixel of map.
Returns:
Coordinate

removeAllFeatures(layer)

Map.js, line 1374
Name Type Description
layer module:cercaliagl/layer/Feature~Feature

Feature layer

removeAllMarkers(layer)

Map.js, line 1317
Name Type Description
layer module:cercaliagl/layer/Marker~Marker

removeFeature(feature, layer)

Map.js, line 1357
Name Type Description
feature module:cercaliagl/Feature~Feature

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer

removeFeatures(features, layer)

Map.js, line 1366
Name Type Description
features Array.<module:cercaliagl/Feature~Feature>

Features
layer module:cercaliagl/layer/Feature~Feature

Feature layer

removeLayer(layer)

Map.js, line 1067

Remove layer

Name Type Description
layer module:cercaliagl/layer/Base~LayerLike

Layer

removeMarker(marker, layer)

Map.js, line 1300
Name Type Description
marker module:cercaliagl/Marker~Marker

Marker
layer module:cercaliagl/layer/Marker~Marker

Layer

removeMarkers(markers, layer)

Map.js, line 1309
Name Type Description
markers Array.<module:cercaliagl/Marker~Marker>
layer module:cercaliagl/layer/Marker~Marker

rotate(angle, animation)

Map.js, line 1616

Rotates the map degrees, by parameter

Name Type Description
angle number

Angle (degrees).
animation boolean (defaults to true)

Animation. Default true.

setCenter(lonLat, zoom, animation, speed)

Map.js, line 1157

Set the map center

Name Type Description
lonLat module:cercaliagl/LonLat~LonLat

Coordinates
zoom number

Zoom
animation boolean (defaults to false)

Enable or disable animation. Default true.
speed number (defaults to 1)

Speed animation. Default 1.

setContextMenu(contextMenu)

Map.js, line 1014
Name Type Description
contextMenu module:cercaliagl/ContextMenu~ContextMenu

Context menu

setDefaultClick(func)

Map.js, line 955

Set default click function. When map is clicked parameter function is triggered.

Name Type Description
func function | undefined

Function

setLanguage(lang)

Map.js, line 2027
Name Type Description
lang string

Language

setPitch(pitch, animation)

Map.js, line 1593
Name Type Description
pitch number

Pitch
animation boolean (defaults to true)

Animation. Default true.

setRotation(bearing, animation)

Map.js, line 1580

Sets the map rotation

Name Type Description
bearing number

Angle in degrees.
animation boolean (defaults to true)

Animation. Default true.

setZoom(zoom)

Map.js, line 1212

Set the zoom level of map. If second parameter is specified (boolean, optional)

Name Type Description
zoom number

Zoom level to adjust

showBuildings3D(visible, showToBuildings)

Map.js, line 1999

Show 3D buildings in close zooms.

Name Type Description
visible boolean

Visible or not.
showToBuildings boolean (defaults to false)

Buildings

showControls()

Map.js, line 2072

Show map controls

showInfoMap(infoMap)

Map.js, line 1650
Name Type Description
infoMap module:cercaliagl/InfoMap~InfoMap

Info map.

showLabels(layer)

Map.js, line 1497

show all marker labels

Name Type Description
layer module:cercaliagl/layer/Marker~Marker | undefined

toggleFullScreen()

Map.js, line 2047

Toggle full screen, only available inside any button event.

updateSize()

Map.js, line 2056

Force a recalculation of the map viewport size. This should be called when map container changes its size