- google "kenya county .shp"
- download zip file
- Vereinfachung der shapefile, wenn zu gross oder zu detailiert --> mapshaper.com
- Vom shapefile zum geojson/topojson --> mapstarter.com
- Anpassung nach eigenen Wünschen
- Download .html und topojson
Last active
April 20, 2018 14:18
-
-
Save baderone/d414db9893fc2de839e8 to your computer and use it in GitHub Desktop.
Kursbeispiel - Kenya County Map Test - WEBMAP 2016
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 12px sans-serif; | |
| } | |
| path { | |
| stroke-width: 1px; | |
| stroke: white; | |
| fill: steelblue; | |
| cursor: pointer; | |
| } | |
| path:hover, path.highlighted { | |
| fill: #70bad6; | |
| } | |
| div.tooltip { | |
| position: absolute; | |
| background-color: white; | |
| border: 1px solid black; | |
| color: black; | |
| font-weight: bold; | |
| padding: 4px 8px; | |
| display: none; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| //Map dimensions (in pixels) | |
| var width = 473, | |
| height = 600; | |
| //Map projection | |
| var projection = d3.geo.mercator() | |
| .scale(3218.751073937429) | |
| .center([37.90903854349415,0.365617420613853]) //projection center | |
| .translate([width/2,height/2]) //translate to center the map in view | |
| //Generate paths based on projection | |
| var path = d3.geo.path() | |
| .projection(projection); | |
| //Create an SVG | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| //Group for the map features | |
| var features = svg.append("g") | |
| .attr("class","features"); | |
| //Create zoom/pan listener | |
| //Change [1,Infinity] to adjust the min/max zoom scale | |
| var zoom = d3.behavior.zoom() | |
| .scaleExtent([1, Infinity]) | |
| .on("zoom",zoomed); | |
| svg.call(zoom); | |
| //Create a tooltip, hidden at the start | |
| var tooltip = d3.select("body").append("div").attr("class","tooltip"); | |
| d3.json("County.topojson",function(error,geodata) { | |
| if (error) return console.log(error); //unknown error, check the console | |
| //Create a path for each map feature in the data | |
| features.selectAll("path") | |
| .data(topojson.feature(geodata,geodata.objects.collection).features) //generate features from TopoJSON | |
| .enter() | |
| .append("path") | |
| .attr("d",path) | |
| .on("mouseover",showTooltip) | |
| .on("mousemove",moveTooltip) | |
| .on("mouseout",hideTooltip) | |
| .on("click",clicked); | |
| }); | |
| // Add optional onClick events for features here | |
| // d.properties contains the attributes (e.g. d.properties.name, d.properties.population) | |
| function clicked(d,i) { | |
| } | |
| //Update map on zoom/pan | |
| function zoomed() { | |
| features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")") | |
| .selectAll("path").style("stroke-width", 1 / zoom.scale() + "px" ); | |
| } | |
| //Position of the tooltip relative to the cursor | |
| var tooltipOffset = {x: 5, y: -25}; | |
| //Create a tooltip, hidden at the start | |
| function showTooltip(d) { | |
| moveTooltip(); | |
| tooltip.style("display","block") | |
| .text(d.properties.COUNTY); | |
| } | |
| //Move the tooltip to track the mouse | |
| function moveTooltip() { | |
| tooltip.style("top",(d3.event.pageY+tooltipOffset.y)+"px") | |
| .style("left",(d3.event.pageX+tooltipOffset.x)+"px"); | |
| } | |
| //Create a tooltip, hidden at the start | |
| function hideTooltip() { | |
| tooltip.style("display","none"); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment