diploD » KML http://www.diplod.it by Davide Del Monte Fri, 13 Feb 2015 14:26:10 +0000 it-IT hourly 1 https://wordpress.org/?v=3.9.40 Google Earth Plugin: visualizzare KML su una pagina web HTML http://www.diplod.it/2009/08/16/google-earth-plugin-visualizzare-kml-su-una-pagina-web-html/ http://www.diplod.it/2009/08/16/google-earth-plugin-visualizzare-kml-su-una-pagina-web-html/#comments Sun, 16 Aug 2009 18:55:18 +0000 http://www.diplod.it/?p=791 earth-plugin

Google Earth è diventato ormai uno strumento dalle mille potenzialità: esplorazione degli oceani, fotografie, edifici e terreni in 3D, visione dei luoghi nel tempo, registrazione dello schermo, sono solo alcune delle meraviglie del prodotto.

La possibilità di utilizzare file KML generati da altri è un’altra delle cose che rendono Google Earth uno strumento eccezionale per far visualizzare percorsi, itinerari, foto dei luoghi e quant’altro. Le informazioni geolocalizzate permettono di dare al fruitore un contributo unico: vedere i posti vale molto di più che descriverli.

Ebbene, da qualche tempo è disponibile un plugin che permette di portare Google Earth direttamente sulle pagine web, grazie alle Google Earth API. E’ infatti possibile inserire in una pagina web una finestra che visualizza il famoso mondo 3D, caricando un file KML.
Nel futuro non saremo più legati al 2D delle famosissime mappe di Google, ma potremo creare mashup direttamente in 3D. Gli esempi di codice sono davvero vasti e ben documentati.

Ecco il codice dell’esempio sotto, commentato nel javascript che carica il plugin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
<head>
<title>Esempio Plugin Google Earth con file KML</title>
<script src="http://www.google.com/jsapi?key=LaTuaAPIKey"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
//inizializza la mappa prendendo come riferimento l'ID del div che la contiene: map3d
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// aggiunge i controlli di navigazione
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// aggiunge alcuni livelli: confini e strade
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
// codice per caricare e far visualizzare il file KML
function finished(object) {
if (!object) {
// Gestione degli errori per prevenire i deadlock di alcuni browsers
setTimeout(function() {
alert('Bad or null KML.');
}, 0);
return;
}
ge.getFeatures().appendChild(object);
// imposta latitudine, longitudine e zoom
var la = ge.createLookAt('');
la.set(44.258300, 10.411550, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 70, 400);
ge.getView().setAbstractView(la);
}
// carica il file KML
var url = 'http://www.diplod.it/wp-content/uploads/2009/08/AlbaCusna.kml';
google.earth.fetchKml(ge, url, finished);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="width: 500px; height: 380px;"></div>
</body>
</html>
Ovviamente per far andare il tutto è necessario ottenere una API Key, fornita gratuitamente da Google per il proprio dominio.
Il giochino è davvero meraviglioso, ecco come appare il tutto:

Se vi interessa sapere come ho fatto a generare questo file KML, provate a sbirciare qui: con un cellulare Nokia potrebbe aprirsi un altro mondo.. ;)

]]> http://www.diplod.it/2009/08/16/google-earth-plugin-visualizzare-kml-su-una-pagina-web-html/feed/ 4