Skip to content

Instantly share code, notes, and snippets.

@john-guerra
Last active September 22, 2022 15:47
Embed
What would you like to do?
GeoJson map of Colombia Municipios
license: mit
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.tract {
fill: #eee;
}
.tract:hover {
fill: orange;
}
.tract-border {
fill: none;
stroke: #777;
pointer-events: none;
}
.tract-border-state {
fill: none;
stroke: #333;
stroke-width: 1.5px;
pointer-events: none;
}
</style>
<svg width="960" height="550"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
margin = { top: 20, bottom:20, right: 20, left: 20};
d3.json("colombia-municipios.json", function(error, data) {
if (error) throw error;
var land = topojson.feature(data, {
type: "GeometryCollection",
geometries: data.objects.mpios.geometries.filter(function(d) {
return (d.id / 10000 | 0) % 100 !== 99;
})
});
var landState = topojson.feature(data, {
type: "GeometryCollection",
geometries: data.objects.depts.geometries.filter(function(d) {
return (d.id / 10000 | 0) % 100 !== 99;
})
});
// EPSG:32111
var path = d3.geoPath()
.projection(d3.geoTransverseMercator()
.rotate([74 + 30 / 60, -38 - 50 / 60])
.fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], land));
var pathState = d3.geoPath()
.projection(d3.geoTransverseMercator()
.rotate([74 + 30 / 60, -38 - 50 / 60])
.fitExtent([[margin.left, margin.top], [width-margin.right, height-margin.bottom]], landState));
svg.selectAll("path")
.data(land.features)
.enter().append("path")
.attr("class", "tract")
.attr("d", path)
.append("title")
.text(function(d) { return d.properties.name; });
svg.append("path")
.datum(topojson.mesh(data, data.objects.mpios, function(a, b) { return a !== b; }))
.attr("class", "tract-border")
.attr("d", path);
svg.append("path")
.datum(topojson.mesh(data, data.objects.depts, function(a, b) { return a !== b; }))
.attr("class", "tract-border-state")
.attr("d", pathState);
});
</script>
@diegoug
Copy link

diegoug commented May 19, 2020

Hola, he intentado centrar el mapa en openlayers y no he podido, de eco parece que no tuviera las dimensiones correctas, sabes o tienes alguna idea de que podría hacer para ajustarlo? gracias.

@john-guerra
Copy link
Author

No ni idea. De pronto si compartes algún código que permita reproducir el error lo pueda mirar

@A4lfr32
Copy link

A4lfr32 commented Jul 28, 2020

El mapa no está centrado aparece en america de norte

@A4lfr32
Copy link

A4lfr32 commented Jul 28, 2020

image
Intenté centrar pero no cuadra la figura

@john-guerra
Copy link
Author

john-guerra commented Jul 28, 2020 via email

@A4lfr32
Copy link

A4lfr32 commented Jul 30, 2020

Hola, gracias por tu aporte.
Estube buscando en la base de datos del DANE, y logré obtener el geojson:
https://gist.github.com/A4lfr32/6005403aa6a2e1ddb51ef53860939f23

image

@demarchenac-nativapps
Copy link

Hola! Una duda, el GEOJson que lograste armar ¿Lo armaste con las features y properties correspondientes?
Es decir, codigo de municipio, nombre de municipio, etc.

@john-guerra
Copy link
Author

john-guerra commented Nov 12, 2020 via email

@rubenbolivarr
Copy link

Disuclpa tu sabes como puedo ponerele un dato aun municipio es decir si me paro en uribia que me aparezca algo indicando el dato que yo desee un numero por ejemplo
?

@LCPallares
Copy link

en geojson.io da la opción de poner datos

@john-guerra
Copy link
Author

Acá hay un observable notebook de donde pueden bajar los TopoJSON y GeoJSON de Colombia con algunas variables poblacionales

https://observablehq.com/@john-guerra/topojson-colombia

@Yamidb18
Copy link

Yamidb18 commented Dec 2, 2021

Hola, al seleccionar algunos municipios aparecen varios. Por ejemplo San Miguel Putumayo, aparece también otro municipio en el mapa y no desaparece con el codigo DANE.

@loorlab
Copy link

loorlab commented Apr 6, 2022

Acá hay un observable notebook de donde pueden bajar los TopoJSON y GeoJSON de Colombia con algunas variables poblacionales

https://observablehq.com/@john-guerra/topojson-colombia

Muchas gracias, con este .geojson y la integración de Google Mutant https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant funciona mejor el sombreado de las regiones. 💥

@john-guerra
Copy link
Author

Actualicé el topoJSON por si les interesa https://observablehq.com/@john-guerra/topojson-colombia

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