Blogi kartalla

Statistiikkaa kun tässä katselen, niin jokunen teistä on jo tätä uutta sälää käynyt kattelemassakin, mutta kirjoitellaan nyt sitten teille lopuillekin.  Teksti on huiman tekninen, mutta lopusta löytyy asian ydin lyhennettynä. Koittakaa kestää, miä oon kuitenkin insinööri!

Miä oon aina tykännyt fgr.fi:n "radat kartalla" ominaisuudesta. Siitä näkee kohdealueen radat helposti yhdellä silmäyksellä ilman että tarvitsee pitäjänrajoista välittää. Kartasta pääsee suoraan radan omalle sivulle perehtymään tarkemmin. Upea toiminnallisuus, joka pyörii myös mobiililaitteilla mukisematta.

Jonkun aikaa olen miettinyt tätä miun fribaturismia ja vastaavanlaista karttaa osana sitä. Ja nyt viimein sain napattua sen verran aikaa, että siirryin suunnitelmasta toteuttamiseen. Blogger kun tarjoaa tekstinkäsittelytyylisen ikkunan lisäksi myös html-rajapinnan blogitekstien ja sivujen työstämiseen. 

Jos asiaa tutkii yhtään syvemmältä, voi huomata että google tarjoaa pääsääntöisesti kaksi menetelmää karttojen sisällyttämiseksi omaan sisällöntuotantoon. Toinen on Google Maps Embed API, ns. peruspaketti ja toinen Javascript API v3, joka tarjoaa sitten sitä muokattavuutta. Kokeilin toista ja kokeilin toista, mutta ongelmia tuli. Embed API tuntui vähän yksinkertaiselta ja vaikealta ylläpitää, kun ratoja ja markkereita olisi nyt jo se 20 ja kaikki pitäisi siihen yhteen iframe -tagin sisään kirjoittaa URL-muotoon ja... Ja vastaavasti Javascript -koodaus on miulle niin uusi tuttavuus, että paria demokoodia lukuunottamatta eivät oikein lähteneet skulaamaan. Eivätkä edes näyttäneet hyvältä.

Pienen tuumailun jälkeen heivasin koko API-kikkailun roskakoriin ja ajattelin, että pakkohan tähän on olla joku helpompi tapa. Ja arvatkaapas mitä - niin olikin. Jos teillä on google-tunnukset, niin samalla teillä on mahdollisuus myös tehdä omia karttoja googlen karttapalveluun. Oman kartan luominen tyrkkää käyttäjän Googlen MapsEngine -palveluun. Hetihän tuossa tajusi, että tällähän se kannattaa kartta työstää. Hakupalkkiin koordinaatit sisään ja täpästä "Lisää karttaan". Muokkaamalla saa koordinaatit vaihdettua radan nimeen ja tadaa, kartta valmis... tai oottakaahan. Mites tämän nyt sitten saa blogiin asti? Jaa-nappi tuolla on, mutta se tarjoaa vain ja ainoastaan linkin MapsEngineen... Jaa-välilehden alta kuitenkin laitoin kartan julkiseksi, koska oletus näytti olevan, että vain miä näen oman karttani. Makes sense. Kaikille tarkasteluoikeus siis. Oikea nappi löytyi tuolta kansiokuvakkeen alta - Upota Sivustooni. Klikkaus siitä ja Embed APIa hyödyntäen pihalle pullahtaa iframe -pohjainen koorinpätkä, jolla saa kartan liitettyä osaksi sivustoa. Leveydet ja korkeudet saa asetettua pikseleinä ja kartan päivittyessä myös sisältö sivustolla päivittyy.

Vaan eipäs jäänytkään homma tähän. Pikselisäädöillä saa kyllä kivan kokoisen kartan, mutta entäpäs jos joku lukee tätä mobiililaitteella? Lisäksi kartan oletuszoomtaso oli vähän turhan lähellä, voisiko sille tehdä jotain? Embed API mahdollistaa zoom - attribuutin käytön... joka ei toiminut. Html-devaamista tekevä tuttuni vinkkasi, että src-attribuutin url-osoitteeseen voi suoraan syöttää halutun zoomitason lisäämällä "&z=5" perään, ja tämä toimikin mukavasti. Samaan hengenvetoon vaihdettiin myös height ja width -attribuutit style:ksi, joka käytännössä sisältää samat asiat, mutta toimii varmemmin mobiililaitteilla. Pikselien sijaan leveys voidaan ilmaista myös prosentteina koko tekstitilan leveydestä, joten luulisi älypuhelinten käyttäjien kiittävän kun ei kartta sinkoile ulos ruudulta. Kiitoket vain Kimmolle avusta!

Lyhyesti. Yläpalkissa on nykyisin myös On the Map -sivu, jossa voi seurata lähes reaaliajassa miun fribaturismia ja käytyjä ratoja.

I did same html development and added a map page which contains all the disc golf courses I've visited. I had a bit of a struggle to do that, but Google's own MapsEngine proved to be the best choise to construct and maintain the embedded map. I should also work well for mobile devices! Thanks to my friend Kimmo for helping me out on some nuances.