Icone personalizzate con Leaflet Map Plugin

Attenzione: questo metodo è obsoleto, Leaflet ha aggiunto la possibilità di specificare delle icone diverse senza dover apportare alcuna modifica 🙂

Per motivi di comodità, ho preferito installare il plugin Leaflet Map per gestire le mappe che creo su questo blog. Mentre prima creavo delle pagine separate, in questo modo posso integrare le mappe direttamente negli articoli e nelle pagine, tramite semplici shortcode che mi rendono la vita molto più facile.

Sebbene il plugin permetta praticamente tutte le funzionalità di Leaflet, ne manca una fondamentale: non permette di usare le icone personalizzate! Questo vuol dire che per ogni mappa avremo sempre la solita iconcina blu, e si viene condizionati nella creazione di mappe più complesse.

L’utente nelsson ha trovato una soluzione ingegnosa, aggiungendo l’opzione iconurl. Come suggerisce il nome, se volete usare un marker personalizzato, vi basta inserire il suo URL ed il gioco è fatto. Ma come faccio a modificare il plugin che ho installato?

Vediamolo, che è semplice semplice.

Per prima cosa, procuratevi le icone alternative. Se vi piace lo stile dell’icona predefinita, qui trovate un set della stessa icona di colori e dimensioni diverse. Ovviamente, girando in rete trovate numerose icone con stili diversi, senza nulla togliere al fatto che potete anche crearvele da voi. Caricate dunque le immagini sul vostro sito. Io ho caricato tutto nella cartella images presente nel path del plugin, ossia:

/wp-content/plugin/leaflet-map

Adesso, dobbiamo scaricare il file leaflet-map.php. E’ li che agiremo per creare la nuova funzione, associandola direttamente al marker. Dovremo inserire appena 3 righe di codice per rendere questa modifica funzionante.

Per prima cosa, rechiamoci alla riga numero 558, ed aggiungiamo:

$iconurl = empty($iconurl) ? 'http://iltuosito.it/wp-content/plugins/leaflet-map/images/blue.png' : $iconurl;

In questo modo, aggiungiamo l’opzione iconurl alle altre due funzioni già definite, ossia draggable e visible. Siamo nella parte di codice che definisce cosa fare se le opzioni sono null, cioè vuote o non specificate: state quindi scegliendo l’icona standard che andrete ad utilizzare se non ne specificate una diversa. Io ho lasciato di default il marker blu, ma potete sceglierne una qualunque.

Poco più sotto, alla riga 572, aggiungiamo:

var myIcon = L.icon({
iconUrl: '$iconurl',
iconSize: [25, 41],
});

In questo caso stiamo aggiungendo la variabile che associa la nostra nuova funzione all’icona. In questo modo non si otterranno errori di sorta quando si inserisce o modifica il marker. L’iconSize è quella predefinita, 25 è la dimensione standard, mentre 41 è l’equivalente del 2X. Potete cambiare i valori a vostro piacimento.

Infine, alla riga 578 aggiungiamo:

marker = L.marker([{$lat}, {$lng}], {icon: myIcon}, { draggable : draggable }),

In questo modo, facciamo capire al codice che è previsto l’inserimento dello shortcode iconurl, e che questo deve rispettare il parametro che inseriremo. A questo punto, possiamo salvare il file e caricarlo sul nostro sito. Se ci sono degli errori, la pagina del vostro sito rimarra interamente bianca. Non vi allarmate, ma controllate eventualmente gli apici e gli apostrofi, che spesso vengono modificati quando si fa copia e incolla. Se riuscite a vedere il vostro sito, il gioco è fatto.

Come faccio dunque a vedere delle icone diverse? Basta inserire nel vostro shortcode l’opzione iconulr:

In questo modo massimizzate incredibilmente la possibilità di personalizzazione della vostra mappa. Potete creare mappe personalizzate con icone per qualunque cosa, o semplicemente limitarvi ad usare colori diversi.

Speriamo che questa modifica venga inserita direttamente nel plugin: anche se è molto semplice da apportare, la possibilità di scegliere l’icona quando la si posiziona sarebbe il massimo.