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

  • 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.TRAFFIC
  • cercaliagl.control.MapControls.ZOOM
  • cercaliagl.control.MapControls.ISOCHRONES

    If you want a map without controls put value `[]`.
mapLayers Array.<string>

Default map base layers. cercalia.MapTypes.CERCALIA, cercalia.MapTypes.OSM, `cercalia.MapTypes.SATELLITE``.
customBaseLayers Array.<(module:cercaliagl/layer/XYZ~XYZ|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
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 routing3d

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

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

Methods

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

Map.js, line 2027
Name Type Description
marker Marker

Marker that will be animated
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 1277
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 1658
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 887

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 1266
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 1287
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 1670
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 985

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 1219
Name Type Description
marker module:cercaliagl/Marker~Marker

Marker
layer module:cercaliagl/layer/Marker~Marker

addMarkers(marker, layer)

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

Marker
layer module:cercaliagl/layer/Marker~Marker

Layer

centerOnGeolocation()

Map.js, line 689

Center on current GPS position

centerToFeatures(features, options)

Map.js, line 1478
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 1462
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 1749

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.EMPTY
Name Type Description
baseLayer string

Base layer

closeAll()

Map.js, line 1603

Close all menus and reset nav bar menu view.

closePopups(layer)

Map.js, line 1409

Close all open popups

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

coordToPixel(lonLat){module:cercaliagl/pixel~Pixel}

Map.js, line 1164

Returns the pixel value from a coordinate

Name Type Description
lonLat module:cercaliagl/LonLat~LonLat

Coordinate.
Returns:
Return pixel of map.

disableClustering(layerId)

Map.js, line 1864

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 1826

Disable draw interaction

disableHeatmap(layerId)

Map.js, line 1933
Name Type Description
layerId string

Layer id. Default LayersId.MARKERS_LAYER_ID.

enableClustering(options)

Map.js, line 1846

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 1792

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 1923

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 1572

Export PNG image

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

Filename.

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

Map.js, line 1016

Get map center

Returns:
Map center

getContainerId(){string}

Map.js, line 1056

Returns the container ID

Returns:
id Map container Id

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

Map.js, line 963

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

Returns:
Context menu

getControlByName(name)

Map.js, line 1732
Name Type Description
name string

Name

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

Map.js, line 1400

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 1389
Name Type Description
layer module:cercaliagl/layer/Feature~Feature

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

Map.js, line 1649
Returns:
Geolocation

getLang(){string}

Map.js, line 1983
Returns:
Language

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

Map.js, line 998

Get layer by id

Name Type Description
layerId string

Layer id

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

Map.js, line 1641
Returns:
Map routing object

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

Map.js, line 1633
Returns:
Map routing object

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

Map.js, line 1381

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 1370
Name Type Description
layer module:cercaliagl/layer/Marker~Marker

getRotation(){number}

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

getSize(){Array.<number>}

Map.js, line 1047

Return width & height container div in pixels

Returns:
Size in pixels

getZoom(){number|undefined}

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

hideControls()

Map.js, line 2008

Hide all map controls

hideLabels(layer)

Map.js, line 1424

hide all marker labels

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

isReady()

Map.js, line 547

off(eventName, callbackFn)

Map.js, line 1782
Name Type Description
eventName string

Event name
callbackFn function

Callback function

on(eventName, callbackFn)

Map.js, line 1773
Name Type Description
eventName string

Event name
callbackFn function

Callback function

openContextMenu(lonLat)

Map.js, line 973

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
lonLat module:cercaliagl/LonLat~LonLat

Coordinate

openPopups()

Map.js, line 1447

Show all markers popups. Only for markers with popup created

panTo(position, animation)

Map.js, line 1124

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 1134

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 1186

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 1175

Returns the coordinate from a pixel value

Name Type Description
pixel module:cercaliagl/pixel~Pixel

pixel of map.
Returns:
Coordinate

removeAllFeatures(layer)

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

Feature layer

removeAllMarkers(layer)

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

removeFeature(feature, layer)

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

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer

removeFeatures(feature, layer)

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

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer

removeLayer(layer)

Map.js, line 1007

Remove layer

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

Layer

removeMarker(marker, layer)

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

Marker
layer module:cercaliagl/layer/Marker~Marker

Layer

removeMarkers(markers, layer)

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

rotate(angle, animation)

Map.js, line 1558

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 1096

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 954
Name Type Description
contextMenu module:cercaliagl/ContextMenu~ContextMenu

Context menu

setDefaultClick(func)

Map.js, line 896

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

Name Type Description
func function | undefined

Function

setLanguage(lang)

Map.js, line 1971
Name Type Description
lang string

Language

setPitch(pitch, animation)

Map.js, line 1535
Name Type Description
pitch number

Pitch
animation boolean (defaults to true)

Animation. Default true.

setRotation(bearing, animation)

Map.js, line 1522

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 1154

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 1944

Show 3D buildings in close zooms.

Name Type Description
visible boolean

Visible or not.
showToBuildings boolean (defaults to false)

Buildings

showControls()

Map.js, line 2016

Show map controls

showInfoMap(infoMap)

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

Info map.

showLabels(layer)

Map.js, line 1436

show all marker labels

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

toggleFullScreen()

Map.js, line 1991

Toggle full screen, only available inside any button event.

updateSize()

Map.js, line 2000

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