dijous, 3 de gener del 2013

Generació de mapes municipals amb SVG

Origen de dades:

El punt de partida és el mapa de comarques que podem trobar a l'article de Catalunya a la Viquipèdia.
Aquest mapa de comarques te format SVG i el trobarem a  http://ca.wikipedia.org/wiki/Fitxer:Mapa_municipal_de_Catalunya.svg publicat per Joan M. Borràs (ebrenc) sota la llicència de Creative Commons Reconeixement i Compartir Igual 2.5 Genèrica.

 

Modificacions i extracció de dades:

En primer lloc sobre aquest mapa s'ha inclòs el municipi de La Canonja segregat del de Tarragona el 2010.

Aquest mapa està codificat en SVG basat en XML i per tant es tracta d'un fitxer de text. Cadascun dels municipis que hi conté està representat per un polígon dins d'un element <path>, concretament a l'atribut d.


Per cadascun dels 947 municipis catalans extraurem la codificació del polígon que el delimita i l'associarem al seu nom i codi. Aquesta informació referent als límits municipals de Catalunya pot ser d'utilitat per a generar dinàmicament mapes des de qualsevol llenguatge de programació capaç de generar una sortida textual.

Tots aquests polígons estan referenciats respecte a un gràfic de 425 pixels d'amplada per 400 d'alçada.
Aquests límits municipals els hem publicat en un fitxer anomenat Catalunya SVG Path.csv per tal que puguin ser utilitzats en d'altres projectes a posteriori. Es publica també sota la llicència de Creative Commons Reconeixement i Compartir Igual 2.5 Genèrica.

 

Generació d'un mapa de municipis:

Per generar un mapa de municipis necessitem crear en primer lloc un gràfic SVG ja sigui estàtic (contingut en un fitxer) o dinàmic (processat adhoc). El document es crea així:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="425" height="400">
A continuació "dibuixem" els municipis que vulguem mostrar, cadascun mitjançant l'atribut d de l'element <path> i els pintem mitjançant l'atribut style on definim el color i el gruix del contorn, el color de fons i la seva opacitat, etc.

A la porció de codi següent veurem com incloure el municipi de Badalona.
<path id="Badalona" style="fill:#BA93EE;fill-opacity:0.857142857142857;fill-rule:evenodd;stroke:#000000;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" d="m 270.48511,244.08392 0,-0.70722 1.17876,-1.41446 -0.70725,-1.6502 0.23575,-0.47149 0.23575,-0.47148 -1.17876,-0.94297 0.70726,-0.70723 -0.23576,-0.23574 -0.23575,-0.70724 0.23575,-0.94296 1.17876,-0.70724 0.23575,0 1.88602,0.23575 0.4715,0.23575 1.65027,2.82891 1.17876,1.6502 -0.47151,0.47148 -0.70725,0.47149 -0.23575,0.23574 -0.4715,0.47149 -0.23575,0.47148 -0.23576,0.23575 -0.23576,0.23574 -0.23575,0.47149 0,0.23574 -0.23575,0 0,0.23574 0,0.23574 -0.23575,0.70724 0,-0.70724 -0.4715,0.94298 0,0.23574 -0.23575,0.47148 -0.94301,-0.70722 -0.70726,0.23574 -0.23575,-0.47148 -0.94301,-0.23575 0,-0.23575 z" />
I per últim tancarem el document SVG.
</svg>

 

Exemple d'aplicació:

En aquest exemple mostrem els 947 municipis de Catalunya agrupats comarcalment en funció del color i l'opacitat del color de cada municipi vindrà determinada per la seva població.

SVG image

Cap comentari:

Publica un comentari a l'entrada