David Hall

Friday, April 6, 2012

Leaflet is “a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps” and here I show how my Stacey method of linking articles to a map works with Leaflet (refer to the previous posts for the Stacey end of things).

Implementation consists of a Leaflet Template and a geo Partial file, with a link in the Article/Post code - my link looks like:

&lt;a href="/leaflet/?@psn,14" title="view location on Leaflet OpenStreetMap"&gt;&lt;img src="/images/opengeo.png" alt="" /&gt;&lt;/a&gt;

Template - leaflet.html

Remember to delete [remove] from the code - it’s there to stop Stacey doing it’s stuff even when written as code.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="keywords" content="map, cloudmade, leaflet, stamen" />
	<meta name="viewport" content="width=device-width" />
	<title>Leaflet Map</title>
	<link rel="alternate" type="application/atom+xml" href="@root_path/atom.xml">
	<link rel="stylesheet" href="/mapleaflet.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="/mapleaflet.ie.css" /><![endif]-->
	<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
	<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js"></script>
</head>
<body>

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

<script>
	var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/806690c0683a59ff9f57a5f5333ab86d/{styleId}/256/{z}/{x}/{y}.png',
		cloudmadeAttribution = '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 &copy; <a href="http://cloudmade.com">CloudMade</a>',
		cloudmadeOptions = {maxZoom: 18, attribution: cloudmadeAttribution};

	var cloudmade = new L.TileLayer(cloudmadeUrl, cloudmadeOptions, {styleId: 1}),
		fineline = new L.TileLayer(cloudmadeUrl, cloudmadeOptions, {styleId: 2});

	if (location.search.substring(1)) {
		var qs = location.search.substring(1);
		var url = qs.split(',',3);
		var lat = parseFloat(url[0]);
		var lng = parseFloat(url[1]);
		var zmn = parseFloat(url[2]);
	}
	else {
	    var lat = 42.94033923363181;
		var lng = -2.8125;
		var zmn = 4;
	}

	var map = new L.Map('map', {
		center: new L.LatLng(lat,lng),
		zoom: zmn,
		layers: [cloudmade]
	});

	var baseMaps = {
			"Cloudmade": cloudmade,
			"Fine Line": fineline,
			"Watercolour": new L.StamenTileLayer("watercolor"),
			"Terrain USA": new L.StamenTileLayer("terrain")
		};

	layersControl = new L.Control.Layers(baseMaps);

	map.addControl(layersControl);

	var dotIcon = L.Icon.extend({
				iconUrl: '/images/blue.png',
				shadowUrl: '/images/shadow.png',
				iconSize: new L.Point(12, 20),
				shadowSize: new L.Point(22, 20),
				iconAnchor: new L.Point(0, 0),
				popupAnchor: new L.Point(7, 0)
	});

	var blueIcon = new dotIcon(),
		greenIcon = new dotIcon('/images/green.png'),
		redIcon = new dotIcon('/images/red.png'),
		yellowIcon = new dotIcon('/images/yellow.png');

		:[remove]geoleaf


			map.on('click', onMapClick);

			function onMapClick(e) {
				var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
				document.getElementById('message').innerHTML = e.latlng;
				displayMessage(latlngStr);
			}

	</script>

	<a href="/"><img src="/images/logos.png" alt="home" title="home" style="border:0; position: absolute; top: 0; left: 45px;" /></a>
	<div id="message" style="position:absolute; top: 32px; left: 50px;">Click = point</div>

</body>
</html>

Partial - geoleaf.html

foreach $root do
if $children do
foreach $children do
if @psn do
var markerLocation = new L.LatLng(@psn);
var marker@id = new L.Marker(markerLocation, {
	title: "@title",
	icon: blueIcon
});
map.addLayer(marker@id);
marker@id.bindPopup("<h2><a href='../@url'>@title</a><br /><img src='@th' style='width:95px;height:95px' /></h2><h3><a href='/leaflet/?@psn,17'>zoom</a></h3>");
endif
endforeach
endif
endforeach

There is a zoom function in the popup window, but you can pass whatever you like through.