Leaflet (Map)

Mobile-friendly interactive map library.

Leaflet documentation

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

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

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

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>
Copy

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>
Copy

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/leaflet/

JavaScript behavior

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>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-leaflet-options='{
  ...
}' - array
Copy

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

map

 Basic map settings map: { coords: [51.505, -0.09], zoom: 13 },

layer

 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 },

marker

 Array with options for pins null

marker.coords

 Coordinates according to which the pin will be added null

marker.icon

 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

marker.popup

 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