How to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../node_modules/leaflet/dist/leaflet.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script href="../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
Methods
| 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 |