Kokoonpantava sivupalkki

Google Mapsin sivupalkissa on melko huomaamaton sulkupainike jota klikkaamalla saa täysleveän karttanäkymän. Toiminto vaikuttaa rutiininomaiselta DHTML-operaatiolta. On se sitäkin mutta sen lisäksi tapahtuu paljon muuta.

Kartta markkereineen pysyy paikoillaan vaikka se suurenee toiseen suuntaan ja todellinen keskipiste siirtyy. Lisäksi on kyselty miten sivupalkin tilalle ilmestyvä kartta on aina valmiiksi latautunut.

FF2:n tehokkaat työkalut paljastivat nopeasti että kartta on koko ajan täysleveä ja sivupalkki elää kartan päällä. Zoom-potikkaa siirretään tilanteen mukaan.

Pienen karttanäkymän keskipiste ei ole kartan todellinen keskipiste eikä vasen raja ole 'oikea'. Siksi zoomaaminen vaatii pientä matikkaa. Karttanäkymän rajat on tiedettävä että halutut markkerit näkyvät.

Keskiraskaan painiottelun tuloksena syntyi toimiva mallisivu joka apinoi esikuvansa toimintaa mutta ei toteutusta. Zoom-potikka elää nopeammin kun ei yritäkään siirtää sitä, vaan tekee toisen, jota kytketään päälle/pois ja jättää alkuperäisen lepäämään sivupalkin alle.

Meille tulee ikävä IE:tä

En ole ikinä suostunut kirjoittamaan koodia, joka valikoi selaimen. Olen taistellut loppuun saakka, että koodi toimii lopulta myös Internet Explorerilla.

Nyt ei enää ole kysymys IE:n oikkujen täyttämisestä. IE:stä vain kertakaikkiaan loppuu voima.

Nykyisten javascritpt-pohjaisten palveluiden vaatima javascript- ja dom-operaatiovääntö on mennyt yli sen rajan, jolloin huonosti kirjoitettu selain joutuu ansaitsemaansa kuseen.

Asia tuli minulle päivänselväksi kun kokeilin sorttaussivuani eri selaimilla.

Hautaanko ajatuksen. Systeemi toimii hienosti kaikilla muilla selaimilla mutta ei sillä jota "90% käyttää". Kysymys on pelkästään suorituskyvystä.

En hautaa ajatustani vaan haudattatkoon Internet Explorer. Tiedän että kyseistä ohjelmointihistorian suurinta mätämunaa puolustavat tietyt laiskurit, jotka pitävät sen "etähallintaominaisuuksia ennenäkemättöminä".

Onneksi Steve Ballmer on kanssani samaa mieltä.

Huonosti perustellut IE:tä puolustavat kommentit poistetaan.

Vapise John Resig

Ympyrän keksiminen on typeryyttä. Kannattaa mieluummin keskittyä soikion tutkimiseen.

On varsin ymmärrettävää, että maailman johtava hiirellä raahattava kartta sisältää koetun ja optimoidun systeemin dom-objektien raahailuun. Se annettiin API-käyttöön jo pari vuotta sitten. Kukaan vain ei ole tehnyt mitään.

API:ssa on GDraggableObject jolla voi tehdä mistä tahansa sivun elementistä raahattavan. Päähankaluus on sijoittelun karkaaminen. Selostelen osan asiasta sivulla.

APIa kirjoittavia äijiä varmasti huvittaa ziigata miten hedelmät tekevät kauppansa.

Sain jostain haasteen tehdä raahaamalla sortteerattava listan. Tein sen.

Videot ovat jo kartalla

Panoramion kuvat ja Wikipedian artikkelit tulivat API-kartoillekin jo viikkoja sitten.

GLayer() on teknisenä toteutuksena uusi. Se on oma karttatyyppinsä ja siinä on klikattavat pisteet aivan kuin markkerit. Se tulee Googlen serveriltä 256 x 256 pikselin kuvina kuten kartatkin. Kaikki pyydetyt kerrokset (Wiki, Panoramio jne.) on yhdistetty samoihin PNG-kuviin vieläpä siinä järjestyksessä jossa niitä pyydettiin. Klikattavat alueet toimitetaan erillisenä JSON-tiedostona josta javascript muodostaa selaimen ymmärtämät klikkejä keräävät imagemap-elementit.

Koodissa on koko ajan kummitellut myös YouTube yhtenä GLayer()-vaihtoehtona.Kuitenkaan kartalle ei ilmesty mitään.  Kokeilujen yhteydessä huomasin että GLayer('lmc:youtube') palauttaa tyhjiä ruutuja mutta järkevän näköistä JSON-tietoa.

Kun valitsee esim. tämän sivun 'Menu'-valinnasta YouTube, ei kartalla näytä tapahtuvan mitään mutta silti kannattaa haravoida karttaa. Kun käy karttaa huolella läpi tuijottaen hiiren kursoria, sieltä löytyy YouTube videoita.

Loistava tapa päästä eroon ylimääräisestä ajasta.

Nuppineulat tekstistä

Kysytyin sivu esimerkkikatalogistani on 'markkerit tekstitiedostosta'. Sähköpostini on monena aamuna ollut täynnä kyseistä sivua koskevia 'I make this not work'-kysymyksiä. Siinä ohessa on moni asiallinen kysymys huuhtoutunut. Sori kaikille.

Kysyntää en yhtään ihmettele. Pilkkuerotettu tekstitiedosto on helppo luoda ja ylläpitää. Googlen ihmisetkin pyysivät selkeämpää esimerkkiä aiheesta. Sitäkään en ihmettele, koska en itsekään ymmärtänyt sivun koodista suunnilleen mitään.

Aloitin siis alusta. On sovittu sarjasta sivuja.  Ensin luodaan systeemi, jolla sivut hakevat tietonsa tekstitiedostoista. Sen jälkeen kyseisiä tietoja suodatellaan ja kehitellään käyttökokemusta.

Ensimmäiset kaksi sivua ovat jo eetterissä. Viivoja tekstistä ja nupareita tekstistä.

Seuraava onkin paha. Alkuperäinen ajatus oli seuraavaksi filtteerata dataa etäisyyden perusteella ja käsitellä markkereitten värejä ja z-indexejä jne..

Nimim. V.S.O.P. sai minut ymmärtämään, että ensin pitää opetella hakemaan data ja vasta sitten käsittelemään sitä. Vastassa väistämättä kategoriointi.

K: Voiko Map Kitchenissä ladata monta tiedostoa, jokainen eri kategorioihin?

V: Tietty - se on juuri se ajatus.

K: Voiko yhdessä tiedostossa olla monta kategoriaa?

V: Voi, kun sovimme merkinnästä

K: Voiko kahta edellämainittua sekoittaa?

V: Gulp! Pakkohan teidän on sekoittaa.

K: Koska se on valmis?

V: Sitten kun siitä ei voi poistaa yhtään riviä.

Kokeilusivu.

Päivittäkää sivujanne

Google Maps API pantiin aikoinaan kokonaan uusiksi. Jossain projektipalaverissa oli joku tehnyt riittävän vakuuttavasti vanhan hammaslääkärin diagnoosin: "Tätä ei voi enää korjata, tämä pitää poistaa."

Julkaistiin api v2 joka eli alussa omaa elämäänsä v1:n rinnalla ja versiosta 2.44 muutettiin oletusversioksi jo pari vuotta sitten. v2 sisältää alias-koodia, joka kääntää vanhan v1 syntaksin v2-muotoon.

v1-syntaksi kelpaa edelleenkin. Tällä viikolla kuitenkin joku historiaa tuntematon siivooja poisti vakiot G_MAP_TYPE, G_SATELLITE_TYPE ja G_HYBRID_TYPE 

Jos sivusi lakkasi yllättäen toimimasta, korvaa jo hyvä ihminen kyseiset vakiot v2-vastaavilla:

 G_NORMAL_MAP, G_SATELLITE_MAP ja G_HYBRID_MAP

Tämä ihan Härmän kielellä koska itku ja parku forumilla on ollut sietämätön.

Tämä on Blogger v1 ja käytän sitä niin kauan kuin se toimii. Tuo kahden code-tagin välissä oleva teksti "Jos sivusi lakkasi yllättäen toimimasta, korvaa jo hyvä ihminen kyseiset vakiot v2-vastaavilla:" Toistuu kuin se olisi code-tagien sisällä.

Älkää kuitenkaan ihmiset unohtako, että bloggerin jätkät tekivät ensimmäisen rich text editorin. Sittemmin Google osti Writeleyn, josta tuli Google Docs. Virtuaalisilla Nuppineuloilla on Writeleyn käyttäjätunnus, jonka sarjanumero on alle kymmenentuhatta.

Synteettiset nuppineulat

Google Charts API osaa tuottaa jos jonkinmoista graafista tuotetta. Aiemminkin taisi olla puhetta miten sillä voi tuottaa nuppineuloja kartalle. Nyt siitä on virallinen dokumentaatio.

Merkittävä juttu on kallistetut nuparit. Kun samaan pisteeseen pakkaa useampia markkereita, ne voidaan erottaa kallistelemalla niitä. Kaikkien jalat samassa pisteessä, mutta jokainen nojaa eri suuntaan kuin humalaiset kauppiaat.

Mike Williams on ehtinyt jo tehdä tarvittavan matikan jolla markkerien ankkuripisteet määrittyvät kätevästi.

Vielä on tekemistä. Niille pitäisi määrittää imagemapit, joilla klikkaus tapahtuu tarkasti ja myös infoikkunan varjosta. Sen voisi tehdä vaikka Mika Tuupola, joka on toteuttanut vaikemmankin homman, eli staattisten karttojen klikattavat markkerit.

Miken sivulla on paljon kävijöitä ja ilmeisesti siksi markkerit jäävät usein latautumatta. Firebug näytti, että Googlen serverin vastaus oli 400 eli 'sopimaton kysely'.

Kannattaa siis tallentaa haluamansa markkerit omaan serveritilaan. Se ei tietääkseni loukkaa Chartsin käyttöehtoja.

Vanha oppi leviää

Saksan kielelläkin levitetään jo edellisen postin ilosanomaa.

Kuitenkin äsken kävi ilmi että idea on vanha. Googlen Pamela joutui ulkomaanmatkoiltaan puuttumaan keskusteluun. Systeemi on esitelty jo vuosi sitten silloisessa virallisessa API-blogissa, tosin käyttäen XML-muotoista geokoodausta.

Koska pyörä on jo keksitty, pitänee keskittyä soikioon.