SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 261 visiteurs en ce moment

Home > Géo, carto, météo > Google Maps e SPIP

Google Maps e SPIP

5 dicembre 2005 – di carlo – commentaires

Tutte le versioni di questo articolo: [Español] [français] [italiano]

4 votes

Un tutorial per dimostrare l’uso di Google Maps con SPIP.

Google Maps è un servizio offerto da Google per fare ricerche localizzate, trovare un indirizzo o un itinerario.

Google ha pensato anche a tutti gli altri possibili utilizzi di una mappa e, invece di spendere tempo ed energia a codificare tutto, ha deciso di lasciare che la comunità se ne faccia liberamente carico.

Così, Google propone quella che viene chiamata un’API in javascript per mettere una mappa sul vostro sito e farne più o meno quello che volete. E’ così che sono sbocciati in Internet siti come «beenmapped.com - Bookmark the Earth!».

Quando ho visto questo sito, mi sono detto che l’idea di mostrare su una mappa la provenienza dei visitatori del sito sarebbe stata una simpatica estensione di SPIP. Purtroppo, il modo in cui SPIP gestisce le visite non permette di fare ciò in maniera semplice. Ma al contrario è abbastanza facile mostrare sulla mappa la provenienza dei messaggi del forum.

PNG

Ecco quindi un tutorial che spiega come utilizzare Google Maps con un modello di layout SPIP. Il codice proposto serve a mostrare sulla mappa la provenienza dei messaggi del forum, ma non ci sono ragioni per cui questo non possa essere applicato ad altre informazioni geospaziali.

Potete vedere una demo live qua:
-  http://6v8.gamboni.org/googlemapw.php
e qua:
-  http://6v8.gamboni.org/googlemapw.p...

Per gli impazienti, il modello di layout è alla fine dell"articolo.

Google Maps API: come funziona?

L’interfaccia per creare le vostre mappe con google maps è spiegata molto bene qui. Ma per chi non è a suo agio con l’inglese, ecco una piccola introduzione.

Innanzi tutto bisogna ottenere una chiave per utilizzare il servizio: cominciate allora andando qui: Maps API key.

Disegnare la mappa

In una pagina HTML, la mappa sarà disegnata dal javascript google in un DIV vuoto del documento. Bisogna quindi posizionare e dimensionare questo nel vostro codice, per esempio:

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

Poi bisogna importare la libreria fornita da Google utilizzando la chiave ottenuta prima:

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

Questa libreria mette a disposizione una classe GMap che si occupa di gestire la mappa; diventa possibile così disegnare una mappa nel nostro DIV vuoto nel modo seguente (dove “map” è l’identificativo del DIV in questione):

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

Come indicato nella documentazione, è meglio testare la compatibilità del browser prima di fare l’inserimento, si avrà quindi nel codice di esempio:

Aggiungere punti sulla mappa

Si possono aggiungere dei segnalini (Markers) sulla mappa con l’oggetto GMarker che accetta un GPoint come parametro, ad esempio:

//si crea un punto: longitudine più latitudine
var point = new GPoint(0,45);
//sopra si crea un semplice marker
var mark = new GMarker(point);
// lo si aggiunge alla mappa
map.addOverlay(mark);

Ci sono tre funzioni per far apparire delle «finestre» di informazione su un marker:

  1. openInfoWindow(htmlElem) che prende l’id di un elemento della pagina e lo inserisce sopra il marker,
  2. openInfoWindowHtml(htmlString) che prende un codice HTML da inserire nella finestra di info,
  3. openInfoWindowXSLT(xmlElem,xsltURI) che non ho ancora esplorato personalmente.

Così si può fare un semplice «Hello World» sulla mappa con il codice:

In questo esempio il marker avrà sempre una finestra di info sopra. In generale si preferirà piuttosto che la finestra si apra se si clicca sul marker; per far questo si aggiunge allora un «listener», in questo modo:

GEvent.addListener(mark, "click", function() {
                       marker.openInfoWindowHtml("<b>Hello World</b>");
                     });

Personalmente, per mettere un codice complesso in una finestra di info, trovo più semplice utilizzare un elemento della pagina nascosto di default e mostrato dal codice javascript:

Nel momento in cui si vorranno inserire molti punti sulla mappa, sarà più semplice richiamare una funzione per creare dei markers «come si deve»:

Strumenti

Per questo modello di layout, è necessario gestire i doppioni in modo un po’ diverso dai {doublons} SPIP. Viene introdotto un filtro «tampon» che ci permetterà di memorizzare degli id di forum e di recuperarli più tardi per fare un ciclo:

Prima versione

Il principio di questo modello di layout è quello di recuperare, grazie ad un filtro, le coordinate geografiche degli IP degli autori del messaggio sul sito hostinfo e di inserire i messaggi al punto giusto sulla mappa utilizzando l’API di Google.

Prima dichiariamo dei filtri in mes_fonctions per recuperare la provenienza degli autori di messaggi:

  1. locateip interroga il sito hostip et restituisce un array di informazioni sull’ip in questione,
  2. latitude, longitude, city e country ci permettono di selezionare le informazioni che ci interessano dall’array.

Ora facciamo un ciclo che crei i punti sula carta utilizzando l’interfaccia javascript google:

<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>

questo ciclo genererà quindi un codice di questo tipo per gli ultimi 50 messaggi postati sul sito [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);

Per ogni messaggio viene creato un punto e un marker.

[(#IP|locateip|latitude)]) restituisce la latitudine fornita dal filtro locateip. Utilizziamo il filtro longitude per testare se l’IP è stato localizzato [2], altrimenti l’ultima linea del codice memorizza l’identificativo del forum che non è stato trovato tramite il filtro «tampon».

Poi facciamo un ciclo forum che inserirà in un DIV nascosto i messaggi dei forum.

Ogni messaggio è contenuto in un DIV marcato con l’identificativo del forum. Così il codice javascript generato prima: createMarker(point1,1024); produrrà il DIV con id 1024 contenente il messaggio di forum 1024. In questo modo, anche se nascosti al visitatore, questi messaggi divengono visibili quando si clicca sul marker corrispondente.

Notate che questa lista è limitata ai messaggi il cui identificativo
forum è stato precedentemente memorizzato dal filtro «tampon» con il
parametro «trouve». In fine si pubblica il numero di messaggi di forum
non localizzati, richiamando gli identificativi
memorizzati dal filtro «tampon» con il parametro «perdu»::

ecco infine il modello di layout completo:

Attenzione

Questo layout, ogni volta che ricalcola la pagina, invia delle richieste a hostip per localizzare gli IP. Si potrebbe pensare che la cache di SPIP ci verrà in aiuto, ma dal momento che lavoriamo con dei cicli forum, la pagina avrà un ritardo nullo di default.

Si rischia quindi di sovraccaricare il server di hostip e di farsi bannare da questo. Questo modello di layout è quindi «abbastanza» semplice, ma in realtà non è l’ideale per essere applicato a dei forum reali.

Questo approccio può essere tuttavia utilizzato con altre applicazioni che non siano centrate sui forum — e potranno quindi trarre vantaggio dalla cache di SPIP — o che non facciano richieste pesanti ad ogni calcolo di posizione.

Vi consiglio quindi di leggere la prossima sezione che affronta la creazione di una nuova tabella nel database che memorizzi le informazioni geospaziali.


Fare una cache delle locazioni

Dato che non possiamo contare sulla cache di SPIP per limitare il numero di richieste a hostip, dobbiamo creare la nostra cache.

Una nuova tabella

Per questo aggiungiamo una nuova tabella al database di SPIP che conterrà le informazioni di localizzazione di ogni IP. Avremo una tabella che si presenterà così:

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

Dobbiamo quindi creare la tabella nel database MySQL, ecco l’istruzione da far eseguire:

Si daranno poi le informazioni sulla nuova tabella a SPIP nel file mes_fonctions.php3 perché possa costruire dei cicli su di essa.

Popolare la tabella

Ora dobbiamo popolare la nuova tabella interrogando hostip. Per far questo modifichiamo il filtro locateip perché possa interrogare hostip e memorizzare il risultato nel database.

Il filtro verifica che siano stati trovati una longitudine e una latitudine e poi scrive i valori trovati nel database.

Alcuni cicli modificati di conseguenza

Dobbiamo modificare il ciclo che genera il codice javascript che posiziona i punti sulla mappa.

Sono state fatte diverse modifiche:

  1. ora i marker sono creati una sola volta per ogni IP, l’identificativo del DIV da pubblicare diviene quindi #IP e non più #ID_FORUM e si utilizza (#IP|unique) per non ripetere la pubblicazione degli IP già processati,
  2. non pubblichiamo più le informazioni geospaziali con locateip. Utilizziamo invece un ciclo IP_LOCATION e i nuovi segnaposti introdotti per questo con la creazione della nuova tabella. Se il ciclo non ha risultati, allora richiamiamo il filtro locateip per popolare la tabella.

Nella tabella andranno tutte le richieste trovate, ma a volte hostip non riesce a restituire le coordinate e la tabella viene popolata con informazioni incomplete; faremo quindi un ciclo sulle informazioni incomplete per verificare se il database di hostip ha nuove informazioni:

Infine facciamo un ciclo sui messaggi di forum trovati per creare i DIV per le finestre di informazioni:

Creiamo un link per verificare i dati in hostip e uno per correggere i dati nella nostra tabella se ce ne fosse la necessità. La pagina corrigerIP.php semplicemente cancella il dato dalla nostra tabella e rinvia verso il sito di hostip:

Il modello di layout finale

Il modello di layout finale ha anche altre funzionalità. Per esempio è possibile scrivere l’id di un articolo nell’URL e trovare i forum legati all’articolo e alle sue traduzioni, così come il testo della lingua richiesta dall’utente.

GZ - 4 Kb
Squelette Complet
Modello di layout completo
  1. espandere,
  2. mettere googlemap.php3, googlemap_fonctions.php3 e orrigerIP.php3
    alla radice del vostro sito
  3. mettere googlemap.html e googlemap.css nella vostra cartella
    squelettes,
  4. copiare i files di traduziones googlemap_XX.php3 nella vostra
    cartella ecrire/lang/

P.S.

Il sito How to Use Google Maps EZ propone un altro modo di utilizzo dell’API Google Maps facendo a meno del javascript. Con questa libreria tutte le istruzioni di aggiunta di marker ecc.. vengono fatte con codice HTML.

Potremmo quindi pensare a costruire lo stesso tipo di modello di layout utilizzando solo html con quella libreria.

Note

[1o sull’articolo specificato nell’URL con {id_article?}

[2da cui le virgolette che racchiudono il codice.

Dernière modification de cette page le 3 agosto 2009

Retour en haut de la page

Tuoi commenti

  • su 21 aprile 2007 a 00:50, di ? In risposta a: Google Maps e Spip

    Avrei bisogno della tua assistenza -a pagamento- per l’associazione di Google Maps ad uno script php (predisposto).
    Per favore scrivi se puoi a: info@psicologi-psicoterapeuti.it

    Grazie

    Rispondere al messaggio

  • su 11 luglio 2006 a 15:15, di humpty In risposta a: Google Maps e Spip

    Ciao a tutti, ho letto attentamente l’articolo l’ho testato e sembra funzionare benissimo.
    Io avrei bisogno di «piegare» questo processo ad usi di tipo, credo, più semplice. Cerco di spiegarlo.
    Vorrei creare una articolo in cui i vari redattori inseriscono articoli di descrizione di locali e luoghi di incontro. Vorrei fare in modo che, oltre all’elenco nudo e crudo, si potesse usare una googlemap che, per rogni locale descritto, mette un marker. Ricapitolando.

    Il redattore inserisce un articolo nella rubrica «locali» in cui inserisce foto, descrizione e via del locale. Come posso fare per far markare sulla googlemap il nuovo locale inserito? E’ possibile fare una cosa del genere??

    Spero d’esser stato chiaro

    Ciao

    Claudio

    • su 11 luglio 2006 a 19:44, di carlo In risposta a: Google Maps e Spip

      da un paio di mesi Google ha mappato tutta l’Europa... e da non molto ha messo a disposizione l’API ad hoc, quindi si potrebbe pensare di usare un campo per mettere l’indirizzo del locale e passarlo, recuperato da una boucle, al Javascript...

      Purtroppo io ho cominciato a mettere i miei dati quando l’API non era ancora pubblica... avrò bisogno di una cosa simile, ma indirizzata a partecipanti al forum, e contavo di realizzarla in php... conto di darci un’occhiata ad agosto.

      Fammi sapere se vai avanti nello sviluppo di quest’altra soluzione

      Carlo

    Rispondere al messaggio

Rispondere all’articolo

Chi sei?

Per mostrare qui il tuo avatar, registralo prima su gravatar.com (gratis e indolore). Non dimenticare di fornire il tuo indirizzo email.

Inserisci qui il tuo commento Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Aggiungi un documento

Retour en haut de la page

Ça discute par ici

  • (fr) Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • (fr) Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • (fr) Adaptive Images

    15 novembre 2013 – 69 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • (fr) Social tags

    8 septembre 2008 – 428 commentaires

    Le plugin Social Tags permet d’ajouter des icônes de partage de liens vers les sites tels que Digg, Facebook, Delicious.... Une fois le plugin installé et activé (voir doc.), le choix des sites se fait via un menu de configuration. Insertion (...)

  • (fr) Module de Paiement Stripe

    17 octobre – commentaires

    Stripe est un prestataire de paiement externe https://stripe.com/fr qui propose une API moderne et une interface de paiement extrêmement conviviale et efficace. Ce module permet les paiements à l’acte et les paiement récurrents. Configuration (...)