# new Map(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const myMap = document.createElement("a-map").init(config)
Or use the shorthand for it:
const myMap = createMap({
width: 300,
height: 200,
longitude: 2.3483915,
latitude: 48.8534951,
zoom: 15
})
myMap.render()
Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "map",
width: 300,
height: 200,
longitude: 2.3483915,
latitude: 48.8534951,
zoom: 15
}
]
})
myPanel.render()
You can define a map from a geolocation or an address:
const myMapFromGeoloc = createMap({
longitude: 2.3483915,
latitude: 48.8534951,
})
const myMapFromAddress = createMap({
address: "10 Downing Street, London",
})
For now, the geoencoding is done with Nominatim, which is a free service but has limitations when it comes to the accuracy of the address street number.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
longitude |
float
|
<optional> |
Longitude |
latitude |
float
|
<optional> |
Latitude |
address |
string
|
<optional> |
Address |
markers |
Array.<object>
|
<optional> |
Array of markers to display on the map, where heach marker is an object like: {longitude, latitude, label}. Do not use this if you set the |
zoom |
integer
|
<optional> |
Zoom level (default 10) |
width |
integer
|
<optional> |
Width in pixels |
height |
integer
|
<optional> |
Height in pixels |
showMarker |
boolean
|
<optional> |
Set false to hide the marker at the center of the default location. Default is true. |
canSelectLayer |
boolean
|
<optional> |
Set true to add a button to switch between default map and ESRI satellite view. Default is true. |
useCDN |
boolean
|
<optional> |
Set to false to use the local version of OpenLayers. Default is true. |
this
Generated markup
<a-map class="a-map">
<div class="ol-viewport"></div>
</a-map>
Methods
# async addGeoMarker(longitude, latitude)
Add a marker on the map at the current geolocation
Parameters:
| Name | Type | Description |
|---|---|---|
longitude |
number
|
Longitude of the marker |
latitude |
number
|
Latitude of the marker |
this
# async addMarkers(markers)
Add multiple markers on the map. The first marker will be used to set the center of the map.
Parameters:
| Name | Type | Description |
|---|---|---|
markers |
Array.<object>
|
Array of markers to display on the map, where each marker is an object like: {longitude, latitude, label} |
this
# async getBounds() → {object}
Get the current bounding box of the map
The bounding box object with the following properties: {minLongitude, minLatitude, maxLongitude, maxLatitude}
object
# async setAddress(address) → {object}
Set a new address on the map
IMPORTANT: this methods uses Nominatim for geocoding, which is a free service but has limitations when it comes to the accuracy address street number.
Parameters:
| Name | Type | Description |
|---|---|---|
address |
string
|
The geolocation object: {longitude, latitude}
object
Example
myMap.setAddress("10 Downing Street, London")# setGeolocation(geoloc)
Set a new geolocation on the map
Parameters:
| Name | Type | Description |
|---|---|---|
geoloc |
object
|
|
longitude |
number
|
|
latitude |
number
|
this
Example
myMap.setGeolocation({
longitude: 2.3483915,
latitude: 48.8534951
})# setZoom(zoom)
Set a new zoom level on the map
Parameters:
| Name | Type | Description |
|---|---|---|
zoom |
number
|
this
Example
myMap.setZoom(15)# switchToDefaultView()
Switch to the default OpenStreetMap view of the map
# switchToSatteliteView()
Switch to the satellite view of the map