Embed Maps

valgrid

Hello,

just few days ago i was researching how to embed maps in a website. And it turns out that with OpenLayers and Leaflet it is pretty easy to do so.

And i think it would be a valuable extension for geocaching, photograph, and similar communities as well as organising events when talking about venues.

But i have no idea how to write an extension, even more to make it secure.

For Leaflet the process is the following:

Add the CSS and js file from web or local:

   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
   <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>

Add a div for the map :

   <div id="map"></div>

Then within the div you define your zoom level and map center:

  var map = L.map('map').setView([51.505, -0.09], 13);

And then you define the tiles (e.g. Mapbox):

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
      maxZoom: 18,
      id: 'your.mapbox.project.id',
      accessToken: 'your.mapbox.public.access.token'
  }).addTo(map);

And after that you can set markers:

L.marker([51.08209, 7.90549]).addTo(map)
				.bindPopup("<b>Example Text</b><br />Something more").openPopup();

The syntax exposed to the enduser could be:

 !mapmarker[markertext](51.08209, 7.90549)
 [mapmarker=51.08209, 7.90549]markertext[/map]

There are many more features related to maps, but for the beginning simple markers should be sufficient.