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": [23.8130, 90.4222]
},
"marker": [
{
"coords": [23.8130, 90.4222],
"icon": {
"iconUrl": "../../assets/svg/components/map-pin.svg",
"iconSize": [50, 45]
},
"popup": {
"text": "Jamuna future park!"
}
}
]
}'></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 | |
|
|
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 |