Software API guide (EN) Manuale dei componenti software API (EN) Pag. 1 di 11

(1)

(2)

Index

1.

Introduction

...

3

2.

Software package

...

4

2.1.

JavaScript and CSS

...

5

3.

Software API

...

6

3.1.

Search

...

6

3.1.1

JavaScript parameters

...

6

3.2.

Map

...

8

3.2.1

Javascript parameters

...

8

4.

Example

...

10

(3)

1. Introduction

This document describes software components (APIs) to insert a search address

functionality and an interactive map, inside an HTML page. These components are:

1.

Search, address search.

2.

Map, display a map with the address.

All components are developed with HTML and JavaScript technology.

HTML page contaier

Map

Search

(4)

2. Software package

The software package consists of the following files and folders.

●

index.html, html page container

●

css

o

ui-lightness folders contains CSS for jQuery

o

style.css is the CSS for map and address search

●

images

o

clear.png

o

pin.png

o

search.png

o

search_over.png

●

js

o

address_search.js, JavaScript library for address search

o

jquery-1.9.1.mi.js, jQuery library

o

jquery-ui.js, jQuery UI library

o

map.js, JavaScript library for map component

o

service_config.js, web services and map services URL

(5)

2.1.

JavaScript and CSS

The HTML page container must contain the following JavaScript libraries and CSS.

<

script

src="http://js.arcgis.com/3.11/"></

script

>

<

script

type="text/javascript" src="js/jquery-1.9.1.min.js"></

script

>

<

script

type="text/javascript" src="js/jquery-ui.js"></

script

>

<

script

type="text/javascript" src="js/Urbex_5.7.js"></

script

>

<

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

>

<

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" />

<

link

rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />

<

link

rel="stylesheet" type="text/css" href="http://www.blomurbex.com/api/5.7/style.css" />

(6)

3. Software API

3.1.

Search

The address search component uses the gocoding web service in order to search for

addresses.

3.1.1 JavaScript parameters

Parameter

Value

showSearch

true

/

false

.

true

shows the address search component.

pinWidth

Width (pixel) of the pin icon on the map (images\pin.png).

Default: 31

pinHeight

Height (pixel) of the pin icon on the map (images\pin.png).

Default: 35

addresses

List of addresses to display on the map.

{

"address"

:

"<indirizzo>"

,

"location"

:

{

"x"

: <coordinata_x >,

"y"

: <coordinata_y>

}

showAddress

true

/

false

.

true

shows the label with the address on the map.

In order to add the search component in an HTML page container, you have to insert the

following code inside the page.

(7)

<

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>

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

(8)

3.2.

Map

The map component displays the map with the address (or addresses) and has built-in

capabilities like zoom, pan and map switch.

3.2.1 Javascript parameters

Parameter

Value

showMap

true

/

false

.

true

displays the "Map" button to show the street map.

showAerial

true

/

false

.

true

displays the "Aerial" button to show the aerial map.

showOblique

true

/

false

.

true

displays the "Oblique" button to show the oblique map.

startMap

Initial base map.

Allowed values:



MAP



AERIAL



OBLIQUE

mapWidth

Width of the map (pixel)

mapHeight

Height of the map (pixel)

In order to add the map component in an HTML page container, you have to insert the

following code inside the page.

(9)

<

script

// 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

>

(10)

4. Example

<

html

>

<

head

>

<

script

// 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

>

<

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" />

<

link

rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />

<

link

rel="stylesheet" type="text/css" href="http://www.blomurbex.com/api/5.7/style.css" />

<

link

rel="stylesheet" type="text/css" href="css/style.css" />

<

script

src="http://js.arcgis.com/3.11/"></

script

>

<

script

type="text/javascript" src="js/jquery-1.9.1.min.js"></

script

>

<

script

type="text/javascript" src="js/jquery-ui.js"></

script

>

(11)

<

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

>