Utilización de GeoXML3
GeoXML3 nos permite procesar desde el navegador web con javascript un fichero XML que en nuestro caso será un KML y así adaptar su contenido a nuestras necesidades.
Entre las posibilidades que tenemos al cargar desde javascript el contenido de un archivo KML están:
<script type="text/javascript" charset="utf-8">
jQuery(function(){
Y en el body tiene que ir un DIV como el siguiente, no olvidar que las dimensiones y la posición son sólo de ejemplo:
<div style="width:400px;height:600px;">
Entre las posibilidades que tenemos al cargar desde javascript el contenido de un archivo KML están:
- Utilización selectiva del contenido del KML.
- Implementación de filtros de visualización.
- Modificación de contenido.
Para trabajar con estas librerías se deben incluir en nuestro sitio las siguientes librerías javascript.
jquery-1.9.1.js Descargar
geoxml3.js Descargar
La librería geoxml3 que yo les dejo para la descarga esta modificada para utilizar jQuery para realizar ajax, es por esto que indico que deben estar ambas librerías incluidas. Si optas por utilizar la librería geoxml3 de la pagina del proyecto o autor no es requerimiento incluir jQuery a tu proyecto, aunque a mi al hacer esto me arrojaba errores y es por ello opte por modificar los ajax para que utilice jQuery.
Código de inclusión
<script type="text/javascript" src="jquery-1.9.1.js" charset="utf-8">
<script type="text/javascript" src="geoxml3.js" charset="utf-8">
<script type="text/javascript" charset="utf-8">
jQuery(function(){
//Objeto con la configuración inicial del mapa
var mapOptions = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Se crea el mapa donde se insertaran los
//elementos del archivo KML
//elementos del archivo KML
var myMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
//Se crea el parser para el archivo KML
var myParser = new geoXML3.parser({
//Se indica el mapa donde se insertaran los
//elementos del KML
map: myMap,
processStyles: true,
//Función donde puedes tomar los marcadores y visualizarlos
//en el mapa, o almacenarlos para así luego filtrar, etc
createMarker: function(placemark){
//Como ejemplo sólo estamos mostrando todos
//los marcadores tal cual están en el KML
myParser.createMarker(placemark);
},
//Función que se ejecuta después de que fue
//completamente analizado el KML
afterParse:function(document){
alert("EL ARCHIVO KML YA FUE PROCESADO");
}
//Se crea el parser para el archivo KML
var myParser = new geoXML3.parser({
//Se indica el mapa donde se insertaran los
//elementos del KML
map: myMap,
processStyles: true,
//Función donde puedes tomar los marcadores y visualizarlos
//en el mapa, o almacenarlos para así luego filtrar, etc
createMarker: function(placemark){
//Como ejemplo sólo estamos mostrando todos
//los marcadores tal cual están en el KML
myParser.createMarker(placemark);
},
//Función que se ejecuta después de que fue
//completamente analizado el KML
afterParse:function(document){
alert("EL ARCHIVO KML YA FUE PROCESADO");
}
});
//Ahora le indicamos a nuestro parser la url de nuestro KML.
myParser.parse('url_de_nuestro_kml');
/*
Si el KML está alojado en un servidor externo debemos utilizar un proxy php que se encarge de descargar nuestro archivo.
Si este es el caso MIREN LA SIGUIENTE ENTRADA donde hay un ejemplo para la descarga de KML's desde google maps. ENLACE
*/
});
</script>
//Ahora le indicamos a nuestro parser la url de nuestro KML.
myParser.parse('url_de_nuestro_kml');
/*
Si el KML está alojado en un servidor externo debemos utilizar un proxy php que se encarge de descargar nuestro archivo.
Si este es el caso MIREN LA SIGUIENTE ENTRADA donde hay un ejemplo para la descarga de KML's desde google maps. ENLACE
*/
});
</script>
Y en el body tiene que ir un DIV como el siguiente, no olvidar que las dimensiones y la posición son sólo de ejemplo:
<div style="width:400px;height:600px;">
posted by Anubiz at 10:07 AM
0 comments
