Aggiungere il proprio JavaScript

Regola

Aggiunge un po” di JavaScript (JS) è utile per una varietà di usi avanzati. Per esempio, è possibile:

  • nasconde alcuni elementi dell’interfaccia utente che non si desidera visualizzare in modo predefinito
  • aggiungere un pulsante personalizzato nell’interfaccia utente
  • aggiungere un popup quando il progetto viene aperto (per visualizzare i finanziatori, i crediti…)
  • evitare che la gente possa scaricare elementi della pagina cliccandovi sopra con il tasto destro, e naturalmente molto di più.

Prerequisiti

  • Questa funzione deve essere attivata dall’amministratore dell’istanza Lizmap.
  • La cartella media. Leggi come usare la cartella Media in Lizmap.

Configurazione del plugin

  • Nel tuo repository (ad esempio /home/data/repo1/myproject.qgs), dovresti avere queste directory:

    media
    |-- js
      |-- myproject
      |-- default
    
  • Tutto il codice JavaScript che copiate nella directory /home/data/rep1/media/js/myproject/ sarà eseguito da Lizmap solo per questo specifico progetto.

  • Tutto il codice JavaScript in default sarà eseguito per tutti i progetti.

  • Per permettere l’esecuzione di codice JavaScript, nell’interfaccia di amministrazione di Lizmap, si deve aggiungere il privilegio Allow themes for this repository.

Video tutorial

Questo video è un inizio veloce su come aggiungere un JavaScript per cambiare il pannello predefinito in Lizmap.

https://www.youtube.com/embed/xQQ34nvRZ-w

Libreria di scripts

Potete trovare alcuni esempi nel repository https://github.com/3liz/lizmap-javascript-scripts.

Inoltre, nella directory lizmap-web-client/lizmap/install/qgis/media/js/ (o in GitHub https://github.com/3liz/lizmap-web-client/tree/master/extra-modules/lizmapdemo/qgis-projects/demoqgis/media/js/montpellier), puoi trovare esempi di codice JavaScript adatto.

Rimuovi l’estensione .example e copiali nella tua cartella media/js/default/ per attivarli.

Eventi Javascript disponibili

Il codice Javascript può utilizzare molti eventi generati da Lizmap Web Client. Ecco una lista di tutti gli eventi disponibili, con le proprietà restituite.

Lizmap Web Client eventi disponibili
Nome evento Descrizione Proprietà restituite
treecreated Emesso quando l’albero dei livelli è stato creato nel pannello della leggenda  
mapcreated Emesso quando una mappa OpenLayers è stata creata  
layersadded Emesso quando livelli Openlayers sono stati aggiunti  
uicreated Emesso quando l’interfaccia è stata creata  
dockopened Emesso quando un dock è aperto (pannello a sinistra) id
dockclosed Emesso quando un dock è chiuso (pannello a sinistra) id
minidockopened Emesso quando un mini-dock (contenitore destro per gli strumenti) è aperto id
minidockclosed Emesso quando un mini-dock è chiuso id
bottomdockopened Emesso quando il dock in basso è aperto id
bottomdockclosed Emesso quando il dock in basso è chiuso id
lizmapbaselayerchanged Emesso quando il livello di base è stato modificato livello
lizmapswitcheritemselected Emesso quando un livello è stato evidenziato nel pannello della legenda dei livelli name | type | selected
layerstylechanged Emesso quando un stile livello è stato modificato featureType
lizmaplocatefeaturecanceled Emesso quando l’utente ha annullato lo strumento di localizzazione per livello featureType
lizmaplocatefeaturechanged Emesso quando l’utente ha selezionato un elemento nello strumento di localizzazione per livello featureType | featureId
lizmappopupdisplayed Emesso quando il contenuto del popup viene visualizzato  
lizmappopupallchildrendisplayed Emesso quando vengono visualizzati i popup di tutti i figli parentPopupElement | childPopupElements
lizmappopupdisplayed_inattributetable Emesso quando il contenuto del popup viene visualizzato nella tabella degli attributi (sotto-pannello destro)  
lizmapeditionformdisplayed Emesso quando viene visualizzato un modulo di modifica layerId | featureId | editionConfig
lizmapeditionfeaturecreated Emesso quando un elemento del livello è stato creato con lo strumento di modifica layerId
lizmapeditionfeaturemodified Emesso quando un elemento del livello è stato modificato con lo strumento di modifica layerId
lizmapeditionfeaturedeleted Emesso quando un elemento del livello è stato cancellato con lo strumento di modifica layerId | featureId
attributeLayersReady Emesso quando tutti i livelli da visualizzare nello strumento dei livelli degli attributi sono stati impostati livelli
attributeLayerContentReady Emesso quando una tabella per un livello è stata visualizzata nel dock inferiore featureType
layerfeaturehighlighted Emesso quando un elemento è stato evidenziato nella tabella degli attributi (rettangolo grigio). L’esecuzione manuale di questo evento forza un aggiornamento delle tabelle figlie, per il livello, se ne esistono sourceTable | featureType | fid
layerfeatureselected Emetti questo evento per innescare la selezione di un elemento per un livello, passando l’id dell’elemento. Una volta che la selezione è stata fatta, l’evento layerSelectionChanged viene emesso in ritorno. featureType | fid | updateDrawing
layerfeaturefilterselected Emettere questo evento per innescare il filtro di un livello per gli elementi selezionati. È necessario selezionare alcune caratteristiche prima di scatenare questo evento. Una volta che il filtro è applicato, Lizmap restituisce l’evento layerFilteredFeaturesChanged. featureType
layerFilteredFeaturesChanged Emesso quando un filtro è stato applicato alla mappa per un livello. Questo evento attiva anche il ridisegno della mappa e il contenuto delle tabelle degli attributi. featureType | featureIds | updateDrawing
layerFilterParamChanged Emesso quando i parametri richiesti dal WMS sono cambiati per un livello. Per esempio quando uno STILE o un FILTRO è stato modificato per il livello. featureType | filter | updateDrawing
layerfeatureremovefilter Emettere questo evento per rimuovere qualsiasi filtro applicato alla mappa. Una volta fatto, l’evento layerFilteredFeaturesChanged viene restituito e il contenuto della mappa e delle tabelle degli attributi viene aggiornato. featureType
layerSelectionChanged Emesso quando la selezione è stata cambiata per un livello. Questo attiva anche il ridisegno del contenuto della tabella degli attributi e del contenuto della mappa featureType | featureIds | updateDrawing
layerfeatureselectsearched Attiva questo evento per selezionare tutte le caratteristiche corrispondenti alle righe visualizzate della tabella degli attributi, che possono essere filtrate visivamente dall’utente inserendo alcuni caratteri nell’input del testo di ricerca. featureType | updateDrawing
layerfeatureunselectall Emetti questo evento per rimuovere tutte le caratteristiche dalla selezione di un livello. Una volta fatto, Lizmap risponde con l’evento layerSelectionChanged featureType | updateDrawing
lizmapexternalsearchitemselected Emesso quando l’utente ha selezionato un elemento elencato nei risultati dell’input di ricerca dell’intestazione feature
actionResultReceived Emesso quando un’azione popup Lizmap è stata eseguita e il risultato è stato ricevuto layerId | featureId | action | features

Ci sono anche alcune variabili che sono disponibili.

Variabili disponibili per Lizmap Web Client
Nome variabile Descrizione
lizUrls.media URL to get a media
lizUrls.params.repository Nome del repository attuale
lizUrls.params.project Nome del progetto attuale

Esempi

Collassa un gruppo nella legenda

lizMap.events.on({
    uicreated: function(e) {
        $('#group-groupname td a.expander').click();
    }
});

Disabilita il click destro

Aggiungi un file chiamato es. disableRightClick.js con il seguente codice:

lizMap.events.on({
   uicreated: function(e) {
      $('body').attr('oncontextmenu', 'return false;');
   }
});
  • Se vuoi che questo codice sia eseguito per tutti i progetti del tuo repository, devi copiare il file nella directory /home/data/rep1/media/js/default/ piuttosto che in /home/data/rep1/media/js/myproject/.

Invia il login user-ID corrente

Un esempio che permette di inviare l’ID utente di accesso corrente (e/o altri dati utente) alla colonna della tabella PostgreSQL, utilizzando lo strumento di edit:

var formPrefix = 'jforms_view_edition';

// Name of the QGIS vector layer fields which must contain the user info
// In the list below, replace the right side by your own fields in Lizmap
var userFields = {
   login: 'your_lizmap_user_login_field',
   firstname: 'your_lizmap_user_firstname_field',
   lastname: 'your_lizmap_user_lastname_field',
   organization: 'your_lizmap_user_organization_field'
};


lizMap.events.on({

   'lizmapeditionformdisplayed': function(e){

      // If user is logged in
      if( $('#info-user-login').length ){
            // Loop through the needed fields
            for( var f in userFields ){
               // If the user has some data for this property
               if( $('#info-user-' + f).text() ){
                  // If the field exists in the form
                  var fi = $('#' + formPrefix + '_' + userFields[f]);
                  if( fi.length ){
                        // Set val from lizmap user data
                        fi.val( $('#info-user-' + f).text() )
                        // Set disabled
                        fi.hide();
                  }
               }
            }
      }

   }

});

URL di un file statico

Se vuoi ottenere l’URL di un file statico, situato nella cartella Media:

var mediaUrl = OpenLayers.Util.urlAppend(
     lizUrls.media,
     OpenLayers.Util.getParameterString({
         "repository": lizUrls.params.repository,
         "project": lizUrls.params.project,
         "path": "picture.png"
     })
);

o

var domain = 'https://' + document.domain + lizUrls.basepath;
var image  = '<img src="' + domain + 'index.php/view/media/getMedia?repository=REPOSITORY&project=PROJECT&path=/media/logo.png" title="Logo" />';