Sviluppo di due Web Service GIS per il progetto icity

Transcript

1 Svilupp di due Web Service GIS per il prgett icity Manuale dei cmpnenti sftware (API) Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 1 di 11

2 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine 1.0 Indice 1. Intrduzine Struttura del pacchett sftware Librerie JavaScript e fgli di stile CSS necessari Cmpnenti sftware (API) Ricerca Parametri Mappa Parametri Esempi cmplet...11 Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 2 di 11

3 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine Intrduzine Il presente dcument cntiene la descrizine delle cmpnenti sftware (API), che cnsentn di inserire, in una generica pagina html, una funzine di ricerca indirizz ed una mappa interattiva. Tali cmpnenti sn: 1. Ricerca, cnsente all'utente l'inseriment dell'indirizz da cercare. 2. Mappa, per visualizzare la mappa cn l'indirizz individuat; si tratta di una mappa interattiva cn zm, pan e scelta della cartgrafia di sfnd. Tutti i cmpnenti sn realizzati in tecnlgia HTML e JavaScript. In figura è rappresentata una generica pagina html cntenitre, nella quale sn presenti i cmpnenti Ricerca e Mappa. Pagina HTML cntenitre Ricerca Mappa Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 3 di 11

4 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine Struttura del pacchett sftware Il pacchett sftware che cntiene le API è cstituit dai seguenti file e cartelle. index.html, pagina html cntenitre css La cartella ui-lightness cntiene i fgli di stile jquery style.css è il fgli di stile dei cmpnenti Ricerca e Mappa images clear.png, simbl del tast per cancellare l'indirizz cercat pin.png, simbl del pin utilizzat per indicare l'indirizz individuat search.png, simbl del tast di attivazine della ricerca search_ver.png, simbl del tast al passaggi del muse js address_search.js, libreria per la cmpnente ricerca indirizz jquery mi.js, libreria jquery jquery-ui.js, libreria jquery map.js, libreria per la cmpnente mappa service_cnfig.js, cntiene gli indirizzi sei map service e web service utilizzati Urbex_5.7.js, libreria per le ft blique Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 4 di 11

5 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine Librerie JavaScript e fgli di stile CSS necessari Nella pagina html cntenitre ccrre inserire le seguenti librerie JavaScript e fgli di stile CSS. <!-- ArcGIS JavaScript API --> <script src=" <!-- jquery API --> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <!-- Oblique API --> <script type="text/javascript" src="js/urbex_5.7.js"></script> <!-- Applicatin --> <script type="text/javascript" src="js/service_cnfig.js"></script> <script type="text/javascript" src="js/map.js"></script> <script type="text/javascript" src="js/address_search.js"></script> <!-- ArcGIS CSS --> <link rel="stylesheet" type="text/css" href=" /> <link rel="stylesheet" type="text/css" href=" /> <!-- jquery CSS --> <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" /> <!-- Oblique CSS --> <link rel="stylesheet" type="text/css" href=" /> <!-- Applicatin CSS --> <link rel="stylesheet" type="text/css" href="css/style.css" /> Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 5 di 11

6 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine Cmpnenti sftware (API) 3.1. Ricerca E' il cmpnente per la ricerca indirizz. L'utente inserisce l'indirizz cmplet ( parte di ess) nel camp di ricerca e preme sul tast "Cerca" ( sul tast "Invi" della testiera), per inviare la richiesta al web service di ricerca. Il web service ritrna gli indirizzi nrmalizzati, che vengn visualizzati in un elenc, al di stt del camp di ricerca; l'utente può selezinare quell sul quale effettuare il psizinament Parametri Parametr shwsearch pinwidth Valre true / false. true rende visibile il cmpnente di ricerca indirizz. Larghezza in pixel dell'icna usata cme pin sulla mappa (file images\pin.png). Valre di default: 31. pinheight Altezza in pixel dell'icna usata cme pin sulla mappa (file images\pin.png). Valre di default: 35. addresses Elenc di indirizzi da visualizzare sulla mappa, nel seguente frmat. { } "address" : "<indirizz>", "lcatin": { "x" : <crdinata_x >, "y" : <crdinata_y> } shwaddress true / false. true rende visibile l'etichetta cn l'indirizz sulla mappa. Per inserire il cmpnente di ricerca indirizz è necessari inserire il seguente cdice nella pagina html cntenitre. Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 6 di 11

7 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine 1.0 <!-- Applicatin parameters --> <script type="text/javascript"> // shw search address var shwsearch = true; // width f the pin icn (pixel) var pinwidth = 31; // height f the pin icn (pixel) var pinheight = 35; // display address n map var shwaddress = false; // selected addresses var addresses = eval([{"address":"piazza MAGGIORE, 6","lcatin":{"x": ,"y": }}]); </script>... <div id="searchapp"> <div> <label fr="search_address_text">cerca indirizz</label> <div> <input type="text" id="search_address_text" nfcus="addresssearch.setmessage(null,false)"/> <input type="image" id="search_address_btn" src="images/search.png" nmusever="this.src='images/search_ver.png'" nmuseut="this.src='images/search.png'" alt="psizinati" title="psizinati"> <input type="image" id="clear_btn" src="images/clear.png" alt="cancella" title="cancella indirizz"> Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 7 di 11

8 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine Mappa E' il cmpnente per la visualizzazine della mappa interattiva. Effettuand una ricerca indirizz la mappa si psizina sull'indirizz selezinat e il punt viene evidenziat cn un appsit simbl (pin.png). Al prim caricament la mappa si psizina sugli indirizzi indicati tramite il parametr addresses del cmpnente di ricerca indirizz. L'utente può effettuare zm in e ut (tramite appsita barra di zm rtella del muse) spstare la mappa (pan) e selezinare la mappa di sfnd, scegliend tra: mappa stradale, ft aeree e ft blique Parametri Parametr shwmap shwaerial shwoblique startmap Valre true / false. true indica che è dispnibile il tast per la visualizzazine della mappa di sfnd. true / false. true indica che è dispnibile il tast per la visualizzazine delle ft aeree. true / false. true indica che è dispnibile il tast per la visualizzazine delle ft blique. Mappa di sfnd visualizzata di default al prim caricament. Valri pssibili: MAP AERIAL (ft aeree) mapwidth mapheight OBLIQUE (ft blique) Larghezza della mappa in pixel. Altezza della mappa in pixel. Per inserire il cmpnente mappa è necessari inserire il seguente cdice nella pagina html cntenitre. Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 8 di 11

9 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine 1.0 <!-- Applicatin parameters --> <script type="text/javascript"> // shw basemap var shwmap = true; // shw aerial map var shwaerial = true; // shw blique var shwoblique = true; // initial visible map (pssible values: MAP, AERIAL, OBLIQUE) var startmap = "AERIAL"; // map width var mapwidth = "px"; // map height var mapheight = "px"; </script>... <div id="divmap" style="width:0px; height:0px;"> <div id="divoblique" style="width:0px; height:0px;display:nne"> <div id="tgglediv" style="display:nne"> <div><buttn id="btnmap" class="btn">mappa</buttn> <div><buttn id="btnaerial" class="btn" >Ft aeree</buttn> <div><buttn id="btnoblique" class="btn">ft blique</buttn> Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 9 di 11

10 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine Esempi cmplet <html> <head> <!-- Applicatin parameters --> <script type="text/javascript"> // shw basemap var shwmap = true; // shw aerial map var shwaerial = true; // shw blique var shwoblique = true; // initial visible map (pssible values: MAP, AERIAL, OBLIQUE) var startmap = "AERIAL"; // map width var mapwidth = "px"; // map height var mapheight = "px"; // shw search address var shwsearch = true; // width f the pin icn (pixel) var pinwidth = 31; // height f the pin icn (pixel) var pinheight = 35; // display address n map var shwaddress = false; // selected addresses var addresses = eval([{"address":"piazza MAGGIORE, 6","lcatin":{"x": ,"y": }}]); </script> <!-- ArcGIS CSS --> <link rel="stylesheet" type="text/css" href=" /> <link rel="stylesheet" type="text/css" href=" /> <!-- jquery CSS --> <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" /> <!-- Oblique CSS --> <link rel="stylesheet" type="text/css" href=" /> <!-- Applicatin CSS --> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- ArcGIS API --> <script src=" <!-- jquery --> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui.js"></script> <!-- Oblique API --> <script type="text/javascript" src="js/urbex_5.7.js"></script> <!-- Applicatin --> <script type="text/javascript" src="js/service_cnfig.js"></script> Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 10 di 11

11 Gecding API per icity - MAN Mdell MT207 Ediz. 0 Rev data versine 1.0 <script type="text/javascript" src="js/map.js"></script> <script type="text/javascript" src="js/address_search.js"></script> </head> <bdy nlad="init()"> <div id="searchapp"> <div> <div> <label fr="search_address_text">cerca indirizz</label> <input type="text" id="search_address_text" nfcus="addresssearch.setmessage(null,false)"/> <input type="image" id="search_address_btn" src="images/search.png" nmusever="this.src='images/search_ver.png'" nmuseut="this.src='images/search.png'" alt="psizinati" title="psizinati"> <input type="image" id="clear_btn" src="images/clear.png" alt="cancella" title="cancella indirizz"> <div id="divmap" style="width:0px; height:0px;"> <div id="divoblique" style="width:0px; height:0px;display:nne"> <div id="tgglediv" style="display:nne"> <div><buttn id="btnmap" class="btn">mappa</buttn> <div><buttn id="btnaerial" class="btn" >Ft aeree</buttn> <div><buttn id="btnoblique" class="btn">ft blique</buttn> </bdy> </html> Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 11 di 11