Wikipedia-artikkelin data ei ole kuitenkaan nykyisen kuntatilanteen mukaista ja tarvitsimme nimenomaan vuoden 2013 kuntatilanteen mukaiset koordinaattitiedot (vuonna 2013 Suomessa on 320 kuntaa).
Olisin voinut rajata Wikipedia:sta löytyneen koordinaattisisällön vastaamaan nykytilannetta, mutta päädyin sen sijaan ottamaan Google Chrome:n Scraper-lisäosalla nykyisen kuntalistauksen toisesta Wikipedia-artikkelista nimeltä Luettelo Suomen kunnista ja syöttämään tiedot GPS Visualizer -palveluun. Palvelu geokoodaa annetut osoitetiedot WGS84-muodossa oleviksi korkeus- ja leveyskoordinaateiksi valitun rajapinnan avulla (Yahoo tai Google). Syötin kuntien nimet palveluun muodossa "{Kuntanimi}, Finland", jotta välttyisin sekaannuksilta mahdollisesti muualta maailmasta löytyviin vastaavan nimisiin paikkoihin. (Kuva 1)
 |
| GPS Visualizer -palvelu hyödyntää avoimia rajapintoja osoitetietojen geokoodauksessa. (Kuva 1) |
Tulen tarkistamaan datan oikeellisuuden vielä myöhemmässä vaiheessa, mutta yksittäiskokeilujen osalta koordinaattitiedot näyttäisivät pitävän paikkansa. Keräämäni datan avulla loin sitten pudotusvalikon, josta käyttäjän on mahdollista valita haluamansa kunta, jonka jälkeen ohessa oleva kartta tarkentuu kyseisen kunnan kohdalle. (Kuva 2)
 |
| Käyttäjän on pudotusvalikosta mahdollista tarkentaa haluamaansa kuntaan. (Kuva 2) |
<select id="selector">
<option value="">Valitse kunta</option>
<option value="">- - - - </option>
<option data-lat="61.167408" data-lon="23.867642">Akaa</option>
<option data-lat="63.00285" data-lon="23.803185">Alajärvi</option> <option data-lat="64.158003" data-lon="24.299759">Alavieska</option>
<option value="...">...</option>
</select>Kyseistä HTML-koodia en tallenna sellaisenaan sivun lähdekoodiin vaan luon valikon lennossa oheisella JavaScript-koodilla.
$.ajax({
url: jsonUrl + '/data/kunnat.json',
method: "GET",
dataType: "json",
success: function(data) {
$.each(data, function(index, municipality) {
$('#selector').append('<option data-lat="' + municipality.lat + '" data-lon="' + municipality.lon + '">' + municipality.m + '</option>');
});
}
});Tämä pienentää sivun kokoa eli painoa ja pienentää siten latausaikaa, mutta toisaalta toki lisää selaimelle aiheutuvaa prosessointi kuormaa. Sivun pieni paino on kuitenkin tärkeämpää etenkin mobiilikäytössä. Nykyisille selaimille ja laitteille kyseisenkaltainen prosessointi on hyvin kevyttä.
(Muokkaus klo 8:26: JSON-muodossa data on ~16 kilotavua kun vastaava HTML-muotoinen data olisi ollut ~21 kilotavua. Ero on siis etenkin prosentuaalisesta näkökulmasta merkittävä. Toki myös pyyntöjen määrä olisi hyvä minimoida kuten @Duukkis osuvasti huomioi.)
Koodissa näkyvä kunnat.json on luotu aiemmin mainitusta Google-dokumentista lataamalla se .csv-muodossa koneelle ja syöttämällä tämä .csv-muotoinen data Mr. Data Converter -palveluun. JSON on yleisesti verkossa tiedon välitykseen käytetty tiedostomuoto. Kuntien koordinaattitiedot sisältävä .json-tiedosto näyttää seuraavalta:
{"m":"Akaa","lat":61.167408,"lon":23.867642},
{"m":"Alajärvi","lat":63.00285,"lon":23.803185},
{"m":"Alavieska","lat":64.158003,"lon":24.299759},
{"m":"Alavus","lat":62.586607,"lon":23.617282},
...Tässä hieman valoa siihen miten käsittelen ja hyödynnän dataa. Julkaisemme itse toteutuksen, jossa käytämme tätä pudotusvalikkoa toivottavasti ensi viikon aikana, joten siitä kuulette vasta sitten.
