Maps

Simplified customizable maps embeds with a single HTML file

Installation
Leaflet providers
Markers from URL
JSON markers

Maps is a standalone page to embed based on Leaflet.js.

Installation

Just embed map.html through an iframe HTML tag.

<iframe src="../../templates/map.html" class="c-pos m-absolute m-top-left c-dim m-w-100 m-h-100 u-b-none">

Leaflet providers

Among multiple providers, here are the available free tiles layers for Leaflet

It is possible to change the tiles layers through URL GET map_layer parameter, available values are:

CartoDB_Voyager
OpenStreetMap_Mapnik
Stamen_TonerLite
Stamen_Terrain

<iframe src="../../templates/map.html?map_layer=OpenStreetMap_France" class="c-pos m-absolute m-top-left c-dim m-w-100 m-h-100 u-b-none">

<iframe src="../../templates/map.html?map_layer=CartoDB_Voyager" class="c-pos m-absolute m-top-left c-dim m-w-100 m-h-100 u-b-none">

<iframe src="../../templates/map.html?map_layer=OpenStreetMap_Mapnik" class="c-pos m-absolute m-top-left c-dim m-w-100 m-h-100 u-b-none">

<iframe src="../../templates/map.html?map_layer=Stamen_TonerLite" class="c-pos m-absolute m-top-left c-dim m-w-100 m-h-100 u-b-none">

<iframe src="../../templates/map.html?map_layer=Stamen_Terrain" class="c-pos m-absolute m-top-left c-dim m-w-100 m-h-100 u-b-none">

Markers from URL

It is possible to add multiple markers through URL GET parameters.

Multiple GET parameters	Description
`lat`	Mandatory Latitude
`lng`	Mandatory Longitude
`content`	Optional Text or HTML content

The following example add 2 markers with the GET parameters:

?lat=48.767003&lng=5.175208&content=GOA Bar Le Duc<br>Rue Bradfer<br>55000 BAR-LE-DUC&lat=45.888324&lng=6.105857&content=GOA Annecy

Map automatically fits zoom to markers bounds.

<iframe src="../../templates/map.html?lat=48.767003&lng=5.175208&content=GOA Bar Le Duc<br>Rue Bradfer<br>55000 BAR-LE-DUC&lat=45.888324&lng=6.105857&content=GOA Annecy" class="c-pos m-absolute m-top-left c-dim m-w-100 m-h-100 u-b-none"></iframe>

JSON markers

Adding multiple markers at once from a JSON file.

GET parameter	Description
`map_markers_json`	URL of the JSON. Can be either relative or absolute

<iframe src="../../templates/map.html?map_markers_json=https://itautomotive-dev.github.io/goafe-ui/js/stores.json" class="c-pos m-absolute m-top-left c-dim m-w-100 m-h-100 u-b-none"></iframe>