diff options
Diffstat (limited to 'map.js')
| -rw-r--r-- | map.js | 176 |
1 files changed, 176 insertions, 0 deletions
@@ -0,0 +1,176 @@ +var map = null; //global map object + +// base config +var attribOSM = '© <a href="//openstreetmap.org">OpenStreetMap</a>-bidragydere, <a href="//creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'; +var OSMLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: attribOSM } ); +var Box = L.latLngBounds( [[54.5, 8.0],[57.8, 15.3]] ); + +// GeoJSON feature styling and grouping +function returnFeatureMarker(feature, latlng) { + var hasPopup = (feature.properties.location && feature.properties.type); + return L.marker(latlng, { + title: feature.properties.title, + zIndexOffset: 1000*feature.properties.priority || 0, + clickable: hasPopup, + keyboard: hasPopup + }); +}; +function addFeaturePopup(feature, layer) { + if (feature.properties.location && feature.properties.title) { + layer.bindPopup('<strong>'+feature.properties.title+'</strong><br>'+feature.properties.location); + } +}; +var center = L.geoJson([],{ + pointToLayer: returnFeatureMarker, + onEachFeature: addFeaturePopup, + filter: function(feature, layer) { + return (feature.properties.type == "center"); + } +}); +var center_begin = L.geoJson([],{ + pointToLayer: returnFeatureMarker, + onEachFeature: addFeaturePopup, + filter: function(feature, layer) { + return (feature.properties.type == "center-begin"); + } +}); +var member = L.geoJson([],{ + pointToLayer: returnFeatureMarker, + onEachFeature: addFeaturePopup, + filter: function(feature, layer) { + return (feature.properties.type == "member"); + } +}); +var diploma = L.geoJson([],{ + pointToLayer: returnFeatureMarker, + onEachFeature: addFeaturePopup, + filter: function(feature, layer) { + return (feature.properties.type == "diploma"); + } +}); +var diploma_aspiring = L.geoJson([],{ + pointToLayer: returnFeatureMarker, + onEachFeature: addFeaturePopup, + filter: function(feature, layer) { + return (feature.properties.type == "diploma-aspiring"); + } +}); +var unknown = L.geoJson([],{ + pointToLayer: returnFeatureMarker, + onEachFeature: addFeaturePopup, + filter: function(feature, layer) { + return (feature.properties.type == null); + } +}); +var overlayMaps = { + "LAND Centre": center, + "LAND startere": center_begin, + "Medlemmer": member, + "Diplomholdere": diploma, + "Diplomaspiranter": diploma_aspiring, + "Øvrige": unknown +}; +function overlayCallback(data) { + center.addData(data).addTo(map); + center_begin.addData(data).addTo(map); + member.addData(data).addTo(map); + diploma.addData(data).addTo(map); + diploma_aspiring.addData(data).addTo(map); + unknown.addData(data); +}; + +// position popup +function round(n,d) { + return Math.round(Math.pow(10,d)*n)/Math.pow(10,d) +}; +function lngLatString(latLng) { + return round(latLng.lng,5) + ", " + round(latLng.lat,5) +}; +var popup = L.popup(); +function positionPopup(e) { + popup + .setLatLng(e.latlng) + .setContent("Position (long, lat):<br>" + lngLatString(e.latlng)) + .openOn(map); +} + +// http://mathiasbynens.be/notes/xhr-responsetype-json +var getJSON = function(url, successHandler, errorHandler) { + var xhr = typeof XMLHttpRequest != 'undefined' + ? new XMLHttpRequest() + : new ActiveXObject('Microsoft.XMLHTTP'); + var supportsJSON = (function() { + if (typeof XMLHttpRequest == 'undefined') { + return false; + } + xhr.open('get', '/', true); + try { + // some browsers throw when setting `responseType` to an unsupported value + xhr.responseType = 'json'; + } catch(error) { + return false; + } + return 'response' in xhr && xhr.responseType == 'json'; + }()); + xhr.open('get', url, true); + if (supportsJSON) { + xhr.responseType = 'json'; + } + xhr.onreadystatechange = function() { + var status; + var data; + // http://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate + if (xhr.readyState == 4) { // `DONE` + status = xhr.status; + if (status == 200) { + successHandler && successHandler( + supportsJSON + ? xhr.response + : JSON.parse(xhr.responseText) + ); + } else { + errorHandler && errorHandler(status); + } + } + }; + xhr.send(); +}; + +// create base map when DOM is ready, and then add features and controls +function initMap() { + map = L.map('content', { layers: [OSMLayer] }); + map.attributionControl.setPrefix(false); + map.fitBounds(Box); + + // micro-polyfill - http://mathiasbynens.be/notes/document-head + var head = document.head || document.getElementsByTagName('head')[0]; + + // load all rel=points links in html header as GeoJSON + var links = head.getElementsByTagName("link") + for (i=0;i< links.length;i++) { + if (links[i].rel == "points") { + getJSON(links[i].href, function (data) { + overlayCallback(data); + }); + } + }; + + L.control.layers([],overlayMaps).addTo(map); + L.control.scale({ imperial: false }).addTo(map); + + map.on('contextmenu', positionPopup); +}; +yepnope([ + { + test : window.JSON, +// https://code.google.com/p/json-sans-eval/ +// (json2: less secure; json3: larger - unneeded features) + nope : 'json-minified.js', + }, { + test: document.addEventListener, + nope: 'EventListener.js', + complete: function() { + document.addEventListener("DOMContentLoaded", initMap, false) + } + } +]); |