Configuration overview

Introduction

The configuration is used to change how the map behaves. There are properties to control the type of map displayed, styling, fonts, the legend, etc. You can use inputs and outputs to configure your map and to catch events when are triggered.

Basic Example

This is a basic example of a Map using inputs to display data.

HTML

<o-map #oMapBasic attr="basic-usage-map" center="42.240599, -8.720727" zoom="11" min-zoom="3" max-zoom="20" zoom-control="yes" search-control="no" fxFlex>
</o-map>

In the API tab you can check all inputs and outputs allowed.

Basic Example with base layers

This is an example of a Map with the base layers of the map indicated in the attribute. By default, if none is provided it is used ‘OpenStreetMap’ base layer.

HTML

<o-map #oMapBaseLayers attr="base-layers-map" center="42.240599, -8.720727" zoom="11" min-zoom="3" max-zoom="20"
base-layer-ids="CartoDB.Positron;Esri;OpenStreetMap.HOT;OpenStreetMap.BlackAndWhite" zoom-control="yes" search-control="no" fxFlex>
</o-map>

You can check every map parameter available for the o-map in the API tab section.

OMapComponent

Directive: o-map

Inputs

Name	Since	Description	Default
base-layer-ids array		Defines the array of base layer ids. e.g. base-layer-ids=’basemap.nationalmap.gov’
center LatLng		Initialize the map with a given center in latitude and longitude. e.g center=’42.240599;-8.720727’
draw-control string		Enable or disable draw controls
group-markers boolean		Enable to display a large number of markers on a map.
layer-contextmenu		Show or not context menu
layer-panel-visible string		Type of data displayed on Y axis
max-zoom string		Maximum zoom level of the map.
min-zoom string		Minimum zoom level of the map.
search-control boolean		Show or not search control.	true
search-control-button-visible boolean		Show or not button in search control
show-base-layers-menu boolean		Enable or disable base layers menu	true
show-layers-menu boolean		Enable or disable layers menu	true
show-workspace-menu boolean		Enable or disable workspace menu	true
sidenav-mode ['over' | 'push' | 'side']		Mode of the sidenav	over
zoom number		Initial map zoom level.
zoom-control boolean		Show or not zoom controls.	true

Outputs

Name	Since	Description
onClick		Fired when the user clicks (or taps) the map.
onDrag		Fired repeatedly while the user drags.
onDrawCreated		Triggered when a new vector or marker has been created.
onDrawDeleteStart		Triggered when the user starts remove mode by clicking the remove tool button.
onDrawDeleteStop		Triggered when the user has finished removing shapes (remove mode) and saves.
onDrawDeleted		Triggered when layers have been removed (and saved).
onDrawDrawStart		Triggered when the user has chosen to draw a particular vector or marker.
onDrawDrawstop		Triggered when the user has finished a particular vector or marker.
onDrawEditMove		Layer that was just moved. Triggered as the user moves a rectangle; circle or marker.
onDrawEditResize		Triggered as the user resizes a rectangle or circle.
onDrawEditStart		Triggered when the user starts edit mode by clicking the edit tool button.
onDrawEditStop		Triggered when the user has finshed editing (edit mode) and saves edits.
onDrawEdited		Triggered when layers have been edited and saved.
onDrawEditvertex		Triggered when a vertex is edited on a polyline or polygon.
onDrawEvent		Triggered when a vector or marker has been manipulated.
onDrawvertex		Triggered when a vertex is edited on a polyline or polygon.
onMove		Fired repeatedly during any movement of the map, including pan and fly animations.
onMoveEnd		Fired when the center of the map stops changing (e.g. user stopped dragging the map).
onZoom		Fired repeatedly during any change in zoom level, including zoom and fly animations.
onZoomEnd		Fired when the map has changed, after any animations.
onZoomLevelsChange		Fired repeatedly during any change in zoom level.
onZoomStart		Fired when the map zoom is about to change (e.g. before zoom animation).