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

Size: px

Start display at page:

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

Carol Lewis
8 years ago
Views:

1 Sftware API guide (EN) Manuale dei cmpnenti sftware API (EN) Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 1 di 11

Agenda digitale e tecnlgie infrmatiche piazza Liber

2 Gecding API fr icity - MAN Mdel MT207 Ediz. 0 Rev. 00 Index 1. Intrductin Sftware package JavaScript and CSS Sftware API Search JavaScript parameters Map Javascript parameters Example 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 fr icity - MAN Mdel MT207 Ediz. 0 Rev Intrductin This dcument describes sftware cmpnents (APIs) t insert a search address functinality and an interactive map, inside an HTML page. These cmpnents are: 1. Search, address search. 2. Map, display a map with the address. All cmpnents are develped with HTML and JavaScript technlgy. HTML page cntaier Search Map Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 3 di 11

page. These cmpnents are: 1. Search, address search. 2. Map, display a map with the address.

4 Gecding API fr icity - MAN Mdel MT207 Ediz. 0 Rev Sftware package The sftware package cnsists f the fllwing files and flders. index.html, html page cntainer css ui-lightness flders cntains CSS fr jquery style.css is the CSS fr map and address search images clear.png pin.png search.png search_ver.png js address_search.js, JavaScript library fr address search jquery mi.js, jquery library jquery-ui.js, jquery UI library map.js, JavaScript library fr map cmpnent service_cnfig.js, web services and map services URL Urbex_5.7.js, Oblique library Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 4 di 11

png js address_search.js, JavaScript library fr address search jquery-1.9.1.mi.js, jquery library jquery-ui.js, jquery UI library map.

5 Gecding API fr icity - MAN Mdel MT207 Ediz. 0 Rev JavaScript and CSS The HTML page cntainer must cntain the fllwing JavaScript libraries and CSS.  <script src="  <script type="text/javascript" src="js/jquery 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_cnfig.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=" /> <link rel="stylesheet" type="text/css" href=" />  <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />  <link rel="stylesheet" type="text/css" href=" />  <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

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.

6 Gecding API fr icity - MAN Mdel MT207 Ediz. 0 Rev Sftware API 3.1. Search The address search cmpnent uses the gcding web service in rder t search fr addresses JavaScript parameters Parameter shwsearch pinwidth Value true / false. true shws the address search cmpnent. Width (pixel) f the pin icn n the map (images\pin.png). Default: 31 pinheight Height (pixel) f the pin icn n the map (images\pin.png). Default: 35 addresses List f addresses t display n the map. { } "address" : "<indirizz>", "lcatin": { "x" : <crdinata_x >, "y" : <crdinata_y> } shwaddress true / false. true shws the label with the address n the map. In rder t add the search cmpnent in an HTML page cntainer, yu have t insert the fllwing cde inside the page. Dipartiment Ecnmia e Prmzine della Città - Settre Agenda digitale e tecnlgie infrmatiche piazza Liber Paradisus, Blgna pendata@cmune.blgna.it Pag. 6 di 11

${ } "address" : "<indirizz>", "lcatin": { "x" : <crdinata_x >, "y" : <crdinata_y> } shwaddress true / false. true shws the label with the address n the map.$

7 Gecding API fr icity - MAN Mdel MT207 Ediz. 0 Rev. 00  <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

pinheight = 35; // display address n map var shwaddress = false; // selected addresses var addresses = eval([{"address":"piazza MAGGIORE, 6","lcatin":{"x":686319.04,"y":929603.

8 Gecding API fr icity - MAN Mdel MT207 Ediz. 0 Rev Map The map cmpnent displays the map with the address (r addresses) and has built-in capabilities like zm, pan and map switch Javascript parameters Parameter shwmap shwaerial shwoblique startmap Value true / false. true displays the "Map" buttn t shw the street map. true / false. true displays the "Aerial" buttn t shw the aerial map. true / false. true displays the "Oblique" buttn t shw the blique map. Initial base map. Allwed values: MAP AERIAL mapwidth mapheight OBLIQUE Width f the map (pixel) Height f the map (pixel) In rder t add the map cmpnent in an HTML page cntainer, yu have t insert the fllwing cde inside the page. 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 fr icity - MAN Mdel MT207 Ediz. 0 Rev. 00  <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

(pssible values: MAP, AERIAL, OBLIQUE) var startmap = "AERIAL"; // map width var mapwidth = 500 + "px"; // map height var mapheight = 400 + "px"; </script>.

10 Gecding API fr icity - MAN Mdel MT207 Ediz. 0 Rev Example <html> <head>  <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>  <link rel="stylesheet" type="text/css" href=" /> <link rel="stylesheet" type="text/css" href=" />  <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui.css" />  <link rel="stylesheet" type="text/css" href=" />  <link rel="stylesheet" type="text/css" href="css/style.css" />  <script src="  <script type="text/javascript" src="js/jquery 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_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

(pssible values: MAP, AERIAL, OBLIQUE) var startmap = "AERIAL"; // map width var mapwidth = 500 + "px"; // map height var mapheight = 400 + "px"; // shw search address var shwsearch = true; // width

11 Gecding API fr icity - MAN Mdel MT207 Ediz. 0 Rev. 00 <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

setmessage(null,false)"/> <input type="image" id="search_address_btn" src="images/search.png" nmusever="this.src='images/search_

Ads SPA with AngularJS Lab

Ads SPA with AngularJS Lab Yu are assigned t design and implement a web site fr Online Ads Publishing as single page applicatin (SPA) using HTML5 and AngularJS. The app manages users and their ads rganized