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

• 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

This video is an quick start how to add a JavaScript to change the default panel in Lizmap.

Libreria di scripts

You can find some examples in the JavaScript library on GitHub.

Also, in the directory lizmap-web-client/lizmap/install/qgis/media/js/ (or in GitHub), you can find examples of suitable JavaScript code.

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

API documentation

An automated generated documentation of the JavaScript API is available on docs.3liz.org.

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	Generato 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 viene chiuso (pannello a sinistra)	id
minidockopened	Emesso quando un mini-dock (contenitore destro per gli strumenti) viene aperto	id
minidockclosed	Emesso quando un mini-dock viene chiuso	id
bottomdockopened	Emesso quando il dock in basso è aperto	id
bottomdockclosed	Emesso quando il dock in basso è chiuso	id
lizmapbaselayerchanged	Emesso quando il baselayer è stato modificato	layer
lizmapswitcheritemselected	Emesso quando un livello è stato evidenziato nel pannello della legenda dei livelli	name | type | selected
layerstylechanged	Emesso quando un layer style è 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 edit	layerId | featureId | editionConfig
lizmapeditionfeaturecreated	Emesso quando un elemento del livello è stato creato con lo strumento di edit	layerId
lizmapeditionfeaturemodified	Emesso quando un elemento del livello è stato modificato con lo strumento di edit	layerId
lizmapeditionfeaturedeleted	Emesso quando un elemento del livello è stato cancellato con lo strumento di edit	layerId | featureId
attributeLayersReady	Emesso quando tutti i livelli da visualizzare nello strumento dei livelli degli attributi sono stati impostati	layers
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

Legend API

For a given layer buildings :

var layer = lizMap.mainLizmap.state.rootMapGroup.getMapLayerByName('buildings');
// Name of the current loaded style
layer.wmsSelectedStyleName
// Toggle true or false the layer in the legend
layer.checked = true;

Please have a look to existing online demo, like the Paris by night

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'
};


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 media = '/media/image/logo.jpg';
// It can also be a media located in the common media folder such as
// var media = '../media/logo.png';
var url = lizUrls.media + '?repository=' + lizUrls.params.repository + '&project=' + lizUrls.params.project + '&path=' + media;
// console.log(url);
var image  = '<img src="' + url + '" title="Logo" style="display:inline;height:80px;margin:20px 10px;" />';

It’s possible to use a function from the OpenLayers library to help building the URL :

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