# 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 |
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. 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 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) → {object}
Set a new geolocation on the map
Parameters:
| Name | Type | Description |
|---|---|---|
geoloc |
object
|
|
longitude |
number
|
|
latitude |
number
|
The geolocation object
object
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)