MapLibre
- HTML tag name:
<builderius-maplibre> - Implements 3rd-party script: MapLibre JS 2.4.0
- Allowed children modules: none
- Available since:
0.9.8 PRO
Description
This module allows adding maps with markers, tracks or any other data visualization. It is an alternative to Google Maps and Mapbox. Using this module DOES NOT require having any API keys. https://maplibre.org is completely open source and free to use!
How it works
The module creates <builderius-maplibre> custom HTML tag. It is a modular self-contained instance of MapLibre JS library.
Important: since <builderius-maplibre> is a custom HTML element, its default behavior is equal to inline element, not block; it can be changed any time with display CSS property in the module’s settings.
By default, the map options are:
{
center: [9.1496, 39.2561],
zoom: 12,
style: {
version: 8,
sources: {
osm: {
type: 'raster',
tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
tileSize: 256,
attribution: 'Map tiles by <a target="_top" rel="noopener" href="https://tile.openstreetmap.org/">OpenStreetMap tile servers</a>, under the <a target="_top" rel="noopener" href="https://operations.osmfoundation.org/policies/tiles/">tile usage policy</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>'
}
},
layers: [{
id: 'osm',
type: 'raster',
source: 'osm'
}]
}
}
These options can be changed via data-settings attribute. With these default options the map will be loaded already. Openstreetmap tiles will be loaded based on these options. More styles are here: https://www.maptiler.com/ This service has a free plan.
Important: the coordinates must be defined in this order - first longitude, then latitude!
How to add a marker?
Custom markers can be added to the map via data-markers attribute. Example:
[
{
"coord":[9.087933,40.070653],
"desc":”Some description here”
}
]
We add such a JSON array as the value of the mentioned before attribute and the map displays the marker.
[
{
"coord":[9.087933,40.070653],
"desc":”Some description here”
}
]
We add such a JSON array as the value of the mentioned before attribute and the map displays the marker.
API
Attributes
data-api-key (required)
This attribute expects a string.
data-settings (required)
This attribute expects a stringified JSON object with MapLibre options. The full list of available options is here: https://maplibre.org/maplibre-gl-js-docs/api/map/
data-fit-bounds-options (required)
This attribute expects a stringified JSON object with MapLibre options. The full list is here: https://maplibre.org/maplibre-gl-js-docs/api/map/#map#fitbounds
data-markers (required)
This attribute expects a stringified JSON array of data.
data-disable-scroll-zoom
This attribute is a boolean type. Any value counts as true and also may be without a value - it also counts as true.
Events
ready (scope: element)
builderius-maplibre-ready (scope: window)
This event is getting fired every time the component is being initiated/re-initiated. It also passes some data:
{ el, map, maplibregl, getBoundingBox }
Where el is the reference to the HTML element.
Where map is the reference to the MapLibre script instance.
Where maplibregl is the reference to the MapLibre library itself.
Where getBoundingBox is the method of creating bounds object from the array of coordinates to be used in https://maplibre.org/maplibre-gl-js-docs/api/map/#map#fitbound
loaded (scope: element)
builderius-maplibre-loaded (scope: window)
This event is getting fired just after the MapLibre script lifecycle even load https://maplibre.org/maplibre-gl-js-docs/api/map/#map.event:load is fired.
{ el, map, maplibregl, getBoundingBox }
Where el is the reference to the HTML element.
Where map is the reference to the MapLibre script instance.
Where maplibregl is the reference to the MapLibre library itself.
Where getBoundingBox is the method of creating bounds object from the array of coordinates to be used in https://maplibre.org/maplibre-gl-js-docs/api/map/#map#fitbounds
Methods
reInit
This method resets and initiates the component.