Manuale dei componenti software API (ITA)
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 1 di 11
Geocoding API per iCity - MAN
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
Indice
1.
Introduzione.................................................................................................... 3
2.
Struttura del pacchetto software..................................................................... 4
2.1.
3.
Librerie JavaScript e fogli di stile CSS necessari ................................................6
Componenti software (API)............................................................................. 7
3.1.
Ricerca........................................................................................................7
3.1.1
Parametri.............................................................................................. 7
3.2.
Mappa.........................................................................................................9
3.2.1
Parametri.............................................................................................. 9
4.
Esempio completo.......................................................................................... 11
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 2 di 11
Geocoding API per iCity - MAN
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
1. Introduzione
Il presente documento contiene la descrizione delle componenti software (API), che
consentono di inserire, in una generica pagina html, una funzione di ricerca indirizzo ed una
mappa interattiva. Tali componenti sono:
1. Ricerca, consente all'utente l'inserimento dell'indirizzo da cercare.
2. Mappa, per visualizzare la mappa con l'indirizzo individuato; si tratta di una mappa
interattiva con zoom, pan e scelta della cartografia di sfondo.
Tutti i componenti sono realizzati in tecnologia HTML e JavaScript.
In figura è rappresentata una generica pagina html contenitore, nella quale sono presenti i
componenti Ricerca e Mappa.
Pagina HTML contenitore
Ricerca
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Mappa
Pag. 3 di 11
Geocoding API per iCity - MAN
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
2. Struttura del pacchetto software
Il pacchetto software che contiene le API è costituito dai seguenti file e cartelle.
●
index.html, pagina html contenitore
●
css
●
●
o
La cartella ui-lightness contiene i fogli di stile jQuery
o
style.css è il foglio di stile dei componenti Ricerca e Mappa
images
o
clear.png, simbolo del tasto per cancellare l'indirizzo cercato
o
pin.png, simbolo del pin utilizzato per indicare l'indirizzo individuato
o
search.png, simbolo del tasto di attivazione della ricerca
o
search_over.png, simbolo del tasto al passaggio del mouse
js
o
address_search.js, libreria per la componente ricerca indirizzo
o
jquery-1.9.1.mi.js, libreria jQuery
o
jquery-ui.js, libreria jQuery
o
map.js, libreria per la componente mappa
o
service_config.js, contiene gli indirizzi sei map service e web service utilizzati
o
Urbex_5.7.js, libreria per le foto oblique
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 4 di 11
Geocoding API per iCity - MAN
2.1.
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
Librerie JavaScript e fogli di stile CSS necessari
Nella pagina html contenitore occorre inserire le seguenti librerie JavaScript e fogli di stile
CSS.
<!-- ArcGIS JavaScript API -->
<script src="http://js.arcgis.com/3.11/"></script>
<!-- jQuery API -->
<script type="text/javascript" src="js/jquery-1.9.1.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>
<!-- Application -->
<script type="text/javascript" src="js/service_config.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="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css" />
<!-- jQuery CSS -->
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />
<!-- Oblique CSS -->
<link rel="stylesheet" type="text/css" href="http://www.blomurbex.com/api/5.7/style.css" />
<!-- Application CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 5 di 11
Geocoding API per iCity - MAN
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
3. Componenti software (API)
3.1.
Ricerca
E' il componente per la ricerca indirizzo. L'utente inserisce l'indirizzo completo (o parte di
esso) nel campo di ricerca e preme sul tasto "Cerca" (o sul tasto "Invio" della testiera), per
inviare la richiesta al web service di ricerca.
Il web service ritorna gli indirizzi normalizzati, che vengono visualizzati in un elenco, al di
sotto del campo di ricerca; l'utente può selezionare quello sul quale effettuare il
posizionamento.
3.1.1 Parametri
Parametro
Valore
showSearch
true / false. true rende visibile il componente di ricerca indirizzo.
pinWidth
Larghezza in pixel dell'icona usata come pin sulla mappa (file
images\pin.png).
Valore di default: 31.
pinHeight
Altezza in pixel dell'icona usata come pin sulla mappa (file
images\pin.png).
Valore di default: 35.
addresses
Elenco di indirizzi da visualizzare sulla mappa, nel seguente formato.
{
"address" : "<indirizzo>",
"location":
{
"x" : <coordinata_x >,
"y" : <coordinata_y>
}
}
showAddress
true / false. true rende visibile l'etichetta con l'indirizzo sulla mappa.
Per inserire il componente di ricerca indirizzo è necessario inserire il seguente codice nella
pagina html contenitore.
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 6 di 11
Geocoding API per iCity - MAN
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
<!-- Application parameters -->
<script type="text/javascript">
// show search address
var showSearch = true;
// width of the pin icon (pixel)
var pinWidth = 31;
// height of the pin icon (pixel)
var pinHeight = 35;
// display address on map
var showAddress = false;
// selected addresses
var addresses = eval([{"address":"PIAZZA MAGGIORE, 6","location":{"x":686319.04,"y":929603.2799999993}}]);
</script>
....
<div id="searchApp">
<div>
<label for="search_address_text">Cerca indirizzo</label>
</div>
<div>
<input type="text"
id="search_address_text"
onfocus="addressSearch.setMessage(null,false)"/>
<input type="image"
id="search_address_btn"
src="images/search.png"
onmouseover="this.src='images/search_over.png'"
onmouseout="this.src='images/search.png'"
alt="Posizionati"
title="Posizionati">
<input type="image"
id="clear_btn"
src="images/clear.png"
alt="Cancella"
title="Cancella indirizzo">
</div>
</div>
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 7 di 11
Geocoding API per iCity - MAN
3.2.
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
Mappa
E' il componente per la visualizzazione della mappa interattiva.
Effettuando una ricerca indirizzo la mappa si posiziona sull'indirizzo selezionato e il punto
viene evidenziato con un apposito simbolo (pin.png).
Al primo caricamento la mappa si posiziona sugli indirizzi indicati tramite il parametro
addresses del componente di ricerca indirizzo.
L'utente può effettuare zoom in e out (tramite apposita barra di zoom o rotella del mouse)
spostare la mappa (pan) e selezionare la mappa di sfondo, scegliendo tra: mappa stradale,
foto aeree e foto oblique.
3.2.1 Parametri
Valore
Parametro
showMap
true / false. true indica che è disponibile il tasto per la visualizzazione
della mappa di sfondo.
showAerial
true / false. true indica che è disponibile il tasto per la visualizzazione
delle foto aeree.
showOblique
true / false. true indica che è disponibile il tasto per la visualizzazione
delle foto oblique.
startMap
Mappa di sfondo visualizzata di default al primo caricamento.
Valori possibili:

MAP

AERIAL (foto aeree)

OBLIQUE (foto oblique)
mapWidth
Larghezza della mappa in pixel.
mapHeight
Altezza della mappa in pixel.
Per inserire il componente mappa è necessario inserire il seguente codice nella pagina html
contenitore.
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 8 di 11
Geocoding API per iCity - MAN
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
<!-- Application parameters -->
<script type="text/javascript">
// show basemap
var showMap = true;
// show aerial map
var showAerial = true;
// show oblique
var showOblique = true;
// initial visible map (possible values: MAP, AERIAL, OBLIQUE)
var startMap = "AERIAL";
// map width
var mapWidth = 500 + "px";
// map height
var mapHeight = 400 + "px";
</script>
...
<div id="divMap" style="width:0px; height:0px;"></div>
<div id="divOblique" style="width:0px; height:0px;display:none"></div>
<div id="toggleDiv" style="display:none">
<div><button id="btnMap" class="btn">Mappa</button></div>
<div><button id="btnAerial" class="btn" >Foto aeree</button></div>
<div><button id="btnOblique" class="btn">Foto oblique</button></div>
</div>
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 9 di 11
Geocoding API per iCity - MAN
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
4. Esempio completo
<html>
<head>
<!-- Application parameters -->
<script type="text/javascript">
// show basemap
var showMap = true;
// show aerial map
var showAerial = true;
// show oblique
var showOblique = true;
// initial visible map (possible values: MAP, AERIAL, OBLIQUE)
var startMap = "AERIAL";
// map width
var mapWidth = 500 + "px";
// map height
var mapHeight = 400 + "px";
// show search address
var showSearch = true;
// width of the pin icon (pixel)
var pinWidth = 31;
// height of the pin icon (pixel)
var pinHeight = 35;
// display address on map
var showAddress = false;
// selected addresses
var addresses = eval([{"address":"PIAZZA MAGGIORE, 6","location":{"x":686319.04,"y":929603.2799999993}}]);
</script>
<!-- ArcGIS CSS -->
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.11/esri/css/esri.css" />
<!-- jQuery CSS -->
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />
<!-- Oblique CSS -->
<link rel="stylesheet" type="text/css" href="http://www.blomurbex.com/api/5.7/style.css" />
<!-- Application CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- ArcGIS API -->
<script src="http://js.arcgis.com/3.11/"></script>
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.9.1.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>
<!-- Application -->
<script type="text/javascript" src="js/service_config.js"></script>
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 10 di 11
Geocoding API per iCity - MAN
Modello MT207 – Ediz. 0 – Rev. 00 - data 15-12-2014 – versione 1.0
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/address_search.js"></script>
</head>
<body onload="init()">
<div id="searchApp">
<div>
<label for="search_address_text">Cerca indirizzo</label>
</div>
<div>
<input type="text"
id="search_address_text"
onfocus="addressSearch.setMessage(null,false)"/>
<input type="image"
id="search_address_btn"
src="images/search.png"
onmouseover="this.src='images/search_over.png'"
onmouseout="this.src='images/search.png'"
alt="Posizionati"
title="Posizionati">
<input type="image"
id="clear_btn"
src="images/clear.png"
alt="Cancella"
title="Cancella indirizzo">
</div>
</div>
<div id="divMap" style="width:0px; height:0px;"></div>
<div id="divOblique" style="width:0px; height:0px;display:none"></div>
<div id="toggleDiv" style="display:none">
<div><button id="btnMap" class="btn">Mappa</button></div>
<div><button id="btnAerial" class="btn" >Foto aeree</button></div>
<div><button id="btnOblique" class="btn">Foto oblique</button></div>
</div>
</body>
</html>
Dipartimento Economia e Promozione della Città - Settore Agenda digitale e tecnologie
informatiche – piazza Liber Paradisus, 10 - 40129 Bologna
e-mail [email protected]
Pag. 11 di 11