Koti PC:lläkin voi yrittää piirrellä ympyröitä Google Mapsiin.
Kokeilin alla olevalla html/javascript sivulla Ympyrat.html piirrellä:
Koodi: Valitse kaikki
<html>
<head>
<style> #omakartta {width: 100%; height: 580px;} </style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var kartanKeskipiste = new google.maps.LatLng(65.844396, 24.152756);
var kartanZoomaus = 13;
var ympyranSade = 161;
var katkoTiedosto = "KemiTornio.csv";
var katkot = lueCsv(katkoTiedosto);
function lueCsv(tiedostoNimi) {
var httpPyynto
if (window.XMLHttpRequest) {
httpPyynto = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
} else {
httpPyynto = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
}
httpPyynto.open("GET", tiedostoNimi, false);
httpPyynto.send();
return kasitteleData(httpPyynto.responseText);
}
function kasitteleData(data) {
var paluuOlio = {};
data = data.replace (/\r\n/g, "\n");
data = data.replace (/\r/g, "\n");
var tietueet = data.split("\n");
for (var i = 0; i < tietueet.length; i++) {
var kentat = tietueet[i].split(";");
paluuOlio[kentat[0]] = {
nimi: kentat[1],
omistaja: kentat[2],
keskipiste: new google.maps.LatLng(kentat[3], kentat[4])
}
}
return paluuOlio;
}
function piirraYmpyrat(kartta) {
for (var katko in katkot) {
var ympyraAsetukset = {
strokeColor: '#FF0000', strokeOpacity: 0.4, strokeWeight: 1,
fillColor: '#FF0000', fillOpacity: 0.2,
map: kartta,
center: katkot[katko].keskipiste,
radius: ympyranSade
};
var paikkamerkkiAsetukset = {
map: kartta,
icon: {
strokeColor: '#FF0000', strokeOpacity: 0.4, strokeWeight: 1,
fillColor: '#FF0000', fillOpacity: 0.1,
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
scale: 4
},
position: katkot[katko].keskipiste,
title: katko + " - " + katkot[katko].nimi + " - " + katkot[katko].omistaja
};
new google.maps.Circle(ympyraAsetukset);
new google.maps.Marker(paikkamerkkiAsetukset);
}
}
function alustaKartta(){
var kartanPaikka = document.getElementById("omaKartta");
var kartanAsetukset = {
center: kartanKeskipiste,
zoom: kartanZoomaus,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var kartta = new google.maps.Map(kartanPaikka, kartanAsetukset);
piirraYmpyrat(kartta);
}
window.onload = alustaKartta;
</script>
</head>
<body>
<div id="omaKartta"></div>
</body>
</html>
SIvu lukee paikallisen csv-tiedoston, johon on tallennettu kätköjen naatit kukin omalle rivilleen tiedot puolipisteellä erotettuna esim.
Koodi: Valitse kaikki
GC35BKK;Uimamaisteri;koodi;65.85053;24.1554
GC35HBE;Arboretum;koodi;65.83163;24.1948
GC36T32;Kaakamavaara;koodi;66.14068;24.19712
Koordinaatit desimaalimuodossa ja puolipisteet ovat pakollisia. Muut voi jättää tyhjäksikin.
Koti-PC:llä täytyy olla webbipalvelin käytössä. Windows ympäristössä Ohjauspaneeli > Ohjelmat ja toiminnot > Ota Windowsin ominaisuuksia käyttöön > IIS palvelut > Word Wide Web -palvelut. Tallenna html sivu ja csv tiedostot kansioon C:\Inetpub\wwwroot. Avaa selaimessa osoitteessa
http://localhost/Ympyrat.html
Alla kuva esimerkkikuva ympyrästä:
