Constructor

# new MapView(config)

Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the following methods:

Create the Web Component and call its init method:

const myMapView = document.createElement("a-mapview").init(config)

Or use the shorthand for it:

const myMapView = createMapView({
 id: "my-mapview",
 collection: kiss.app.collections["contact"],
 coordinatesField: "gpsCoordinates",
 coordinatesFormat: "longitude,latitude",
 defaultCoordinates: "55.3895,-20.9906",
 defaultZoom: 10,
 labelField: "name"
})

myMapView.render()

Parameters:

Name	Type	Attributes	Description
`config`	`object`
`collection`	`Collection`		The data source collection
`coordinatesField`	`string`	<optional>	The field to use as the GPS coordinates. If not set, the map won't display any marker.
`coordinatesFormat`	`string`	<optional>	The format of the coordinates field. Default is "longitude,latitude".
`defaultCoordinates`	`string`	<optional>	The default coordinates to use when the map is first displayed. Ex: "55.3895,-20.9906"
`defaultZoom`	`number`	<optional>	The default zoom level to use when the map is first displayed. Between 1 and 19.
`labelField`	`string`	<optional>	The field to use as the label for the markers.
`maxMarkers`	`number`	<optional>	The maximum number of markers to display on the map (for performances reason). Default is 100.
`clickCallback`	`function`	<optional>	Callback function to call when a marker is clicked. The function receives the clicked feature and the clicked coordinates.
`record`	`object`	<optional>	Record to persist the view configuration into the db
`color`	`string`	<optional>	Hexa color code. Ex: #00aaee
`showToolbar`	`boolean`	<optional>	false to hide the toolbar (default = true)
`showActions`	`boolean`	<optional>	false to hide the custom actions menu (default = true)
`canFilter`	`boolean`	<optional>	false to hide the filter button (default = true)
`canSearch`	`boolean`	<optional>	false to hide the search button (default = true)
`canCreateRecord`	`boolean`	<optional>	Can we create new records from the map view?
`createRecordText`	`boolean`	<optional>	Optional text to insert in the button to create a new record, instead of the default model's name
`actions`	`Array.<object>`	<optional>	Array of menu actions, where each menu entry is: {text: "abc", icon: "fas fa-check", action: function() {}}
`width`	`number` \| `string`	<optional>
`height`	`number` \| `string`	<optional>

View Source client/ui/data/mapview.js, line 52

Returns:

this

Generated markup

<a-mapview class="a-mapview">
     <div class="mapview-toolbar">
         <!-- MapView toolbar items -->
     </div>
     <div class="mapview-body-container">
         <div class="mapview-body">
             <!-- Body columns -->
         </div>
     </div>
</a-mapview>

Methods

# async filterMarkers(boundsopt)

Filter the markers based on the given bounds.

This method is called when the map bounds change, to update the markers displayed on the map.

Parameters:

Name	Type	Attributes	Description
`bounds`	`object`	<optional>	The bounding box to filter the markers. Ex: {maxLatitude: 50, minLatitude: 40, maxLongitude: 10, minLongitude: 0}. If not provided, it will use the current map bounds.