Leaflet (Map)
Mobile-friendly interactive map library.
Official documentation
For more detailed information and examples, see the official documentation: Leaflet .
How to use?
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/leaflet/dist/leaflet.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/leaflet/dist/leaflet.js"></script>
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/js/hs.leaflet.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of leaflet
$('#map').each(function () {
var leaflet = $.HSCore.components.HSLeaflet.init($(this)[0]);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
id: 'mapbox/light-v9'
}).addTo(leaflet);
});
});
</script>
Basic example
<div id="map" class="min-h-450rem rounded"
data-hs-leaflet-options='{
"map": {
"scrollWheelZoom": false,
"coords": [37.4040344, -122.0289704]
},
"marker": [
{
"coords": [37.4040344, -122.0289704],
"icon": {
"iconUrl": "../../assets/svg/components/map-pin.svg",
"iconSize": [50, 45]
},
"popup": {
"text": "Test text!"
}
}
]
}'></div>
Extend
Plugin methods are called using a wrapper:
<script>
$(document).on('ready', function () {
// initialization of password strength
$('.js-leaflet').each(function () {
var leaflet = $.HSCore.components.HSLeaflet.init($(this)[0]);
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-leaflet-options='{
...
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-leaflet-options='{}'. For more detailed or missing attributes/functions, see the official Leaflet documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
Basic map settings |
map: {
coords: [51.505, -0.09],
zoom: 13
},
|
|
|
Settings for map layers, settings are taken from the tile server. More information about the layer options can be found here: https://leafletjs.com/reference-1.6.0.html#tilelayer |
layer: {
token: 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
id: 'mapbox/streets-v11',
maxZoom: 18
},
|
|
|
Array with options for pins | null |
|
|
Coordinates according to which the pin will be added | null |
|
|
Object with options for pin icon. More information about the options for the icons can be found here: https://leafletjs.com/reference-1.6.0.html#icon | null |
|
|
Object with options for popup pin. More information about the popup options can be found here: https://leafletjs.com/reference-1.6.0.html#popup | null |