Monday, June 10, 2019

An update to my yellow Datenstrom Yellow map due to the v 0.8 upgrade.

---
Published: 2008-09-26
Layout: blog
psn: 54.029582,-2.113986
---

Blog Layout

I use our Geotagicon to signify the link to the map somewhere within the article, which is diplayed using the following code:

<p><?php if($this->yellow->page->isExisting("psn")): ?><a href="/map/?<?php echo $this->yellow->page->getHtml("psn") ?>,16" title="position on map"><img src="/media/images/geotag.png" alt="geotag" /></a><?php endif ?></p>

Blogpages Layout

<p><?php if($page->isExisting("psn")): ?><a href="/map/?<?php echo $page->getHtml("psn") ?>,16" title="position on map"><img src="/media/images/geotag.png" alt="geotag" /></a><?php endif ?></p>

Leaflet Map Template

The code contains the option of the location to be displayed through the url location.search.substring, or if no specific link, the map to be displayed at a default zoom setting. Also, there is a onMapClick function to show the position of a click on the map.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" media="all" href="/leaflet.css" />
<script src="/leaflet.js"></script>
<?php echo $yellow->page->getExtra("header") ?>
<title>Example Domain - map</title>
</head>
<body>
<div id="map"></div>
<script>
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
	osmAttribution = '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
	osmOptions = {attribution: osmAttribution};

var outdoorsUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=YOUR ACCESS TOKEN',
    outdoorsAttribution = 'Map data © <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>',
    outdoorsMaxZoom = 18,
    outdoorsId = 'mapbox.outdoors',
    outdoorsAccessToken = 'YOUR ACCESS TOKEN'
    outdoorsOptions = {attribution: outdoorsAttribution, MaxZoom: outdoorsMaxZoom, id: outdoorsId, accessToken: outdoorsAccessToken};

var osm = new L.TileLayer(osmUrl, osmOptions),
    outdoors = new L.TileLayer(outdoorsUrl, outdoorsOptions);

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]);
    var vars = url.vars
}
else {
    var lat = 55;
	var lng = -4;
	var zmn = 7
}

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

var baseLayers = {
    "Open Street Map": osm,
    "Outdoors": outdoors
};

L.control.layers(baseLayers).addTo(mymap);

<?php $pages = $this->yellow->content->index(true, true) ?>
<?php foreach($pages as $page): ?>
	<?php if($page->isExisting("psn")): ?>
		var leafIcon = L.icon({
			iconUrl: '/images/marker-icon.png',
			shadowUrl: '/images/marker-shadow.png',
			iconAnchor:   [12,40],
			shadowAnchor: [10,39],
			popupAnchor:  [2,-42]
		});
		var marker = new L.Marker([ <?php echo $page->getHtml("psn") ?> ], {icon: leafIcon}).addTo(map).bindPopup("<a href='<?php echo $page->getLocation(true) ?>'><?php echo $page->getDateHtml("Published") ?></a>");
	<?php endif ?>
<?php endforeach ?>

function onMapClick(e) {
	var latlngStr = '(' + e.latlng.lat.toFixed(3) + ', ' + e.latlng.lng.toFixed(3) + ')';
	document.getElementById('message').innerHTML = e.latlng;
	displayMessage(latlngStr);
}
mymap.on('click', onMapClick);
</script>

<div id="message" style="position:absolute; bottom: 5px; left: 5px; z-index: 999">Click = point</div>
</body>
</html>