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 234
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 2032
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 1282
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 1663
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 892

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 1271
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 1292
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 1675
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 990

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

Marker
layer module:cercaliagl/layer/Marker~Marker

addMarkers(marker, layer)

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

Marker
layer module:cercaliagl/layer/Marker~Marker

Layer

centerOnGeolocation()

Map.js, line 694

Center on current GPS position

centerToFeatures(features, options)

Map.js, line 1483
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 1467
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 1754

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 1608

Close all menus and reset nav bar menu view.

closePopups(layer)

Map.js, line 1414

Close all open popups

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

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

Map.js, line 1169

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 1869

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 1831

Disable draw interaction

disableHeatmap(layerId)

Map.js, line 1938
Name Type Description
layerId string

Layer id. Default LayersId.MARKERS_LAYER_ID.

enableClustering(options)

Map.js, line 1851

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 1797

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 1928

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 1577

Export PNG image

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

Filename.

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

Map.js, line 1021

Get map center

Returns:
Map center

getContainerId(){string}

Map.js, line 1061

Returns the container ID

Returns:
id Map container Id

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

Map.js, line 968

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

Returns:
Context menu

getControlByName(name)

Map.js, line 1737
Name Type Description
name string

Name

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

Map.js, line 1405

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

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

Map.js, line 1654
Returns:
Geolocation

getLang(){string}

Map.js, line 1988
Returns:
Language

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

Map.js, line 1003

Get layer by id

Name Type Description
layerId string

Layer id

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

Map.js, line 1646
Returns:
Map routing object

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

Map.js, line 1638
Returns:
Map routing object

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

Map.js, line 1386

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

getRotation(){number}

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

getSize(){Array.<number>}

Map.js, line 1052

Return width & height container div in pixels

Returns:
Size in pixels

getZoom(){number|undefined}

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

hideControls()

Map.js, line 2013

Hide all map controls

hideLabels(layer)

Map.js, line 1429

hide all marker labels

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

isReady()

Map.js, line 549

off(eventName, callbackFn)

Map.js, line 1787
Name Type Description
eventName string

Event name
callbackFn function

Callback function

on(eventName, callbackFn)

Map.js, line 1778
Name Type Description
eventName string

Event name
callbackFn function

Callback function

openContextMenu(lonLat)

Map.js, line 978

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 1452

Show all markers popups. Only for markers with popup created

panTo(position, animation)

Map.js, line 1129

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 1139

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 1191

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 1180

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

Feature layer

removeAllMarkers(layer)

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

removeFeature(feature, layer)

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

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer

removeFeatures(feature, layer)

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

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer

removeLayer(layer)

Map.js, line 1012

Remove layer

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

Layer

removeMarker(marker, layer)

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

Marker
layer module:cercaliagl/layer/Marker~Marker

Layer

removeMarkers(markers, layer)

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

rotate(angle, animation)

Map.js, line 1563

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 1101

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

Context menu

setDefaultClick(func)

Map.js, line 901

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

Name Type Description
func function | undefined

Function

setLanguage(lang)

Map.js, line 1976
Name Type Description
lang string

Language

setPitch(pitch, animation)

Map.js, line 1540
Name Type Description
pitch number

Pitch
animation boolean (defaults to true)

Animation. Default true.

setRotation(bearing, animation)

Map.js, line 1527

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 1159

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 1949

Show 3D buildings in close zooms.

Name Type Description
visible boolean

Visible or not.
showToBuildings boolean (defaults to false)

Buildings

showControls()

Map.js, line 2021

Show map controls

showInfoMap(infoMap)

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

Info map.

showLabels(layer)

Map.js, line 1441

show all marker labels

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

toggleFullScreen()

Map.js, line 1996

Toggle full screen, only available inside any button event.

updateSize()

Map.js, line 2005

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