Skip to content

Instantly share code, notes, and snippets.

@basicavisual
Created December 5, 2015 18:29
Show Gist options
  • Save basicavisual/46d1d9a94ca04a56f93d to your computer and use it in GitHub Desktop.
Save basicavisual/46d1d9a94ca04a56f93d to your computer and use it in GitHub Desktop.
Mexico GeoJson demo
<!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>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@LuisFabian
Copy link

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.83

GeoJson de los municipios de todas las entidades
https://gist.github.com/diegovalle/5129746

Sin más, Saludos!!!

@ozkar2c
Copy link

ozkar2c commented Jan 22, 2018

si quiero pintar los estados de dos colores o mas, separando los estados en distintos archivos que tendría que hacer?, llevo rato intentando pero nada :(

@eduardosi25
Copy link

ya no esta vivo el link =( https://gist.github.com/diegovalle/5129746

@Xsaleon
Copy link

Xsaleon commented Apr 29, 2020

si quiero pintar los estados de dos colores o mas, separando los estados en distintos archivos que tendría que hacer?, llevo rato intentando pero nada :(

Puedes fragmentar por medio de filtros en diversas capas todo el GeoJSON

@Xsaleon
Copy link

Xsaleon commented Apr 29, 2020

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.83

GeoJson de los municipios de todas las entidades
https://gist.github.com/diegovalle/5129746

Sin más, Saludos!!!

X2, Excelente aporte!

@alonsogalcantara
Copy link

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.83

GeoJson de los municipios de todas las entidades
https://gist.github.com/diegovalle/5129746

Sin más, Saludos!!!

Ya no sirven los links, marca el error 404 😢

@RQI2019
Copy link

RQI2019 commented Dec 28, 2020

Podrian re subir los links

@Xsaleon
Copy link

Xsaleon commented Dec 28, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment