OpenStreetMap: is a map of the world, created by people like you and free to use under an open license.
https://www.openstreetmap.org/about
Leaflet: JavaScript library for mobile-friendly interactive maps
https://github.com/Leaflet/Leaflet
License: Free, public contributors.
You can get map coordinates from Google Map or any other map software.
Note: Leflet javascript is 141Kb minified. Basically, is larger than entire Smarty core, including SOW plugins.
141Kb is not really much but because is not frequently used (mostly on contact pages), there is no reason to load it all the time. We load it via attributes, only when maps are needed.
/*
:: Vendor Path
node_modules/leaflet/
:: Installed
npm install leaflet
:: SOW Controller Init
*/ $.SOW.vendor.leaflet.init('.map-leaflet')
<!--
Available Classes
.map-grayscale
.h--500 = 500px height. See Utilities -> Width / Height for more
* please note how phone uses the quotes
because using " or ' will invalidate the json
The same can be used for class=`...` and href=`...`
Predefined Tiles:
data-map-tile="gray"
data-map-tile="carto"
data-map-tile="voyager"
data-map-tile="hot"
data-map-tile="" (default)
Custom Tile:
data-map-tile-custom="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
Free tiles: https://leaflet-extras.github.io/leaflet-providers/preview/
Copy L.tileLayer and paste here to use (the string only, ending in .png).
-->
<div class="map-leaflet h--500 w-100 rounded"
data-map-tile="voyager"
data-map-zoom="7"
data-map-json='[
{
"map_lat": 40.750765,
"map_long": -73.993428,
"map_popup": "<b>Smarty Inc.</b> <br> Road 741, No.44,<br> New York / United States <br> <a href=`tel:015555555`>(01)-555-5555</a>"
}
]'
><!-- map container--></div>
<!--
Available Classes
.map-grayscale
.h--500 = 500px height. See Utilities -> Width / Height for more
* please note how phone uses the quotes
because using " or ' will invalidate the json
The same can be used for class=`...` and href=`...`
You can add multiple markers separated by comma.
Please note: the format is very important!
Including commas, must be exactly the same!
If no map_popup is needed, leave it empty.
"map_popup": ""
Predefined Tiles:
data-map-tile="gray"
data-map-tile="carto"
data-map-tile="voyager"
data-map-tile="hot"
data-map-tile="" (default)
Custom Tile:
data-map-tile-custom="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
Free tiles: https://leaflet-extras.github.io/leaflet-providers/preview/
Copy L.tileLayer and paste here to use (the string only, ending in .png).
-->
<div class="map-leaflet h--500 w-100 rounded"
data-map-zoom="9"
data-map-json='[
{
"map_lat": 40.750765,
"map_long": -73.993428,
"map_popup": "<b>Smarty 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": "Smarty Inc2."
}
]'
><!-- map container--></div>