Kart

SVG

Et SVG-kart med norske kommuner fra Wikimedia Commons [1] . Dette ser slik ut i (XML-fil dumpet som rå tekst): svgdata/Norway_municipalities_2012_blank.txt

Som du ser er kommunene pakket fylkesvis, der fylket er et g-element som omslutter kommunene i fylket som ligger som path-elementer, typisk:

   
<g
  id="02"
  inkscape:label="Akershus">
  <path
    inkscape:label="Vestby"
    id="0211"
    style="fill:#999999;fill-opacity:1;stroke:none"
    d="m 713.17687,2599.7778 c -0.21042,-0.3537 -0.63225,-1.0846 ... z"
    inkscape:connector-curvature="0" />
  <path
    inkscape:label="Ski"
    id="0213"
    style="fill:#999999;fill-opacity:1;stroke:none"
    d="m 726.19163,2565.224 -2.68402,-5.3994 0.0621,-0.5986 ... z"
    inkscape:connector-curvature="0" />
	...
</g>
 

Fila inneholder en masse som er relevant for den editoren som er brukt til lage den (inkscape), og den kan slankes og forenkles betraktlig.

Jeg har gjort følgende inngrep i det som inkluderes på siden:

• Fjernet alt unntatt svg-elementet
• Pakket path med navn Oslo inn i et g-element slik at Oslo opptrer både som fylke og kommune
• Fjernet alle namespace angivelser
• Har tatt høyde for at Bjarkøy er slått sammen med Harstad
• Jeg har endret attributtene til svg-elementet slik:

   	
  <svg
   version="1.2"
   width="600px"
   height="600px"
   viewBox="600.15482 40.73736 1076.0438 2876.6739"
   id="NO"
   >
  

Resultatet av dette er kopiert inn som et SVG-element på den siden som skal vise kartet. Dette kan gjøres på flere måter. Jeg kan hente elementet som AJAX nå siden lastes.

<svg
 version="1.2"
 width="600px"
 height="600px"
 viewBox="600.15482 40.73736 1076.0438 2876.6739"
 id="NO"
>
<g
 id="01"
 label="Østfold">
<path
   label="Halden"
   style="fill:#999999;fill-opacity:1;stroke:none"
   id="0101"
   d="m 800.69641,2717.5047 c -0.29632,-0.2395 -1.18938,-1.0938 -1.98449,-1.8986 ... z"
   />
<path
   label="Moss"
   style="fill:#999999;fill-opacity:1;stroke:none"
   id="0104"
   d="m 713.90122,2612.7701 c 0,-0.061 0.32909,-1.2223 0.73118,-2.5801 0.75849 ...z"
   />
   ...
</g>
....
</svg>

DATA

Jeg har hentet noen enkle datasett for hver kommune. Disse er hentet fra Wikipedias side om norske kommuner [2] . Denne siden er transformert til json og er også gjort tilgjengelig som en javascript-variabel.

Et lite utdrag:

kdata={"logoLocation":"https://borres.hiof.no/resources/kommunelogos/",
"list":[
{
  "id":"0101",
  "name":"Halden",
  "center":"Halden",
  "fylke":"Østfold",
  "fylkesId":"01",
  "pop":30132,
  "area":642.34,
  "logo":"0101.svg.png"
},
{
  "id":"0104",
  "name":"Moss",
  "center":"Moss",
  "fylke":"Østfold",
  "fylkesId":"01",
  "pop":31308,
  "area":63.49,
  "logo":"0104.svg.png"
},....

Vi kan selvsagt bruke alle mulige slags datasett så lenge vi kan linke datasettet til path-elementet i svg ved hjelp av id'en til hver kommune.

Tilsvarende data er lagret for fylker.

var fdata={"logoLocation":"https://borres.hiof.no/resources/fylkeslogos/",
"flist":[
{
	"name":"Østfold",
	"id":"01",
	"center":"Sarpsborg",
	"logo":"01.png",
	"area":"4182.19",
	"pop":284962,
	"kcount":18,
	"klist":[
		{"kname":"Halden","kid":"0101"},
		{"kname":"Moss","kid":"0104"},
		{"kname":"Sarpsborg","kid":"0105"},
		...
		]},
		...
]}