|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Testmap</title> |
|
<meta charset="utf-8" /> |
|
<script src="http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.js"></script> |
|
<script src="http://d3js.org/topojson.v1.min.js"></script> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://bl.ocks.org/milkbread/raw/5779939/RKMapping_0.4.4.js"></script> <!--http://bl.ocks.org/milkbread/raw/5779939--> |
|
<script src="http://bl.ocks.org/milkbread/raw/5829814/RKAggregation_1.0.js"></script> <!--http://bl.ocks.org/milkbread/raw/5829814 this function needs RKMapping.js additionally--> |
|
<style> |
|
@import url(http://cdn.leafletjs.com/leaflet-0.6.1/leaflet.css); |
|
</style> |
|
</head> |
|
<body> |
|
<div id="map" style="width: 960px; height: 600px"></div> |
|
<script> |
|
//BASEMAP |
|
var map = L.map('map').setView([51.5,11], 6); |
|
var toolserver = L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png'); |
|
var stamen = L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {attribution: 'Add some attributes here!'}).addTo(map); |
|
var baseLayers = {"stamen": stamen, "toolserver-mapnik":toolserver}; |
|
var overlays = {}; |
|
|
|
//OPEN TOPOJSON-FILE |
|
d3.json("linestrings_topo.json", function(error, topology) { |
|
|
|
//console.log(topology) |
|
//READ ALL EXISTING ARCS |
|
topology.arcs.map(function(arc,i){ |
|
//GET THE MEMBERS OF CURRENT ARC |
|
var members = getMembers(i); |
|
var popupContent = 'Hey, hey ... I belong to: <br>'; |
|
//ADD ALL MEMBERS TO THE 'POPUPCONTENT' |
|
members.forEach(function(member){popupContent = popupContent + "<b>" + member.name + "<br>"}) |
|
//GET THE Feature OF THE ARC |
|
var arcFeature = topojson.feature(topology, {type: 'LineString', arcs:[i], members:members}); |
|
//console.log(i) |
|
//D'OH...CHANGE THE COORDINATES TO FIT FOR LEAFLET-POLYLINE |
|
arcFeature.geometry.coordinates = arcFeature.geometry.coordinates.map(function(d){return [d[1],d[0]]}) |
|
//MAKE A POLYLINE USING THE ARCFEATURE |
|
for (var j=0;j<members.length;j++){ |
|
console.log(j) |
|
//DEFINE THE COLOR...NEEDS A MORE COMPLICATED SOLUTION FOR COMPLETELY AUTOMATIC ATTRIBUTION |
|
switch (j){ |
|
case 0: color='#f00'; weight=5; |
|
break; |
|
case 1: color='#00f'; weight=3.5; |
|
break; |
|
case 2: color='#0f0'; weight=2; |
|
break; |
|
} |
|
var polyline = L.polyline(arcFeature.geometry.coordinates, {color: color, weight: weight, opacity:1}) |
|
.bindPopup(popupContent) |
|
.addTo(map); |
|
//console.log(polyline) |
|
overlays["Polyline"+i+"_"+j] = polyline; |
|
|
|
} |
|
|
|
}) |
|
function getMembers(arc_id){ |
|
var members = []; |
|
//CHECK FOR EXISTENCE OF ARC WITHIN EACH LINESTRING ... !!!VERYHARD CODED!!! |
|
topology.objects.linestrings.geometries.forEach(function(feature){ |
|
//console.log(feature.arcs) |
|
//console.log('indexof: '+feature.arcs.indexOf(arc_id)) |
|
if(feature.arcs.indexOf(arc_id)!=-1)members.push(feature.properties) |
|
}) |
|
//console.log('members',members) |
|
return members; |
|
} |
|
|
|
//ADD THE LINESTRINGS TO THE LAYER-CONTROL |
|
L.control.layers(baseLayers,overlays).addTo(map); |
|
}) |
|
|
|
|
|
</script> |
|
</body> |
|
</html> |
