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.

                  $(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'

Basic example

                      <div id="map" class="min-h-450rem rounded"
                             "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!"

JavaScript behavior


Plugin methods are called using a wrapper:

                  $(document).on('ready', function () {
                    // initialization of password strength
                    $('.js-leaflet').each(function () {
                      var leaflet = $.HSCore.components.HSLeaflet.init($(this)[0]);


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

              }' - array


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

Developed by Nasim Mahmud's team | Blueberry Framework · Powered by Nimusoft

© Blueberry. 2020 Nimusoft. All rights reserved.