Skip to content

Instantly share code, notes, and snippets.

@john-guerra

john-guerra/.block

Last active Jan 28, 2021
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

This comment has been minimized.

Copy link

@diegoug 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

This comment has been minimized.

Copy link
Owner Author

@john-guerra john-guerra commented May 19, 2020

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

@A4lfr32

This comment has been minimized.

Copy link

@A4lfr32 A4lfr32 commented Jul 28, 2020

El mapa no está centrado aparece en america de norte

@A4lfr32

This comment has been minimized.

Copy link

@A4lfr32 A4lfr32 commented Jul 28, 2020

image
Intenté centrar pero no cuadra la figura

@john-guerra

This comment has been minimized.

Copy link
Owner Author

@john-guerra john-guerra commented Jul 28, 2020

@A4lfr32

This comment has been minimized.

Copy link

@A4lfr32 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

This comment has been minimized.

Copy link

@demarchenac-nativapps demarchenac-nativapps commented Nov 12, 2020

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

This comment has been minimized.

Copy link
Owner Author

@john-guerra john-guerra commented Nov 12, 2020

@rubenbolivarr

This comment has been minimized.

Copy link

@rubenbolivarr rubenbolivarr commented Jan 28, 2021

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
?

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