Simple map of Colombia with cities (municipios) and states (departamentos)
GEO Json from Javier Moreno mapa-colombia-js project on github
forked from mbostock's block: New Jersey State Plane
Last active
September 25, 2024 19:19
-
-
Save john-guerra/727e8992e9599b9d9f1dbfdc4c8e479e to your computer and use it in GitHub Desktop.
GeoJson map of Colombia Municipios
This file contains hidden or 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
| license: mit |
This file contains hidden or 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> | |
| <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> |
Si, es que el mapa no está hecho para ser visto en github....
…On Mon, Jul 27, 2020 at 8:45 PM Alfredo Maussa ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
[image: image]
<https://user-images.githubusercontent.com/38017273/88609565-09df2e00-d04a-11ea-8e48-12a770799c87.png>
Intenté centrar pero no cuadra la figura
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://gist.github.com/727e8992e9599b9d9f1dbfdc4c8e479e#gistcomment-3393835>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAJJCSZTAFRX535NQF44G4TR5YUTXANCNFSM4NETVSEA>
.
--
--
John Alexis Guerra Gómez
https://johnguerra.co
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
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.
Acabo de armar un topojson nuevo de Colombia, lo tengo en observable. Tengo
que revisarlo.
https://observablehq.com/@john-guerra/spike-map-colombia
John.
From my phone, brevity and all
http://johnguerra.co
…On Wed, Nov 11, 2020, 9:22 PM demarchenac ***@***.***> wrote:
***@***.**** commented on this gist.
------------------------------
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.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<https://gist.github.com/727e8992e9599b9d9f1dbfdc4c8e479e#gistcomment-3524829>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAJJCS2BQR4PEPRMQVYR4N3SPNWH5ANCNFSM4NETVSEA>
.
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
?
en geojson.io da la opción de poner datos
Acá hay un observable notebook de donde pueden bajar los TopoJSON y GeoJSON de Colombia con algunas variables poblacionales
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.
Acá hay un observable notebook de donde pueden bajar los TopoJSON y GeoJSON de Colombia con algunas variables poblacionales
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. 💥
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
Intenté centrar pero no cuadra la figura