MapView

Label: :IA_Function
Property: type: LeafletMapView
Inherits from: Function and View

The LeafletMapView Function, based on the Leaflet library, is a map component capable of displaying multiple layers, markers, geoJSON and much more.

MapView

Function parameters

Key	Description	Default value	Possible values
`$autoFit`	Zoom and center on markers or GeoJSON features	`true`	Boolean
`$center.lat`	Geographic latitude of the point which should be in the center of the map	0	Real number
`$center.long`	Geographic longitude of the point which should be in the center of the map	0	Real number
`$controls.drawing`	Options for the leaflet-draw plugin		Object
`$controls.measure`	Options for the leaflet-measure plugin		Object
`$geoJSON`	GeoJson data structure to be shown on the map		Object
`$geoJSONStyle`	GeoJSON default styling. This is the base styling applied to all GeoJSON features. It can be customized by the `style` property of a feature.		`Object` or `function`
`$geoJSONSelectedStyle`	GeoJSON styling for selected features. This is the base styling applied by default to the selected GeoJSON features. It can be customized by the `selectedStyle` property of a feature.		`Object` or `function`
`$layers`	Collection of tile layers (or WMS tile layers) to be displayed on the map. Each layer declaration should be indexed by a unique key/name (so this parameter is an object).	`{OpenStreetMap: {...}}`	Collection of `layer` `object`
`$layerControl`	Definition of the layer control used to enable and disable visible layers		`object`
`$markerCluster`	Configuration for the Leaflet.markercluster plugin		`object`
`$markerCluster.enabled`	Enabled the marker cluster functionality	`false`	`boolean`
`$markerCluster.options`	Options for the marker cluster functionality		`object`
`#markers`	Collection of markers to be displayed on the map		Array of objects
`$markers.info`	HTML content to be displayed on a popup when the marker is clicked on		Valid HTML `string`
`$options`	Map initialization options		`object`
`$projections`	Custom map projection declarations. Declarations should be indexed by a unique key/name. The projections will be created using the Proj4Leaflet plugin. The projection key/name can be referenced in the map options or in tile layer options.		Object
`$projections.projection`	Projection string. Most projections can be found at espg.io. Use the export to Proj4js functionality.		Valid projection string
`$projections.options`	Projection options (like `resolutions` or `origin`)		`object`
`#state.selected.markers`	Collection of makers that are/should be selected		`array` of existing makers
`#state.selected.features`	Collection of geoJSON features that are/should be selected		`array` of existing geoJSON features
`$zoom`	Zoom-in level on the map (the bigger the number the closer to the ground). `$autoFit: true` with `markers` or `geoJSON` on the map will override this value.		Real number

Outgoing triggers

Type: `mapClick`

Occurrence: When the user clicks on map.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`location`	Clicked Latitude and Longtitude	Object with `lat` and `lng` value
`x`	Clicked Screen X position	Number
`y`	Clicked Screen Y position	Number
`features`	Array of features that intersect with the clicked position	Array of features

Type: `markerClick`

Occurrence: When the user clicks a marker.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`marker`	The clicked marker.	Object with properties stored in the marker

Type: `markerRightClick`

Occurrence: When the user right-clicks a marker.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`marker`	The right-clicked marker.	Object with properties stored in the marker

Type: `featureClick`

Occurrence: When the user clicks a feature from geoJSON.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`feature`	The clicked feature.	Object with properties stored in the feature

Type: `mapRightClick`

Occurrence: When the user right clicks on map.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`location`	Clicked Latitude and Longtitude	Object with `lat` and `lng` value
`x`	Clicked Screen X position	Number
`y`	Clicked Screen Y position	Number

Type: `boundsChanged`

Occurrence: When the user clicks a feature from geoJSON.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`bounds`	Bounds data of visible map	Object with properties of bound {east: float, north: float, south: float, west: float}
`center`	Center of visible map	Object with `lat` and `long` value
`zoom`	Current zoom value of map	Real number

Type: `envelope`

Occurrence: When the user selects a section of the map by holding SHIFT.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`east`	Longitude of the right side of the drawn rectangle	Real number
`north`	Latitude of the top side of the drawn rectangle	Real number
`south`	Latitude of the bottom side of the drawn rectangle	Real number
`west`	Longitude of the left side of the drawn rectangle	Real number

Type: `drawing`

Occurrence: When the user draws with the drawing tool.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`tool`	Drawing tool used to create the feature	`circle` / `marker` / `polygon` / `polyline` / `rectangle`
`geoJSON`	geoJSON representation of the drawing	Object

Type: `measure`

Occurrence: When the user uses the measuring tool, creates a measurement and clicks "Finish measurement".

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`area`	Measured surface area in square meters	Number
`areaDisplay`	Measured surface area for display purposes	String
`lastCoord.dd`	Geographic position of the last point in the measurement	Object
`lastCoord.dms`	Geographic position of the last point in the measurement for display purposes	Object
`length`	Length in meters of the measured section (perimeter)	Number
`lengthDisplay`	Length of the measured section (perimeter) for display purposes	String
`pointCount`	Number of points of the measured polygon/polyline	Number
`points`	Geographic coordinates of the polygon/polyline measured	Array of points

Type: `selectionChanged`

Occurrence: When the user selects of deselects a marker or a geoJSON feature.

Additional event properties (besides the inherited properties):

Key	Description	Possible values
`markers`	Collection of currently selected makers	Array
`geoJSONFeatures`	Collection of currently selected geoJSON features	Array

Examples of setting properties

`$layers`

evaluate({
	'OpenStreetMap': {
		type: 'tileLayer',
		active: true,
		url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', 
		maxZoom: 19,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	},

	'OpenStreetMap.HOT': {
		type: 'tileLayer',
		url: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
		maxZoom: 19,
		attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Tiles style by <a href="https://www.hotosm.org/" target="_blank">Humanitarian OpenStreetMap Team</a> hosted by <a href="https://openstreetmap.fr/" target="_blank">OpenStreetMap France</a>'
	},

	'Aerial photos': {
		type: 'tileLayer',
		url: 'https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/2021_orthoHR/EPSG%3A3857/{z}/{x}/{y}.jpeg',
		useCache: true,
	},

	'Topological': {
		type: 'tileLayer',
		url: 'https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0?service=wmts&layer=pastel&style=default&tilematrixset=EPSG%3A3857&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix={z}&TileCol={x}&TileRow={y}',
		useCache: true,
	}
})

`$layerControl`

evaluate({
	baselayers: {
		'OpenStreetMap': 'OpenStreetMap',
		'OpenStreetMap HOT': 'OpenStreetMap.HOT'
	},

	overlays: {
		'Aerial photos': 'Aerial photos',
		'Topological map': 'Topological',
	}
})

`$projections`

evaluate({
	'ESPG28992': {
		projection: "+proj=sterea +lat_0=52.1561605555556 +lon_0=5.38763888888889 +k=0.9999079 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.4171,50.3319,465.5524,1.9342,-1.6677,9.1019,4.0725 +units=m +no_defs +type=crs",
		options: {
			resolutions: [
				3251.206502413005,
				3251.206502413005,
				3251.206502413005,
				3251.206502413005,
				3251.206502413005,
				3251.206502413005,
				1625.6032512065026,
				812.8016256032513,
				406.40081280162565,
				203.20040640081282, 
				101.60020320040641,
				50.800101600203206,
				25.400050800101603,
				12.700025400050801,
				6.350012700025401,
				3.1750063500127004,
				1.5875031750063502	
			],
			origin: [-3.05155E7, 3.1112399999999993E7]
		}
	}
})