Olemme tekemässä PlusDesk:ssä juttua, johon tarvitsemme Suomen kuntien sijaintien koordinaattitiedot. Sijaintitiedot ilmaisevat kaupungin sijainnin maapallolla korkeus- ja leveyskoordinaattien avulla. Nämä tiedot ovat saatavilla Wikipedia:n artikkelista:
Luettelo Suomen kuntien koordinaateista. Kiitos
Teemu:lle
vinkistä.
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) |
Keräämäni data, jonka oikeellisuuteen kannattaa suhtautua varauksella, on saatavilla täältä:
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) |
Pudotusvalikon HTML-koodi näyttää siis yksinkertaisuudessaan seuraavalta:
<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.
