Components

Openstreet Map

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

Single Marker


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

Multiple Markers


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