http://www.flygradar.nu/flygradar.php
http://transport.wspgroup.fi/hklkartta/
tuossa on pari esimerkkiä google mapsin päälle tehdyistä sovelluksista jotka näyttää reaaliaikaista dataa.
osaisiko joku kertoa periaatetta, miten nuo toimii?
lähdekoodia vilkuilemalla tunsin vain itseni entistäkin tyhmemmäksi.
tai olisiko jotain mahdollisimman simppeliä esimerkkiä tuosta reaaliaikaisen datan käytöstä?
http://transport.wspgroup.fi/hklkartta/
tuossa on pari esimerkkiä google mapsin päälle tehdyistä sovelluksista jotka näyttää reaaliaikaista dataa.
osaisiko joku kertoa periaatetta, miten nuo toimii?
lähdekoodia vilkuilemalla tunsin vain itseni entistäkin tyhmemmäksi.
tai olisiko jotain mahdollisimman simppeliä esimerkkiä tuosta reaaliaikaisen datan käytöstä?
Vastaukset 7
Vanhimmat
Eli sivu hakee tasaisin väliajoin koordinaatit toiselta sivulta ja päivittää sen jälkeen kartan tai kartalle tulevat pisteet Google Map API:lla. Alla yksinkertainen esimerkki joka muodostuu kahdesta tiedostosta. Teso.html tiedosto piirtää kartan käyttäen Google Map API:a ja sen jälkeen hakee tasaisin väliajoin uudet koordinaatit live_koordinaatit.html -tiedostosta ja siirtyy kartalla sen mukaan. (Laitoin esimerkkiin pienen keinotekoisen siirtymän (siirtyma -muuttuja) jotta siirtymä toiminta näkyy).
--- ALKAA: teso.html ---
Paikka tieto
var timerID = null
var siirtyma = 0.0;
var kartta;
/* Alustetaan kartta */
function initialize()
{
if (GBrowserIsCompatible()) {
kartta = new GMap2(document.getElementById("kartta_id"));
kartta.setCenter(new GLatLng(22.3, 22.3), 12);
kartta.setUIToDefault();
}
/* Käynnistetään ajastin kartan päivittämiseksi */
if (timerID == null)
timerID = self.setTimeout("FireTimer()", 300);
}
/* Päivittää kartta haettuihin koordinaatteihin */
function FireUpdate(responseText) {
/* Tehdään liike (tämä on turha rivi joka vain demoaa, että kartalla liikutaan) */
siirtyma = siirtyma 0.0004;
/* Siirrytään uusiin koortinaatteihin */
coord = responseText.split(",")
kartta.setCenter(new GLatLng(siirtyma parseFloat(coord[0]), parseFloat(coord[1])), kartta.getZoom());
}
/* Ajastettu toiminto. Haetaan uudet koordinaatit. */
function FireTimer() {
clearTimeout(timerID)
var xmlHttpReq = false;
if (navigator.appName == "Microsoft Internet Explorer")
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
else
xmlHttpReq = new XMLHttpRequest();
var cachefull = "cachefull=" new Date().getTime();
xmlHttpReq.open("GET", "live_koordinaatit.html" "?" cachefull, true);
xmlHttpReq.onreadystatechange = function() {
if (xmlHttpReq.readyState == 4) {
FireUpdate(xmlHttpReq.responseText);
timerID = self.setTimeout("FireTimer()", 500);
} else if (xmlHttpReq.readyState == 3) {
if (navigator.appName == "Microsoft Internet Explorer") {
} else {
FireUpdate(xmlHttpReq.responseText);
timerID = self.setTimeout("FireTimer()", 500);
}
}
}
xmlHttpReq.send(null);
}
--- LOPPUU ---
--- ALKAA: live_koordinaatit.html ---
60.43,22.34,,,,
--- LOPPUU ---
Jos tuohon live_koordinaatit.html tiedostoon saadaan tiedot GPS:ltä, niin silloin kartta siis liikkuu GPS:n koordinaattien mukaan realiaikaisesti...
Jäi jostain syystä teso.html:stä tulematta tagit ja sisennykset. Kokeilen uusiksi josko tulisi...
--- TIEDOSTO ALKAA: teso.html
Paikka tieto
var timerID = null
var siirtyma = 0.0;
var kartta;
/* Alustetaan kartta */
function initialize()
{
if (GBrowserIsCompatible()) {
kartta = new GMap2(document.getElementById("kartta_id"));
kartta.setCenter(new GLatLng(22.3, 22.3), 12);
kartta.setUIToDefault();
}
/* Käynnistetään ajastin kartan päivittämiseksi */
if (timerID == null)
timerID = self.setTimeout("FireTimer()", 300);
}
/* Päivittää kartta haettuihin koordinaatteihin */
function FireUpdate(responseText) {
/* Tehdään liike (tämä on turha rivi joka vain demoaa, että kartalla liikutaan) */
siirtyma = siirtyma 0.0004;
/* Siirrytään uusiin koortinaatteihin */
coord = responseText.split(",")
kartta.setCenter(new GLatLng(siirtyma parseFloat(coord[0]), parseFloat(coord[1])), kartta.getZoom());
}
/* Ajastettu toiminto. Haetaan uudet koordinaatit. */
function FireTimer() {
clearTimeout(timerID)
var xmlHttpReq = false;
if (navigator.appName == "Microsoft Internet Explorer")
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
else
xmlHttpReq = new XMLHttpRequest();
var cachefull = "cachefull=" new Date().getTime();
xmlHttpReq.open("GET", "live_koordinaatit.html" "?" cachefull, true);
xmlHttpReq.onreadystatechange = function() {
if (xmlHttpReq.readyState == 4) {
FireUpdate(xmlHttpReq.responseText);
timerID = self.setTimeout("FireTimer()", 500);
} else if (xmlHttpReq.readyState == 3) {
if (navigator.appName == "Microsoft Internet Explorer") {
} else {
FireUpdate(xmlHttpReq.responseText);
timerID = self.setTimeout("FireTimer()", 500);
}
}
}
xmlHttpReq.send(null);
}
--- TIEDOSTO LOPPUU ---
Korvaan aloittavan harakannokan #-merkillä ja lopettavan @ -merkillä, josko sitten tulisi kokonaan....
--- ALKAA: teso.html ---
#!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"@
#html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"@
#head@
#meta http-equiv="content-type" content="text/html; charset=utf-8"/@
#title@Paikka tieto#/title@
#script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"@#/script@
#script type="text/javascript"@
var timerID = null
var siirtyma = 0.0;
var kartta;
/* Alustetaan kartta */
function initialize()
{
if (GBrowserIsCompatible()) {
kartta = new GMap2(document.getElementById("kartta_id"));
kartta.setCenter(new GLatLng(22.3, 22.3), 12);
kartta.setUIToDefault();
}
/* Käynnistetään ajastin kartan päivittämiseksi */
if (timerID == null)
timerID = self.setTimeout("FireTimer()", 300);
}
/* Päivittää kartta haettuihin koordinaatteihin */
function FireUpdate(responseText) {
/* Tehdään liike (tämä on turha rivi joka vain demoaa, että kartalla liikutaan) */
siirtyma = siirtyma 0.0004;
/* Siirrytään uusiin koortinaatteihin */
coord = responseText.split(",")
kartta.setCenter(new GLatLng(siirtyma parseFloat(coord[0]), parseFloat(coord[1])), kartta.getZoom());
}
/* Ajastettu toiminto. Haetaan uudet koordinaatit. */
function FireTimer() {
clearTimeout(timerID)
var xmlHttpReq = false;
if (navigator.appName == "Microsoft Internet Explorer")
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
else
xmlHttpReq = new XMLHttpRequest();
var cachefull = "cachefull=" new Date().getTime();
xmlHttpReq.open("GET", "live_koordinaatit.html" "?" cachefull, true);
xmlHttpReq.onreadystatechange = function() {
if (xmlHttpReq.readyState == 4) {
FireUpdate(xmlHttpReq.responseText);
timerID = self.setTimeout("FireTimer()", 500);
} else if (xmlHttpReq.readyState == 3) {
if (navigator.appName == "Microsoft Internet Explorer") {
} else {
FireUpdate(xmlHttpReq.responseText);
timerID = self.setTimeout("FireTimer()", 500);
}
}
}
xmlHttpReq.send(null);
}
#/script@
#/head@
#body onload="initialize()" onunload="GUnload()"@
#div id="kartta_id" style="width: 500px; height: 300px;"@#/div@
#/body@
#/html@
--- LOPPUU ---
Oikein suuret kiitokset tuosta koodista!
Nyt pääsin kärrylle miten tuo homma tapahtuu :)
Aika pienellä koodimäärällä tämäkin näemmä onnistuu!
en keksinyt miten google mapsin kännyversion ilmoittaman sijainnin olisi saanut javascriptillä luettua niin piti kikkailla php:llä
index.php:
http://jii.pastebin.com/m28a991a8
haesijainti.php:
http://jii.pastebin.com/m3e6ae5f7
ja tuo google mapsin kännyversion latitude-ominaisuushan vaatii että sen itse laittaa julkiseen käyttöön, oletuksena se on salattu:
http://www.google.com/latitude/apps/badge
ja tuo index.php tarttee tietty sen avaimen, jos sitä haluaa oman koneen ulkopuolelta käyttää:
http://code.google.com/intl/fi-FI/apis/maps/signup.html
Juu tosiaan avain vaaditaan. Ite muutin tuohon esimerkkiini googlen sivuilta esimerkistä napatun avaimen, kun en omaa viittynyt laittaa. Avain on site/domain kohtainen, eli jos sovellus toimii palvelimma niin muut pystyvät käyttämään sitä.
En ole perehtynyt mobiili laitteisiin. Ite tein tuon esimerkkini ihan COM porttiin tulevalla GPS:llä siten, että tein "pienen" WWW palvelimen joka hoiti laite puolen. Eli todellisuudessa tuo antamani live_koordinaatit.html tiedosto oli vain levyllä muotoa: "@longitude, @lattitude, @speed, @satellites,," ja tuo tekemäni palvelin korvasi aina sivun haun yhteydessä nuo "@lattitude", "@longitude", yms. tagit GPS:ltä tulleilta muutetuilla arvoilla. Ajoin tuota läppärillä jossa oli GPS, (eli tavallaan se olli GPS kartta sovellus kannettavaan), jolloin koordinaattien päivitys ei aiheuttanut edes verkon yli tapahtuvia toimen piteiitä ellei sitten siirtymä ollut suurta jollon Map API haki kartan päivityksen.
Mahtaakohan joku tietää pystyykö tuohon kartan puskuroituun kokoon vaikuttamaan jotenkin itse? Eli miten pystyisi määrittämään, että aina kun kartta ladataan niin ladataankin joku tietty piirtoaluetta suurempi alue, jolloin kartalla voisi siirtyä suuremman matkan ennenkuin API tekee verkon yli tapahtuvan kuvan päivityksen. Oletuksena puskuri näyttää olevan aika pieni, eikä se näytä enakoivan, (eli hakisi suuremman puskurin sinne suuntaan mihin keskipistettä siirretään).
luultavasti tällä hetkellä ainoa keino olisi kikkailla, eli ottaa nykyiset koordinaatit ja niiden perusteella vähentää/lisätä tuloksesta joka suuntaan n metriä ja ladata ne kaikki kartat sitten kuvana.
minusta vaikuttaa että google mapsin symbian-versio lataa noita karttoja valmiiksi dynaaamisesti, koska edes edge-alueella karttoja ei joudu odottamaan.
nyt kun on gepsillä varustettu luuri (nokia e 71) niin olen keskittynyt hoitamaan kaiken sen google maps-sovelluksen ja itse google mapsin kautta.
pääsee niin hiton helpolla kun käyttää google mapsin apia ja kysyy vaikka s24:stä neuvoja :D
ja mukana ei tartte roudaa läppäriä ja gepsiä, pelkkä luuri riittää.
no toki omalla palvelimella joutuu ajamaan tuota haesijainti.php -skriptiä mutta kone on muutenkin aina päällä ja palvelimet pyörii.