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

SCSS

SCSS-files of the component can be found here assets/scss/vodi/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>
              
            

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

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