Class: Map

cercalia.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
options

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: http://maps.cercalia.com/#[-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

Extends

Members

cercalia.Map.DefaultMapControls{Array.<string>}

Methods

addBaseLayer(baseLayer)

src/cercalia/map.js, line 1560

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 2868

Add the given control to the map.

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

Control.

position number

Position.

addCustomControl(control, opt_position)

src/cercalia/map.js, line 2906

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

Position.

addFeature(feature, opt_layer)

src/cercalia/map.js, line 2051

Paint cercalia.Feature list on the map.

Name Type Description
feature cercalia.Feature

Feature

layer ol.layer.Layer

Layer.

addFeatures(features, opt_layer)

src/cercalia/map.js, line 2062

Paint cercalia.Feature on the map.

Name Type Description
features Array.<cercalia.Feature>

List of features.

layer ol.layer.Layer

Layer.

addLayer(layer, opt_position, opt_draggable)

src/cercalia/map.js, line 1266

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 2006

Paint cercalia.Marker list on the map.

Name Type Description
marker cercalia.Marker

Marker to add.

layer ol.layer.Layer

Layer

addMarkers(markers, opt_layer)

src/cercalia/map.js, line 2017

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

Name Type Description
markers Array.<cercalia.Marker>

List of markers.

layer ol.layer.Layer

Lyaer

addWMSLayer(wmsLayer, position)

src/cercalia/map.js, line 1968

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 1688

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 1631

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
markers Array.<cercalia.Marker>

List Markers, if not specified center to all markers.

changeZoom boolean

Default true.

animation boolean

Enable or disable animation. Default true.

changeLogo(opt_content)

src/cercalia/map.js, line 1244

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

Name Type Description
content string

HTML content

closeAll()

src/cercalia/map.js, line 2948

Close all menus and reset nav bar menu view.

closePopups()

src/cercalia/map.js, line 2361

Close all open popups

coordToPixel(lonLat){ol.Pixel}

src/cercalia/map.js, line 1421

Returns the pixel value from a coordinate

Name Type Description
lonLat cercalia.LonLat

Coordinate.

Returns:
Return pixel of map.

createStaticMap(callbackFn)

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

Callback function

disableClustering()

src/cercalia/map.js, line 2619

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

disableDrawInteraction()

src/cercalia/map.js, line 2855

Disable the painting status

disableSnapping()

src/cercalia/map.js, line 2747

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

src/cercalia/map.js, line 2513

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 2764

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

enableMouseOverEvents(enable)

src/cercalia/map.js, line 743

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

enableSnapping()

src/cercalia/map.js, line 2736

exportPNG(opt_filename)

src/cercalia/map.js, line 2916

Export PNG image

Name Type Description
filename string | undefined

Filename.

fitBounds(bounds, opt_animation, opt_size)

src/cercalia/map.js, line 1750

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

Name Type Description
bounds cercalia.Bounds

New bounds

animation boolean

Enable or disable animation. Default true.

size ol.Size

Size in pixel of the box to fit the extent into.

getBaseLayer(){ol.layer.Tile}

src/cercalia/map.js, line 1357

Returns the layer (ol.layer.Tile) used as basemap

Returns:
Return baselayer

getBounds(){cercalia.Bounds|undefined}

src/cercalia/map.js, line 1734

Returns the current bounds

Returns:
Current bounds, according to the zoom level, position and widht-height

getCenter(){cercalia.LonLat|undefined}

src/cercalia/map.js, line 1368

Returns the map center.

Returns:
Return center coordinates cercalia.LonLat. Undefined if map is not setted.

getClass(){string} inherited

src/cercalia/object.js, line 41
Returns:
Get Class name of object

getClosestFeature(position, opt_layer){cercalia.Feature}

src/cercalia/map.js, line 2291
Name Type Description
position cercalia.LonLat

Position

layer ol.layer.Layer

Layer

Returns:
Nearest feature to coordinate

getClosestMarker(position, opt_layer){cercalia.Marker}

src/cercalia/map.js, line 2301
Name Type Description
position cercalia.LonLat

Position

layer ol.layer.Layer

Layer

Returns:
Nearest marker to coordinate

getContainerId(){string}

src/cercalia/map.js, line 1331

Returns the container ID

Returns:
id Map container Id

getContextMenu(){cercalia.ContextMenu}

src/cercalia/map.js, line 3058
Returns:
Get contextmenu.

getControlByName(name){ol.control.Control}

src/cercalia/map.js, line 1585

Obtains the map control from its name. Complete controls list (if are created):

  • cercalia.control.MapControls.ADDRESS
  • cercalia.control.MapControls.CLEAN
  • cercalia.control.MapControls.GAS_STATIONS
  • cercalia.control.MapControls.LAYER_SWITCHER
  • cercalia.control.MapControls.ISOCHRONES
  • cercalia.control.MapControls.LOGISTICS_RESTRICTIONS
  • cercalia.control.MapControls.LAYER_REGIONS
  • cercalia.control.MapControls.METEO
  • cercalia.control.MapControls.NAVBAR
  • cercalia.control.MapControls.TRAFFIC
  • cercalia.control.MapControls.ZOOM
Name Type Description
name string

Name of control

Returns:
Control.

getControlsByClassName(className){Array.<ol.control.Control>}

src/cercalia/map.js, line 1603

Obtains the map control from its class name. Complete controls list (if are created):

  • `cercalia.control.Address
  • `cercalia.control.Clean
  • `cercalia.control.GasStations
  • `cercalia.control.LayerSwitcher
  • `cercalia.control.Meteo
  • `cercalia.control.NavBar
  • `cercalia.control.Traffic
  • cercalia.control.Zoom
Name Type Description
className string

Classname of control

Returns:
Control.

getEventCoordinate(evt){cercalia.LonLat}

src/cercalia/map.js, line 1453
Name Type Description
evt ol.MapEvent

Event

Returns:
Position

getEventPixel(evt){ol.Pixel}

src/cercalia/map.js, line 1444

Obtains pixel

Name Type Description
evt ol.MapEvent

Event

Returns:
pixel Pixel

getFeatures(){Array.<cercalia.Feature>|null}

src/cercalia/map.js, line 2098

Obtain all the cercalia.Feature painted on the map

Returns:
Feature list painted on the map

getFeaturesByLayer(layer){Array.<cercalia.Marker>|Array.<cercalia.Feature>}

src/cercalia/map.js, line 2122

Get Cercalia Markers and Features (ignoring features created directly by ol.Feature)

Name Type Description
layer ol.layer.Layer

Layer

Returns:
list of markers or features.

getGeolocation(){ol.Geolocation|undefined}

src/cercalia/map.js, line 1099
Returns:
Geolocation

getId(){string} inherited

src/cercalia/object.js, line 33
Returns:
Unique Id.

getLayerByName(layerName){ol.layer.Layer}

src/cercalia/map.js, line 1541
Name Type Description
layerName string

Name of layer.

Returns:
OpenLayers layer.

getLayerIndexByName(layerName){number|null}

src/cercalia/map.js, line 1987

Obtains the layer position (Z value). The layers are painted respecting Z position: 0 is the base map.

Name Type Description
layerName string

Name of layer.

Returns:
Layer position

getMap(){ol.Map}

src/cercalia/map.js, line 1348

Returns the OpenLayers3 object ol.Map

Returns:
Map

getMapDistance(){cercalia.MapDistance}

src/cercalia/map.js, line 3050
Returns:
Map routing object.

getMapRouting(){cercalia.MapRouting}

src/cercalia/map.js, line 3042
Returns:
Map routing object.

getMarkerById(id){cercalia.Marker|null}

src/cercalia/map.js, line 2108

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

Name Type Description
id string

Id.

Returns:
marker Marker or null if not found.

getMarkers(){Array.<cercalia.Marker>|null}

src/cercalia/map.js, line 2088

Obtain all the cercalia.Marker painted on the map

Returns:
Marker list painted on the map

getOverlappedMarkers(currentExtentView, opt_tolerance){Array.<Array.<ol.Feature>>}

src/cercalia/map.js, line 2392

Get Overlapped markers

Name Type Description
currentExtentView boolean | undefined

If true returns only visible markers at the moment, if not null or false it returns all markers

tolerance number

Tolerance in meters.

Returns:
Array of group (array) of features.

getProjectionCode(){string}

src/cercalia/map.js, line 1824

Obtains the map projection code

Returns:
EPSG code. For example: EPSG:3857.

getRotation(){number}

src/cercalia/map.js, line 1804
Returns:
Rotation in degrees.

getScaleUnits(){string}

src/cercalia/map.js, line 1339
Returns:
Scale units

getViewportSize(){Object.<string>}

src/cercalia/map.js, line 3075

Get viewport size

Returns:
Return {w: width, h: height}

getZoom(){number|undefined}

src/cercalia/map.js, line 1402
Returns:
Current zoom level of map.

hideControls()

src/cercalia/map.js, line 1611

Hide all map controls.

hideLabels()

src/cercalia/map.js, line 2326

Hide all labels cercalia.Label from markers painted on the map

metersToPixels(meters){number|undefined}

src/cercalia/map.js, line 1481

Calculate in pixels, from distance in meters on current map bounds (no geodesic distance).

Name Type Description
meters number

Meters

Returns:
meters Return measure in meters.

openContextMenu(opt_lonLat)

src/cercalia/map.js, line 964

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 cercalia.LonLat

Coordinate

openPopups()

src/cercalia/map.js, line 2375

Show all markers popups. Only for markers with popup created

panTo(lonLat, opt_animation)

src/cercalia/map.js, line 1768

Moves the map to the new center

Name Type Description
lonLat cercalia.LonLat

Coordinates.

animation boolean

Enable or disable animation. Default true.

panToBounds(bounds, opt_animation)

src/cercalia/map.js, line 1784

Map center maintaining the zoom level

Name Type Description
bounds cercalia.Bounds

Mapbounds.

animation boolean

Enable or disable animation. Default true.

pixelsToMeters(pixels){number|undefined}

src/cercalia/map.js, line 1465

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){cercalia.LonLat}

src/cercalia/map.js, line 1432

Returns the coordinate from a pixel value

Name Type Description
pixel ol.Pixel

Pixel

Returns:
Coordinate

removeAllFeatures()

src/cercalia/map.js, line 2252

Clean all features

removeAllMarkers()

src/cercalia/map.js, line 2241

Clean all markers and popups

removeAllOverlays()

src/cercalia/map.js, line 2279

Clean all overlays painted on the map

removeDrawFeatures()

src/cercalia/map.js, line 2265

Clean all the features painted on the map with draw tool. Layer 'DrawLayer'

removeFeatures(features, opt_layer)

src/cercalia/map.js, line 2191

Remove features list from map

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

Feature or list of features.

layer ol.layer.Layer

If not defined it will remove features in internal Cercalia layer.

removeLayer(layer)

src/cercalia/map.js, line 1298

Clean the layer specified by parameter

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

Layer to remove.

removeMarkers(markers, opt_layer)

src/cercalia/map.js, line 2157

Remove markers list from map

Name Type Description
markers cercalia.Marker | Array.<cercalia.Marker>

Marker or list of markers to remove.

layer ol.layer.Layer

If not defined it will remove features in internal Cercalia layer.

removeWMSLayer(wmsLayer)

src/cercalia/map.js, line 1977

Remove a WMS layer cercalia.WMS from the map

Name Type Description
wmsLayer cercalia.WMS

WMS Layer to remove.

rotate(angle)

src/cercalia/map.js, line 1814

Rotates the map degrees, by parameter

Name Type Description
angle number

Angle (degrees).

setBaseLayer(mapType)

src/cercalia/map.js, line 1163
Name Type Description
mapType string | cercalia.WMS | ol.layer.Layer | ol.layer.Group

Change base map.
Maps avaliable by default. String:

  • cercalia.MapTypes.CERCALIA Cercalia
  • cercalia.MapTypes.OSM Cercalia
  • cercalia.MapTypes.SATELLITE

    Also can use your own custom base layers. Also can use a WMS layer (object cercalia.WMS), that will be set as base Layer. Also can add layers using OpenLayers classes ol.layer.Layer y ol.layer.Group.

setCenter(lonLat, opt_zoom, opt_animation)

src/cercalia/map.js, line 1383

Set the map center

Name Type Description
lonLat cercalia.LonLat

Coordinates

zoom number

Zoom

animation boolean

Enable or disable animation. Default true.

setDefaultClick(func)

src/cercalia/map.js, line 2719

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

Name Type Description
func function | undefined

Function

setFeatureDrawingStyles(styles)

src/cercalia/map.js, line 2832
Name Type Description
styles Object

Styles.

setGreyScale(enable)

src/cercalia/map.js, line 2996

Change base map colors to grey ssacle

Name Type Description
enable boolean

Enable

setProjection(projection, opt_layer)

src/cercalia/map.js, line 1861

Changes the projection to basemap and all the layers painted over it (markers, features, WMS, etc).

Name Type Description
projection ol.proj.Projection

Projection.

layer ol.layer.Layer

Layer. Optional.

setRestrictedView(minZoom, maxZoom, bounds)

src/cercalia/map.js, line 1836

Fixes the minimum and maximum zoom level

Name Type Description
minZoom number | boolean

Min zoom, false if don't want this limit

maxZoom number | boolean

Max zoom, false if don't want this limit

bounds cercalia.Bounds

Map bounds limits

setRotation(angle)

src/cercalia/map.js, line 1796

Sets the map rotation

Name Type Description
angle number

Angle in degrees.

setZoom(zoom)

src/cercalia/map.js, line 1411

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

Name Type Description
zoom number

Zoom level to adjust

showControls()

src/cercalia/map.js, line 1619

Show all map controls.

showInfoMap(infoMap)

src/cercalia/map.js, line 2937
Name Type Description
infoMap cercalia.InfoMap

Info map.

showingLabels(){boolean}

src/cercalia/map.js, line 2353

Returns boolean showing if all labels are showing or hidden.

Returns:
Return wheter labels are visible.

showLabels()

src/cercalia/map.js, line 2340

Show all labels cercalia.Label from markers painted on the map

showMarkers(markers, show)

src/cercalia/map.js, line 2141

Show the markers painted on the map. This function is usefull when some or all markers are hidden.

Name Type Description
markers cercalia.Marker | Array.<cercalia.Marker>

Marker or list of markesrs.

show boolean

Show markers. (true or false).

updateSize()

src/cercalia/map.js, line 3066

Force a recalculation of the map viewport size. This should be called when third-party code changes the size of the map viewport.