SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

279 Plugins, 195 contribs sur SPIP-Zone, 31 visiteurs en ce moment

Accueil > Géo, carto, météo > Google Maps sobre SPIP

Google Maps sobre SPIP

7 octobre 2005 – par Martin Gaitan

Toutes les versions de cet article : [Español] [français] [italiano]

1 vote

Un tutorial para demostrar el uso de Google Maps a través de SPIP.

Google Maps es un servicio ofrecido por Google para hacer búsquedas localizadas, encontrar una dirección o recorrido, ofreciendo mapas satelitales de todo el mundo.

Google también pensó en las muchas otras aplicaciones que se podrían hacer con mapas y, en vez de invertir mucho tiempo y dinero cifrando todo y desarrollándolas, optó por permitir que la comunidad se encargase,

Así es que Google nos propone un API en javascript para insertar sus mapas en nuestros sitios, listos para hacer lo que queramos. Con esta herramienta, sitios como « beenmapped.com » florecieron en internet.

Cuando visité este sitio, pensé que la idea de marcar la procedencia de los visitantes de un sitio sobre un mapa sería una extensión simpática de SPIP. Desgraciadamente, la forma en que SPIP administra a los visitantes no permite hacer eso fácilmente. Por el contrario, es bastante fácil indicar los mensajes de foros de esta forma.

PNG

He aquí un tutorial que explica cómo utilizar Google Maps a través de esqueleto SPIP. El código propuesto sirve para indicar la procedencia de los mensajes de foros, pero no hay ninguna razón para no aplicar esto a otra información geoespacial.

Encontrarán una demostración online aquí :
-  http://6v8.gamboni.org/googlemapw.php
y aquí :
-  http://6v8.gamboni.org/googlemapw.p...

Para los impacientes, el esqueleto está al final del articulo.

API de Google Maps : ¿Cómo funciona ?

La interfaz para crear sus propios desarrollos google maps está bien documentada aquí. No obstante, para quiénes no comprenden inglés, he aquí una pequeña introducción.

Ante todo, es necesario obtener una clave para poder utilizar el servicio. Entonces comienza por ir allí :Maps API.

Diseñar el mapa

Desde una página HTML, el mapa será diseñado por el javascript de google dentro de una capa DIV vacía del documento. Es necesario entonces colocar y dimensionar esta capa en su código, por ejemplo :

<div id="map" style="width: 300px; height: 300px"></div>

A continuación se debe importar la librería proporcionada por Google utilizando la clave obtenida anteriormente :

<script src="http://maps.google.com/maps?file=api&v=1&key=su_clave" type="text/javascript"></script>

Esta librería porporciona una clase llamada GMap que se ocupa de generar los mapas. Se puede así dibujar un mapa en nuestro DIV vacío de la siguiente forma (donde "map" es el identificador del DIV en cuestión) :

var map = new GMap(document.getElementById("map"));

Tal como se indica en la documentación, es mejor probar que el navegador es compatible antes, por ejemplo con el siguiente código :

Añadir puntos sobre el mapa

Se pueden añadir puntos ("Marcadores" o "Markers" en inglés) sobre el mapa a través del objeto GMarker que toma un GPoint como parámetro. Por ejemplo :

//se crea un punto: longitud luego latitud
var point = new GPoint(0,45);
//se crea una marca simple
var mark = new GMarker(point);
//se lo añade sobre el mapa
map.addOverlay(mark);

Existen tres funciones para insertar "bocadillos" de información sobre un marcador

  1. openInfoWindow(htmlElem) que muestra el ID de un elemento de la página y su titulo en el bocadillo
  1. openInfoWindowHtml(htmlString) que toma una cadena en html para mostrar
  1. openInfoWindowXSLT(xmlElem,xsltURI) que, personalmente, no la he explorado

Se puede así hacer un simple "buenos días" sobre el mapa con el código

En este caso, el marcador tendrá siempre el bocadillo de información a la vista. En general, se querrá más bien mostrar el bocadillo si se presiona el marcador. Para eso se agrega un "listener", de la siguiente forma

GEvent.addListener(mark, "click", function() {
                       marker.openInfoWindowHtml("<b>Buenos días</b>");
                     });

Personalmente, encuentro más sencillo el método de insertar código complejo en el bocadillo de información utilizando un elemento de la página que es ocultado por defecto y es indicado por el código javascript :

Como se van a indicar muchos puntos sobre el mapa, será más sencillo llamar a una función para crear tantos marcadores como sea necesario :

Herramienta

Para este esqueleto, se deben administrar repeticiones un poco diferentes que las de {doublons} de SPIP.
Se debe introducir una función que permita almacenar los ID de los foros y recuperarlos más tarde para hacer un bucle :

Primera versión

El principio de este esqueleto es recuperar, gracias a un filtro, las coordenadas geográficas de los IP de los mensajes a través del sitio hostinfo y luego mostrar estos puntos sobre un mapa utilizando la API de Google Maps.

Se declaran en primer lugar filtros en mes_fonctions.php3 para recuperar la ubicación de los autores de cada mensaje (analizando su IP) :

  1. locateip consulta el sitio hostip y devuelve un cuadro de información sobre el IP en cuestión
  1. latitue, longitude, city y country nos permiten obtener la valiosa información de este cuadro.

En primer lugar se va a hacer un bucle que crea los puntos sobre el mapa utilizando la interfaz javascript de Google Maps :

<BOUCLE_gpoint(FORUMS) {par date} {0,50} {id_article?}>
 [
   var point#COMPTEUR_BOUCLE = new GPoint((#IP|locateip|longitude),
                                          [(#IP|locateip|latitude)]);
   var marker#COMPTEUR_BOUCLE = createMarker(point#COMPTEUR_BOUCLE,
                                             #ID_FORUM);
   map.addOverlay(marker#COMPTEUR_BOUCLE);
   [(#ID_FORUM|tampons{'trouve','forums','empile'})]
 ]
 [(#IP|locateip|latitude|sinon{#ID_FORUM}|tampons{'perdu','forums','empile'})]
</BOUCLE_gpoint>

El bucle generará el código para los 50 últimos mensajes del foro anotados en el sitio [1] :

 var point1 = new GPoint( 6.9167, 46.4333 );
 var marker1 = createMarker(point1,1024);
 map.addOverlay(marker1);

 var point2 = new GPoint( -73.5667, 45.5167 );
 var marker2 = createMarker(point2,1025);
 map.addOverlay(marker2);

Se crea un punto y un marcador para cada mensaje.

[(#IP|locateip|latitude)]) devuelve la latitud proporcionada por el filtro locateip. Se utiliza el filtro longitude para testear si la IP se ha localizado [2], sino, la última línea del código memoriza el identificador del foro que no se encontró en la pila.

Se hace a continuación un bucle « forums » que indica en una DIV oculta los mensajes de foros.

Se contiene cada mensaje en un DIV que lleva el identificador del mensaje. Entonces el código javascript generado anteriormente :

createMarker(point1,1024); creará una DIV con id=1024 conteniendo el mensaje de foro 1024. Entonces, incluso si se ocultan directamente al visitante, estos mensajes se indicarán cuando se presiona el marcador correspondiente.

Observe que esta lista se limita a los mensajes encontrados tomando el identificador de foro en el vector "localizados". Se indica también el número de mensajes de foros que no se localizaron en sobre el vector "perdidos" (« perdu ») :

aquí el esqueleto completo :

Atención

Este esqueleto, va a enviar peticiones a hostip cada vez que se recalcule, para localizar el IP. Puede decirse que la caché de SPIP nos salvará, pero como se trabaja con bucles forums, la página tendrá un delay nulo por defecto.

Así se corre el riesgo de sobrecargar al servidor de hostip y por consiguiente, que nuestras peticiones sean rechazadas. Este esqueleto es "bastante" sencillo e ilustrativo, pero no sirve realmente para una aplicación real en foros.

No obstante, este enfoque puede aplicarse a otras aplicaciones que no giren en torno a foros y aprovechar las ventajas del sistema de cacheo de SPIP, para no hacer peticiones pesadas en cada recálculo.

Les aconsejo leer la próxima sección que aborda la creación de una nueva tabla para almacenar la información géoespacial, y reducir así las consultas.

Hacer un caché de ubicaciones

Como no se puede usar la caché de SPIP para limitar el número de peticiones a hostip, debemos crear una propia.

Una nueva tabla

Para eso se va a añadir una nueva tabla en la base de spip que contendrá la información de ubicación de cada IP. Esta tabla será de la forma :

iplongitudelatitudecitycountry
193.252.104.39 3.1667 50.7 Roubaix FRANCE (FR)
202.22.239.172 166.45 -22.2667 Noumea NEW CALEDONIA (NC)

Es necesario pues crear esta tabla en la base de datos mysql. Esta es la consulta a ejecutar :

Luego se puede dar la información sobre la tabla a SPIP en el archivo mes_fonctions.php3 para poder construir bucles con ella.

Llenando la tabla

Ahora debemos llenar la nueva tabla consultando hostip. Para ello, vamos a modificar el filtro locateip para que haga la consulta correspondiente y almacene la respuesta en la base.

El filtro comprueba que se encontraron una longitud y una latitud para la IP y luego guarda estos valores en la base.

Los bucles

Vamos a modificar el bucle que generaba el código javascript con los puntos sobre el mapa.

Se hicieron varias modificaciones :

-  # ahora, IP crea los marcadores una única vez por IP, y el identificador del DIV es pues #IP y no #ID_FORUM y se utiliza (# IP|unique) para no indicar un IP que ya se trató,

  1. ya no se indica la información geoespacial con locateip. Se utiliza un bucle IP_LOCATION y las nuevas balizas introducidas con la nueva tabla para eso. Si el bucle no tiene resultados (no existe la IP en nuestra tabla), entonces sí se usa el filtro locateip para conseguir los datos necesarios

Se guardan en la base todas las entradas encontradas, pero a veces hostip no es capaz de devolver todos los datos y llena la tabla con información incompleta. Entonces se hace un bucle sobre la información incompleta para ver si la base de datos de hostip tiene nueva información :

Finalmente un bucle de los mensajes de foro encontrados para crear los DIV de cada globito de información :

Se proporciona un vínculo para verificar los datos en hostip y otro para corregir los datos en la base si tiene necesidad. La página corrigerIP.php simplemente va borrar el registro de nuestra base y redirigirnos hacia el sitio de hostip

El esqueleto final

El esqueleto final aporta otras funcionalidades. Por ejemplo, se puede entrar un identificador de artículo en el url y sólo se indicarán los mensajes en el foro de ese artículo, como así también el texto en el idioma solicitado por el usuario.

GZ - 4 ko
Squelette Complet
  1. décompresser,
  2. placer googlemap.php3, googlemap_fonctions.php3 et corrigerIP.php3 à la racine de votre site
  3. placer googlemap.html et googlemap.css dans votre repertoire squelettes,
  4. copier les fichiers de traductions googlemap_XX.php3 dans votre répertoire ecrire/lang/

P.-S.

El sitio How to Use Google Maps EZ propone otra manera de utilizar el API Google Maps haciendo abstracción del javascript. Con esta librería, todos los pedidos de adición de marcadores, etc, se hacen directamente en código HTML.

Entonces se podría imaginar este mismo esqueleto usando sólo HTML con esta librería.

Notes

[1o sobre el artículo especificado en el url gracias a {id_article?}

[2de ahí los corchetes que rodean al código

Retour en haut de la page

Tout afficher

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Rubriqueur

    1er octobre – commentaires

    Créer rapidement une arborescence complète de rubriques Ce plugin permet de créer rapidement une arborescence complète de rubriques à partir d’une simple liste saisie dans un formulaire. L’arborescence peut être créée à la racine du site ou dans (...)

  • Newsletters

    16 janvier 2013 – 261 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, d’un (...)

  • Leadescent (Squelette)

    28 avril 2012 – 64 commentaires

    Présentation : Ce squelette permet de modifier la page d’index du thème Leadescent (adapté du thème Wordpress du même nom réalisé par Padd Solutions). Voir une démo du thème et du squelette Leadescent. Il est recommandé d’installer le thème associé à (...)

  • Mises en exposant

    28 décembre 2006 – 101 commentaires

    Cet outil du Couteau Suisse améliore le rendu typographique des abréviations courantes, en mettant en exposant les éléments nécessaires (ainsi, Mme devient Mme) et en corrigeant les erreurs courantes (2e ou 2e, par exemple, deviennent 2e, seule (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 695 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)