Privacy Policy Cookie Policy
You are here
Home > ArcGis > Tutorial: ArcGis e javascript: spostarsi nella mappa.

Tutorial: ArcGis e javascript: spostarsi nella mappa.

sandbox ArcGis


Tra le domande più importanti della vita troviamo sicuramente: “Chi siamo?” e “quale è il nostro scopo su
questa terra?” ma inché non riusciremo a trovare una risposta a queste domande cerchiamo almeno
di rispondere alla domanda: “dove ci troviamo!”

Salve, volevo introdurvi con questa frase un progetto che ho iniziato a vedere in questi giorni.
Sarà il primo articolo che scrivo su questo argomento quindi vi prego di essere buoni.

Oggi vedremo come si può programmare Arcgis in javascript per inserire dei punti nella mappa
e un pulsante che se premuto centra la mappa sul punto. pronti?, iniziamo!.

ArcGIS è altro che un sistema geografico in grado di disegnare dati
e condividere informazioni geografiche.
Noi accederemo a queste informazioni grazie alle API fornite dai i produttori del sistema per le quali trovate molte informazioni nella documentazione del sito ufficiale.
Il nome di queste API è ESRI.

Quello che faremo e generare una pagina html precompilata dal sito che all’interno mostrerà la nostra mappa creata con arcgis e modificata tramite librerie javascript e codice html.

Generare una mappa è alquanto semplice:

  • 1) Si ci collega a https://www.arcgis.com/index.html e si accede tramite un account.
    Per chi possiede facebook e google, realizzare un nuovo account è un processo semplice e veloce è infatti sufficiente
    cliccare su “CREA UN ACCOUNT PUBBLICO” e scegliere la registrazione tramite uno dei due applicativi.
    Segendo le istruzioni, il processo di registrazione richiedere pochi semplici passi.
  • 2) Cliccare in basso su “ArcGIS for Developer” e nella pagina che si aprirà cliccare sulla
    icona di javascript.
  • 3) In basso scegliere nel riquadro “Create your first app” la voce “intro to 2D map”.
  • 4) Nella pagina che si apre cliccare su “Explore in the sandbox”

All’apertura della sandbox (area nella quale potrete sperimentare il vostro codice online) vi apparirà un codice già generato di una pagina html.

Il codice che appare di default è questo:

  <!DOCTYPE html>
		<html>
		<head>
		  <meta charset="utf-8">
		  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		  <title>Intro to MapView - Create a 2D map - 4.8</title>
		  <style>
			html,
			body,
			#viewDiv {
			  padding: 0;
			  margin: 0;
			  height: 100%;
			  width: 100%;
			}
		  </style>

		  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
		  <script src="https://js.arcgis.com/4.8/"></script>

		  <script>
			require([
			  "esri/Map",
			  "esri/views/MapView",
			  "dojo/domReady!"
			], function(Map, MapView) {

			  var map = new Map({
				basemap: "streets"
			  });

			  var view = new MapView({
				container: "viewDiv",
				map: map,
				zoom: 4,
				center: [15, 65] // longitude, latitude
			  });

			});
		  </script>
		</head>

		<body>
		  <div id="viewDiv"></div>
		</body>
		</html>

Come si vede è una normale pagina html di base, vediamo insieme di che elementi è composta.
La pagina è scritta seguento l’ultimo standard html5, lo si vede anche dalla prima riga nella quale viene dichiarato il DOCTYPE (tipo del documento) che sara, appunto, html.

	
   <!DOCTYPE html>

Una pagina html inizia sempre e si conclude con il tag html

 <html> 

Il tag html contiene due tag fondamentali: “head” e “body”.
nel tag “head” viene inserito il tag “title” contenente il titolo
della pagina e i tag “meta” contenenti varie informazioni utili alla sua interpretazione.
Possono essere inseriti anche “style” contenente
lo stile della pagina e i tag “link” e “script” che permettono
il caricamento di script esterni, ovvero, non scritti direttamente all’interno della pagina.

	 <head> 

i tag meta permettono di definire sia charset, ovvero il set di caratteri da utilizzare (in questo caso unicode 8 che è quello standard in europa),

	<meta charset="utf-8"> 

Possiamo inoltre definire altri metadati molto utili come in questo caso le impostazioni su zoom e scala di visualizzazione della pagina
del browser al caricamento della pagina.

	  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 

Questa parte di codice è molto standard e la si trova in ogni sito in cui si parli di “html 5” e “siti responsive”
il tag “title” permette di definire il titolo che vogliamo dare alla pagina.

	 <title>Intro to MapView - Create a 2D map - 4.8</title> 

un altro tag che può essere inserito nel tag “head” è style.
nel tag style viene definito lo stile di ogni elemento della pagina.
Per separare il livello dei contenuti (la pagina) e lo
style in genere si preferisce definire la grafica della
pagina in file separati detti fogli di stile a cascata object
css e inserirli nella pagina tramite il tag “link”. In questo caso si è scritto direttamente
il codice nella pagina poiché di poche righe.

	 
 <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

Qui si definisce il foglio di style incluso nella API esri che è quella
di arcgis.

	  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 

con questa riga viene quindi caricato lo stile base degli elementi appartengono alla libreria.
non è fondamentale conoscerne il contenuto almeno che non vogliamo modificare la liberia stessa.

Fondamentale per il funzionamento della nostra mappa è invece il caricamento dello
script contenente tutte le definizioni e le funzioni che utilizzeremo
per realizzare e modificare la nostra mappa.

	  <script src="https://js.arcgis.com/4.8/"></script> 

il nostro script custom verrà invece inserito nella sezione head
all’interno del tag “script”.
nel quale utilizzeremo tutti gli elemento definiti negli script caricato con questa riga di codice per
aggiungere elementi alla nostra mappa.
Il tag script di degault e già precaricato è questo. Qui noi inseriremo il nostro codice.

	
<script> 

questa parte la troveremo già di default e tocca a noi modificarla secondo le nostre esigenze

Il require ci permette di caricare il codice delle librerie che definiscono i singoli oggetti che useremo
Per cui in questa parte del codice vanno inserite solo le librerie che effettivamente useremo
poiché librerie in più significano codice in più e quindi un caricamento più lento della pagina

	
           require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/geometry/Point",
      "dojo/domReady!"
    ], function(Map, MapView, Graphic, Point) {
	
/* Alla funzione dobbiamo passare come attributi i nomi 
	   degli elementi che utilizzeremo, in questo caso Map, MapView, Graphic e Point. */
	   
	   /* Map ci permettera di cariare la mappa generata online, attraverso varie opzioni. noi
			utilizzeremo quella che viene generata in automatico dal sito. */
	
	   
      map = new Map({
        basemap: "topo"
      });

	  		/* MapView ci permette di stabilire le impostazioni di visualizzazione della mappa. 
			Aggiremo proprio sulla proprieta "center" di MapView per spostarci nella mappa,
			centrandola dove decidiamo noi tramite javascript. */
	  
      view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 11,
        center: [12.40, 41.82] // longitude, latitude
      });
      
  </script>
</head>

nel body vanno inseriti gli elementi che vogliamo aggiungere alla pagina, oltre la mappa.
Noi per il nostro esercizio ci limiteremo ad inserire due div con un bottone all’interno il cui stile è stato impostato tramite il tag style nell’header.
La posizione del bottone sopra la mappa verrà decisa pure tramite stile nell’header.

<body>

  <div id="viewDiv"></div>
  <div id="paneDiv">
      <h3>Luoghi dove vorrei essere ora!</h3>
      <button>Night of candles</button>
  </div>
</body>
</html>

Impostiamo nell’header, all’interno del tag style che viene automaticamente inserito nel sito, il nostro style personale per gli elementi inseriti.
Definiamo intanto la posizione del pannello che deve essere assoluta cosi da uscire dal flusso
degli elementi della pagina e posizionarsi in sopra si essa invece che sotto.

 #paneDiv{
      position:absolute;
      bottom:0%;   /* questo style imposta la distanza dal fondo della pagina che deve essere 0 */
      width:100%; 		/* impostiamo la larghezza della sezione a tutta la pagina. */
      padding:20px 0;  /* l'elemento non verrà attaccato al fondo della pagina in quanto ha un padding che lo distanzia da cio che ha intorno */
      z-index:1;		/* impostiamo l'elemento sopra gli altri */
      text-align:center;  /* centriamo il testo contenuto nell'elemento. */
    }
    /* definiamo qui, invece, lo style dei bottoni */
    button {						
      background:white;   
      pagging:7px;				/* impostiamo una spaziatura interna per dare dimensioni 
	   se non inserito il pulsante prenderebbe (almeno che non specificato staticamente) le dimensioni del testo.
					e risulterebbe incollato ad esso.	  */
      border:1px solid white;  /* forniamo un bordo che da un po di style */
      font-size:0.8em;          /* diamo una dimensione al font */
      margin:3px;		/* spaziamo il pulsante di 3px dagli elementi intorno. */
	  /*  Notiamo la differenza tra padding che fornisce una spaziatura interna ed margin che invece fornisce una spaziatura esterna */
      color:#005e95;
    }
	/* :hover è una pseudo classe che si attiva quando il mouse è sopra il bottone.
	         utilizziamo questa classe quando vogliamo variare la grafica ogni volta che il mouse	
			viene posizionato sopra il bottone. */
    button:hover{
      backgorund:#005e95;
      color:white; 
	  /* cursor:pointer cambia l'immagine del cursore del mouse ogni volta che 
			esso si trovi sopra il pulsante. */
      cursor:pointer;
    }

Passiamo ora a sistemare il codice javascript che permette di ottenere gli efetti voluti
e permette di spostarci da un punto all’altro della mappa.
Dichiariamo delle variabili globali che ci servono per potere accedere agli elementi creati ovunque nel codice.
facciamo questo per non dovere passare parametri alla funzione che agisce all’evento “clicca sul pulsante”
vedremo questo più avanti nell’articolo.

 var view = null;   // questa variabile conterrà la nostra MapView di cui dobbiamo modificare la proprieta center 
    var pointNightOfCandles;  /* questa variabile conterrà invece la posizione di un punto che inseriremo nella mappa.
	                                  indicheremo tramite una immagine a forma di punto il posto nel quale 
									        "vorrei essere in questo momento" */

    var button;            /* questa variabile conterrà temporalmente il bottone premuto. Eseguirò codice diverso
                                      in base al pulsante premuto. In questo caso il codice da eseguire sarà solo uno */
    var buttons = [];       /* questa variabile conterrà la lista di tuttti i bottoni inseriti.
	                                 per ora ne inseriremo uno solo poichè più pulsanti complicherebbero un po 
										il codice. Vedremo più avanti come inserirne di più. */
	
	
	// qui sto creando l'immagine a forma di punto che verrà posizionata sul luogo che "vorrei visitare" 
	 pointNightOfCandles = {
        type: "point",
        longitude: 12.179,
        latitude: 41.874
      };

     // qui definisco invece lo stile grafico del punto che vorrei inserire. 
      var markerSymbol = {
        type: "simple-marker",
        color:[226,119,40],   <!-- colore dell'immagine -->
        outline:{
          color:[255,255,255],  <!-- colore e dimensione del contorno -->
          width:1
        }
      };
      
	 /* con l'istanziazione di questa classe invece associo lo stile appena creato al punto.
	          posso associare lo stesso stile a più punti istanziando più Graphics e cambiando solo al 
			  proprietà geometry.*/
      var pointGraphic1 = new Graphic({
        geometry:pointNightOfCandles,
        symbol:markerSymbol
      });

  
	/* con questo metodo invece inserisco i punti appena istanziati nella mappa.
	         ci pensera il metodo a posizionarlo nel punto giusto. */
      view.graphics.addMany([pointGraphic1,pointGraphic2,pointGraphic3,pointGraphic4,pointGraphic5]);

	/* faccio un for su tutti i pulsanti (in questo caso uno soltanto, ed ad ognuno associo tramite 
            addEventListener il metodo onClick al click del mouse.
 Questa operazione dice a javascript che al click del mouse sul button creato da noi,
          deve eseguire la funzione "onClick" */			
    buttons = document.querySelectorAll("button");
    for(var i = 0, button = null; button = buttons[i]; i++){
      button.addEventListener("click",onClick);
    }
    });
    
    /* entriamo adesso nel vivo del nostro progetto.
	          abbiamo detto che questa funzioen viene eseguita solo all'evento click del mouse sul pulsante. */
    function onClick(event){
	/* code detto controllo che il pulsante sia quello (poiché abbiamo un solo pulsante questo controllo è totalmente inutile */
        if(button == buttons[0]){
		/* quello che dobbiamo fare è semplicemente modificare il centro della mappa tramite la proprietà "center".
		              impostando la latitude e la longitudine del punto che abbiamo disegnato in precedenza. */
          view.center=[pointNightOfCandles.latitude,pointNightOfCandles.longitude];
				// reimposto anche lo zoom per aumentare la vicinanza con il punto.
            view.zoom = 14;
        }      

Questo è un esempio di come potere “giocare” con questo strepitoso tool.
Troverete il codice completo alla seguente pagina : https://github.com/softmade/arcgis/blob/master/index.htm

Simone Sante Ruffo
Diplomato al liceo scientifico, si è laureato in ingegneria informatica e delle telecomunicazioni e sta proseguendo ora gli studi in Ingegneria Elettronica per prendersi la laurea magistrale. Appassionato di informatica, telecomunicazioni ed elettronica gli piace studiare, conoscere, progettare e risolvere problemi
http://simonesanteruffo.it

Lascia un commento

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Top