# new MapField(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 myMapField = document.createElement("a-mapfield").init(config)
Or use a shorthand to create one the various field types:
const myMapField = createMapField({
value: "-21,55",
zoom: 15,
width: 600,
mapHeight: 400
})
myMapField.render()
Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "mapfield",
value: "-21,55",
zoom: 15,
width: 600,
mapHeight: 400
}
]
})
myPanel.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
value |
string
|
<optional> |
Default address or geo coordinates like: latitude,longitude |
zoom |
number
|
<optional> |
Zoom level (default 10, max 19) |
mapHeight |
number
|
<optional> |
Height (the map width is defined by the field's width) |
mapRatio |
number
|
string
|
<optional> |
Ratio between the field width and the map height (default 4/3). Can be a number or a string to evaluate, like: "4/3", "16/9", 1.77, 1.33, 2, etc. Use this property only if the height is not defined. |
this
Generated markup
<a-mapfield class="a-mapfield">
<label class="field-label"></label>
<input type="text|number|date" class="field-input"></input>
</a-field>
Methods
# setAddress(address)
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
|
this
Example
myMapField.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
myMapField.setGeolocation({
longitude: 2.3483915,
latitude: 48.8534951
})