ATTENTION : This post started from a
mistake.
Demos are updated with the correct use of clearMarkers (which is bug free).
Carlo and I, working together on this application have met a problem hard to isolate and solve.
Markerclusterer library (of gmaps-utility-library-dev) has a bug.
Let me try to explain the problem.
Each cluster has an event associated with it (in fact, the click event on the cluster triggers the “zoom in” on the map and the cluster splits itself in markers or smaller clusters).
When, from the outside (for example, within a form), I clean the map – map.clearOverlays(); – and then I refill it with a new search, I’m not able anymore to destroy the clusters.
It seems the clusters are disappeared but, in fact, zooming in or out, they come back.
Look at the two following pictures.
STEP 1
STEP 2
ZOOM OUT
The first and second picture shows the clusters correctly.
The third picture instead (demo bug) shows the clusters of the second search AND the ones of the first (after having done “zoom out”).
The whole thing is due to a bug in the JavaScript garbage collection (I suppose…).
The object has been “subscribed” to an event. The object is destroyed but after the first trigger of that event, the object come back.
To fix this strange bug (it’s even hard to reproduce it, without a form!) it’s mandatory to provide to the markerclusterer library a method to correctly destroy the clusters.
The patch (the diff file has been written again the 1159 revision) adds the destroy method.
Before doing a new search, it is required to call
map.clearOverlays();
AND
markerCluster.destroy();
where markerCluster is your instance of MarkerClusterer(map, points);
The destroy() method calls:
this.clearMarkers();
GEvent.removeListener(mcfn_);
mcfn_ = null;
me_ = null;
I reported the bug to the developers with a demo of the bug itself (and a second demo with the fix). I hope my patch could help people to not get mad on it.
SOMMARIO
Per chi non avesse la pazienza di leggere, o per chi semplicemente non è italiano, o per gli autori di Jcrop, qui sotto c’è un elenco di link in cui i linguaggi sono universali: html, javascript (jQuery) e qualche proprietà di css.
DOWNLOAD
DEMOS
IL TAG MAP
Il tag map, e il “sottotag” area permettono di “disegnare” link all’interno di un immagine.
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
Qui c’è un esempio di utilizzo.
LIMITI DEL TAG MAP
Il limite principale di questo tag è a mio modo di vedere l’impossibilità di applicare stili ai tag “AREA” presenti all’interno.
In pratica l’unico indizio visivo del link all’interno di una certa porzione di immagine, che viene dato all’utente, è il cursore.
Non è possibile anche solo applicare bordi.
Tutto questo fondamentalmente perchè il tag map permette di creare aree di tipo “rect” (e non sarebbe un problema per un browser disegnarne il bordo), “circle”, “poly”.
Quindi il browser dovrebbe saper disegnare (canvas).
Altro limite, ma non direttamente del tag, è la difficoltà di scrivere le coordinate.
ALTERNATIVE AL TAG MAP
Listapart ci aveva già pensato, e suggerisce di creare qualcosa di completamente diverso. Javascript legge una lista, disegna dei punti in posizione assoluta, e al click (o al mouseover) visulizza un tooltip.
L’idea è quella.
Siccome il mio problema comunque, era di dare in mano ad un redattore uno strumento per inserire i punti, ho iniziato a fare scouting di plugins che disegnassero aree sopra un’ immagine.
JQUERY JCROP
Ecco che arrivo a Jcrop.
Jcrop è un plugin jQuery principalmente pensato per tagliare immagini.
Inizialmente non pensavo di usarlo come sostituto dei tag map/area.
Pensavo solo di usare le coordinate che restuitiva, salvarle nel database e successivamente creare le aree lato “frontoffice” leggendo dal database le coordinate salvate dal redattore della mappa.
Quindi l’avevo scelto come strumento di backoffice.
Qui un semplice utilizzo di Jcrop con le coordinate restituite in campi form.
JCROP COME SOSTITUTO DEL TAG MAP
Alla fine anche per la presentazione ho deciso di provare ad utilizzare il plugin.
Questo è il risultato.
Una serie di link presi da una lista con le coordinate passate via metadata.
L’implementazione è semplice (anche se le coordinate non sono proprio user-frendly).
L’ESEMPIO BASE
Il container:
<div class="jcropmap"></div>
L’immagine:
<img src="img/italia2006.jpg" alt="italia2006" />
La lista di aree:
<ul>
<li><a class="{coords : [33,111,75,176,42,65]}" href="#">Gattuso</a></li>
<li><a class="{coords : [93,104,144,180,51,76]}" href="#">Pirlo</a></li>
<li><a class="{coords : [171,103,224,183,53,80]}" href="#">Zambrotta</a></li>
<li><a class="{coords : [245,102,318,191,73,89]}" href="#">Camoranesi</a></li>
<li><a class="{coords : [326,100,397,190,71,90]}" href="#">Cannavaro</a></li>
<li><a class="{coords : [402,98,456,174,54,76]}" href="#">Perrotta</a></li>
<li><a class="{coords : [410,14,464,90,54,76]}" href="#">Totti</a></li>
<li><a class="{coords : [345,7,399,83,54,76]}" href="#">Grosso</a></li>
<li><a class="{coords : [274,4,328,80,54,76]}" href="#">Toni</a></li>
<li><a class="{coords : [211,4,265,80,54,76]}" href="#">Barzagli</a></li>
<li><a class="{coords : [149,2,203,78,54,76]}" href="#">Buffon</a></li>
</ul>
Il JS NELL’HEAD:
jQuery(window).load(function(){
jQuery(".jcropmap").jcropmap();
});
NB:
non ci sono regole forti per questo plugin per la struttura html. L’ importante è scegliere una classe o un id per il wrapper container e richiamarla nell’head quando si avvia il costruttore. All’interno di questo wrapper ricordarsi solo che i link vengono cercati all’interno di un ul, e l’immagine DEVE avere come classe jcropbox (sovrascrivibile da opzione).
CREARE LE AREE
Visto che non è proprio semplice scrivere le coordinate delle aree, ho creato una demo con una banale gestione della sessione.
Questa demo non è un plugin.
E’ solo uno spunto per crearsi la propria gestione dei link.
Sarà quindi necessario implementare un servizio che ad esempio salvi le informazioni su db.
VISUALIZZARE IL RISULTATO
Una volta inserite le coordinate nella demo precedente, potrete vedere il risultato dei vostri “tag” qui.
EXTRA : SHAPES, OPTIONS, RELEASE
Ho aggiunto anche la possibilità di visualizzare le aree all’interno del “viewport” di Jcrop, e di sovrascrivere le opzioni che vengono passate. Un esempio.
Qui invece mostro come ho agganciato il metodo release dell’oggetto costruito all’interno del plugin (click sul body).
Non è una tecnica pulitissima. Ma nemmeno quella di Jcrop mi sembra elegante.
FEEDBACK
Se ci sarà un certo riscontro a questo post, magari versionerò il plugin, esporrò meglio le opzioni, e magari anche un API pubblica di metodi.
Fino ad allora per maggiori informazioni o chiedete qui postando un commento, oppure guardate il codice sorgente.
