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 231
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).
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 1992
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 1265
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)

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

Base layer

addCustomControl(control, position)

Map.js, line 882

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)

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

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer

addFeatures(features, layer)

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

Features
layer module:cercaliagl/layer/Feature~Feature

Feature layer

addGroupBaseLayer(id, label, baseLayers)

Map.js, line 1649
Name Type Description
id string

id
label string

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

Base layers

addLayer(layer, beforeLayerId)

Map.js, line 980

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

Marker
layer module:cercaliagl/layer/Marker~Marker

addMarkers(marker, layer)

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

Marker
layer module:cercaliagl/layer/Marker~Marker

Layer

centerOnGeolocation()

Map.js, line 684

Center on current GPS position

centerToFeatures(features, options)

Map.js, line 1459
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 1443
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 1717

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 1584

Close all menus and reset nav bar menu view.

closePopups(layer)

Map.js, line 1390

Close all open popups

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

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

Map.js, line 1154

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 1832

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 1794

Disable draw interaction

disableHeatmap(layerId)

Map.js, line 1901
Name Type Description
layerId string

Layer id. Default LayersId.MARKERS_LAYER_ID.

enableClustering(options)

Map.js, line 1814

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 1760

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 1891

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 1553

Export PNG image

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

Filename.

fitBounds(bounds, animation)

Map.js, line 1061

Fit the bounds: change the current map bounds to new bounds.

Name Type Description
bounds module:cercaliagl/Bounds~Bounds

New bounds
animation boolean (defaults to true)

Enable or disable animation. Default true.

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

Map.js, line 1011

Get map center

Returns:
Map center

getContainerId(){string}

Map.js, line 1051

Returns the container ID

Returns:
id Map container Id

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

Map.js, line 958

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

Returns:
Context menu

getControlByName(name)

Map.js, line 1700
Name Type Description
name string

Name

getFeatureById(id, layer){module:cercaliagl/Feature~Feature|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/Feature~Feature

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

getFeatures(layer)

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

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

Map.js, line 1630
Returns:
Geolocation

getLang(){string}

Map.js, line 1948
Returns:
Language

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

Map.js, line 993

Get layer by id

Name Type Description
layerId string

Layer id

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

Map.js, line 1622
Returns:
Map routing object

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

Map.js, line 1614
Returns:
Map routing object

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

Map.js, line 1362

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

getRotation(){number}

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

getSize(){Array.<number>}

Map.js, line 1042

Return width & height container div in pixels

Returns:
Size in pixels

getZoom(){number|undefined}

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

hideControls()

Map.js, line 1973

Hide all map controls

hideLabels(layer)

Map.js, line 1405

hide all marker labels

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

isReady()

Map.js, line 542

off(eventName, callbackFn)

Map.js, line 1750
Name Type Description
eventName string

Event name
callbackFn function

Callback function

on(eventName, callbackFn)

Map.js, line 1741
Name Type Description
eventName string

Event name
callbackFn function

Callback function

openContextMenu(lonLat)

Map.js, line 968

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 1428

Show all markers popups. Only for markers with popup created

panTo(position, animation)

Map.js, line 1114

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 1124

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 1176

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 1165

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

Feature layer

removeAllMarkers(layer)

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

removeFeature(feature, layer)

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

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer

removeFeatures(feature, layer)

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

Feature
layer module:cercaliagl/layer/Feature~Feature

Feature layer

removeLayer(layer)

Map.js, line 1002

Remove layer

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

Layer

removeMarker(marker, layer)

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

Marker
layer module:cercaliagl/layer/Marker~Marker

Layer

removeMarkers(markers, layer)

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

rotate(angle, animation)

Map.js, line 1539

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 1086

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

Context menu

setDefaultClick(func)

Map.js, line 891

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

Name Type Description
func function | undefined

Function

setLanguage(lang)

Map.js, line 1939
Name Type Description
lang string

Language

setPitch(pitch, animation)

Map.js, line 1516
Name Type Description
pitch number

Pitch
animation boolean (defaults to true)

Animation. Default true.

setRotation(bearing, animation)

Map.js, line 1503

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 1144

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 1912

Show 3D buildings in close zooms.

Name Type Description
visible boolean

Visible or not.
showToBuildings boolean (defaults to false)

Buildings

showControls()

Map.js, line 1981

Show map controls

showInfoMap(infoMap)

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

Info map.

showLabels(layer)

Map.js, line 1417

show all marker labels

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

toggleFullScreen()

Map.js, line 1956

Toggle full screen, only available inside any button event.

updateSize()

Map.js, line 1965

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