Harita verisi : http://www.turkeyshapefile.com
SHP to TopoJSON dönüştürücü : http://www.mapshaper.org
Harita verisi : http://www.turkeyshapefile.com
SHP to TopoJSON dönüştürücü : http://www.mapshaper.org
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| text { | |
| font-family: helvetica, arial, sans-serif; | |
| font-size: 10px; | |
| text-anchor: middle; | |
| color: #111; | |
| } | |
| </style> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg") | |
| var sw = +svg.attr("width") | |
| var sh = +svg.attr("height") | |
| var projection = d3.geo.mercator() | |
| .scale(2800) | |
| .center([35.243,39.026]) | |
| .translate([sw/2,sh/2]) | |
| var path = d3.geo.path() | |
| .projection(projection) | |
| d3.json("turkiye.json", function(error, turkiye) { | |
| if (error) return console.error(error) | |
| iller = topojson.feature(turkiye, turkiye.objects.il) | |
| svg.append("path") | |
| .datum(iller) | |
| .attr("d", path) | |
| .style("stroke", "#111") | |
| .style("stroke-width", "4px") | |
| .style("stroke-linejoin", "round") | |
| svg.selectAll(".il") | |
| .data(iller.features) | |
| .enter() | |
| .append("path") | |
| .attr("fill", function(d) {return d3.hsl(198+Math.random()*4, 0.7+Math.random()*0.2, 0.4+Math.random()*0.2)}) | |
| .attr("d", path) | |
| svg.append("path") | |
| .datum(topojson.mesh(turkiye, turkiye.objects.il, function(a, b) { return a !== b })) | |
| .attr("d", path) | |
| .attr("fill", "none") | |
| .style("stroke", "#FFF") | |
| .style("stroke-width", "2px") | |
| .style("stroke-linejoin", "round") | |
| svg.selectAll("text") | |
| .data(iller.features) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { return d.properties.ad }) | |
| .attr("transform", function(d) { return "translate("+ path.centroid(d).toString() +")" }) | |
| }) | |
| </script> |