Map (Leaflet)

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.

License: Free, public contributors.
https://github.com/Leaflet/Leaflet

Leaflet Single Marker

                
                  <div class="rounded" style="height:500px;" 
                    data-leaflet='{
                      "map_tile": "voyager",
                      "map_zoom": "7",
                      "map_marker": [
                        { 
                        "map_lat": 40.750765,
                        "map_long": -73.993428,
                        "map_popup": "<b>Company Inc.</b> <br> Road 741, No.44,<br> New York / United States <br> <a href=`tel:015555555`>(01)-555-5555</a>"
                        }
                      ]
                    }'><!-- map container --></div>

                
                  <!-- Vendor : Leaflet -->
                  <link rel="stylesheet" href="../assets/vendors/leaflet/dist/leaflet.css">

                
                  <!-- Vendor : Leaflet -->
                  <script src="../assets/vendors/leaflet/dist/leaflet.js"></script>
                  <script src="../assets/vendors/vendor.leaflet.min.js"></script>

Leaflet Multi Markers

Preview
HTML

                
                  <div class="w-100 rounded" style="height:500px;" 
                    data-leaflet='{
                      "map_tile": "voyager",
                      "map_zoom": "9",
                      "map_marker": [
                        { 
                          "map_lat": 40.750765,
                          "map_long": -73.993428,
                          "map_popup": "<b>Company 1 Inc.</b> <br> Road 741, No.44,<br> New York / United States <br> <a href=`tel:015555555`>(01)-555-5555</a>"
                        },
                        { 
                          "map_lat": 40.750765,
                          "map_long": -73.093428,
                          "map_popup": "Company 2 Inc."
                        }
                      ]
                    }'><!-- map container --></div>

Leaflet Tiles

Preview
HTML

Default

Voyager

Gray

Carto

Hot

World Street

                
                  <!-- Default -->
                  "map_tile": ""

                  <!-- Voyager -->
                  "map_tile": "voyager"

                  <!-- Gray -->
                  "map_tile": "gray"

                  <!-- Carto -->
                  "map_tile": "carto"

                  <!-- Hot -->
                  "map_tile": "hot"

                  <!-- World Street -->
                  "map_tile": "wstreet"