milkbread/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Visualize linear overlaps using TopoJSON

This is a simple example on how we can use TopoJSON to indicate the overlap of linestrings!
Therefore, I made a simple shapefile with 3 linestrings that overlap to 100%!
And this is a prerequisite of your dataset, too!
You can find the compressed file 'shapes.rar' within this Gist...
Decompress the file and make a TopoJSON of it:
topojson -p -o linestrings_topo.json linestrings.shp
(Haven't installed topojson? It is pretty easy...on Ubuntu)
Short 'codesprint':


set a new html-file with a leaflet map


open the TopoJSON-file


do for each arc:


get the members


set the popup text


set color


get feature of the arc


make and add a new polyline to the leaflet map (set color and popup)


add all polylines to the layer control (especially this is not good coded!)


That's it...pretty simple, I think! Finally...sorry, it is very hard coded!
This example is based on a previous tutorial: D3-Geodata-Basics

  
## index.html
<!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>

## index.html~
fill in

## linestrings_topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              linestrings_topo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## shapes.rar

      
    Raw
  

              shapes.rar
            
          
            View raw
	<!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>