Thursday, July 23, 2015

leaflet Updated my previous Leaflet installation to the new “open-source JavaScript library for mobile-friendly interface map”.

Implementation consists of a Leaflet Template and a geo Partial file, you could ude a link in the Article/Post code - such as:

<div class="code"><a href="/leaflet/?@psn,14" title="view location on Leafletjs Map"><img src="/images/opengeo.png" alt="" /></a></div>

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, openstreetmap, leaflet, stamen" />
	<meta name="viewport" content="width=device-width" />
	<title>Leaflet Map</title>
	<link rel="alternate" type="application/atom+xml" href="../../atom.xml">
	<link rel="stylesheet" href="/leaflet.css" />
	<script src="/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 landscapeUrl = 'http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png',
		landscapeAttribution = 'Map data © <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, <a href="http://www.thunderforest.com">Gravitystorm</a> Landscape Map.',
		landscapeOptions = {attribution: landscapeAttribution};
	var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
		osmAttribution = '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
		osmOptions = {attribution: osmAttribution};

	var landscape = new L.TileLayer(landscapeUrl, landscapeOptions);
	var osm = new L.TileLayer(osmUrl, osmOptions);

	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: [landscape]
	});

	var baseMaps = {
		"Landscape": landscape,
		"Open Street Map": osm,
		"Watercolour": new L.StamenTileLayer("watercolor")
	};

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

	map.addControl(layersControl);

	var LeafIcon = L.Icon.extend({
	options: {
			shadowUrl: '/images/pinsh.png',
			iconAnchor: [5, 21],
			shadowAnchor: [1, 22],
			popupAnchor: [0, -25]
	}
	});

	var redIcon = new LeafIcon({iconUrl: '/images/red.png'}),
		greenIcon = new LeafIcon({iconUrl: '/images/green.png'}),
		blueIcon = new LeafIcon({iconUrl: '/images/blue.png'}),
		yellowIcon = new LeafIcon({iconUrl: '/images/yellow.png'});

	:[remove]geoleaf

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

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

Remove all these * as they are there to stop the code working here, and hence hiding itself!

for*each $root do
	i*f $children do
		for*each $children do
			i*f @psn do
				var marker@id = new L.Marker([@psn], {icon: redIcon}).addTo(map).bindPopup("<h2><a href='../@url'>@title</a><br /><img src='/@th' style='width:95px;height:95px' /></h2><h3><a href='/leaflet/?@psn,15'>zoom</a></h3>");
			endif
		endforeach
	endif
endforeach

 

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