Created
December 5, 2015 18:29
-
-
Save basicavisual/46d1d9a94ca04a56f93d to your computer and use it in GitHub Desktop.
Mexico GeoJson demo
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> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Entidades mexicanas.</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<style type="text/css"> | |
body { | |
margin: 0; | |
background-color: #2B2B2B; | |
font-family: Helvetica, Arial, sans-serif; | |
} | |
#container { | |
width: 700px; | |
margin-left: auto; | |
margin-right: auto; | |
margin-top: 30px; | |
padding: 30px; | |
background-color: #2B2B2B; | |
/*box-shadow: 3px 3px 5px 6px #ccc; */ | |
} | |
/*body { | |
background-color: gray; | |
}*/ | |
svg { | |
background-color: #2B2B2B; | |
} | |
h2 { | |
font-size: 30px; | |
font-family: Georgia, serif; | |
color: white; | |
} | |
p { | |
font-size: 20px; | |
color: white; | |
margin: 15px 0 10px 0; | |
} | |
path { | |
stroke-width: 0.3; | |
stroke:#2B2B2B; | |
fill: #C9FF05; | |
} | |
path:hover { | |
fill: #07918A; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="container"> | |
<h2>Mapa de México por división politica.</h2> | |
<p>GeoJson demo.</p> | |
</div> | |
<script type="text/javascript"> | |
//set dimensions | |
var w = 700; | |
var h = 400; | |
//define projection | |
var projection = d3.geo.mercator() | |
.center([-100, 22]) | |
.translate([ w/1.7, h/1.7]) | |
.scale([ w/.7 ]); | |
//define path generator | |
var path = d3.geo.path() | |
.projection(projection) | |
//svg | |
var svg = d3.select("#container") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h); | |
//load GeoJson data | |
d3.json("mexico.json", function(json) { | |
// bind data | |
svg.selectAll("path") | |
.data(json.features) | |
.enter() | |
.append("path") | |
.attr("d", path); | |
}); | |
</script> | |
</body> | |
</html> |
Muchas gracias!!! @ponentesincausa por este gran aporte, has salvado mucho tiempo de trabajo.
Si alguien más viene por aquí dejare otros enlaces para finalidades diferentes, en mi caso esté fue la mejor búsqueda.Para diseñar un GeoJson
http://geojson.io/#map=3/38.41/-102.83GeoJson de los municipios de todas las entidades
https://gist.github.com/diegovalle/5129746Sin más, Saludos!!!
Ya no sirven los links, marca el error 404 😢
Podrian re subir los links
Podrian re subir los links
Dale un vistazo aca:
https://gist.github.com/ponentesincausa/46d1d9a94ca04a56f93d#file-mexico-json
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
X2, Excelente aporte!