/
BingMapsSearch.html
237 lines (212 loc) · 9.82 KB
/
BingMapsSearch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use Bing Maps REST Services with jQuery to build an autocomplete box and find a location dynamically</title>
<script src="scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="../src/jquery.loadJSON.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="scripts/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function () {
var zoom = 12;
var center = "";
var key = "AptcCMfZk-6wkwkXX2ho4h6YOwRJGXYCYYu9OeH1nZ1UD4fTMFEF6x-gZ8pHQu91";
$("#search").click( function () {
$.ajax({
url: "http://dev.virtualearth.net/REST/v1/Locations",
dataType: "jsonp",
data: {
key: key,
q: $("#searchBox").val()
},
jsonp: "jsonp",
success: function (data) {
$("#searchDiv").hide();
$("#data").loadJSON(data).fadeIn("slow");
center = $($(".point .coordinates")[0]).text();
showMap();
}
});
});
$(".point a").live("click", function(event){
center = $(this).text();
showMap();
});
$( "#slider" ).slider({
value:12,
min: 1,
max: 19,
step: 1,
slide: function( event, ui ) {
zoom = ui.value;
showMap();
}
});
function showMap(){
var pushpins = "";
var i = 1;
$(".point .coordinates").each(function(){ pushpins+= "&pp="+$(this).text()+";;"+(i++); } );
$("#searchmap").attr("src",
"http://dev.virtualearth.net/REST/V1/Imagery/Map/road/"+center+"/"+zoom+"?mapSize=600,400&ml=TrafficFlow&mapVersion=v1&key="+key+pushpins);
}
});
</script>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="scripts/shCoreDefault.css"/>
<link type="text/css" rel="stylesheet" href="scripts/shThemeDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>
<body>
<div id="page-wrap">
<a href="http://code.google.com/p/jquery-load-json/" alt="Home">Home</a>
<div id="contact-area">
<h1>Loading JSON from the BingMaps</h1>
<p>JQuery loadJSON plugin enables you to load JSON object taken from the external sites (if this is allowed on the external site).</p>
<h2>Live Example</h2>
<p>The following form enables you to search for address and show all addresses on the map using the BingMaps JSON service.</p>
<div id="searchDiv">
<p>Type in the search box any address (e.g. 'Regent street, london') and press search button. You will see addresses
that matches your search condition in the list. Also, in the map will be shown some of the objects from the list.
</p>
<label for="searchBox">
Search:
</label>
<input id="searchBox" /><button id="search">Search</button>
</div>
<div id="data" style="display:none">
<img src="#" id="brandLogoUri" />
<div id="copyright"></div>
<div id="slider"></div>
<img src="#" id="searchmap" />
<ol class="resourceSets">
<li class="resources">
<span class="name"></span>
<span class="point">
(<a href="#"><span class="coordinates"><span rel="0"></span>,<span rel="1"></span></span></a>)
</span>
</li>
</ol>
<a href="BingMapsSearch.html">New search</a>
</div>
<p>When you press search button, instead of the search form you will see list of addresses returned by the BingMaps and you will be able to
change the zoom level using a slider or place any of the objects in the center of the map by clicking on the coordinates.
</p>
<p>
<h1>Implementation</h1>
<p>First thing you need to do is to load JSON from the BingMaps when search button is pressed. In the following listing is shown how you can
attach click handler to the search button that performs AJAX request to the BingMaps, sends key and query, and load returned JSON result into
the element with id 'div'.</p>
<pre class="brush: js;">
$("#search").click( function () {
$.ajax({
url: "http://dev.virtualearth.net/REST/v1/Locations",
dataType: "jsonp",
data: {
key: key,
q: $("#searchBox").val()
},
jsonp: "jsonp",
success: function (data) {
$("#searchDiv").hide();
$("#data").loadJSON(data);
}
});
});
</pre>
<p>Note that "jsonp" is used as a data type - in most cases standard "json" request is not allowed by the browser if you are using cross-site calls. Therefore "jsonp" is only available option. Example of JSON response that is returned by the BingMaps is shown in the following listing:</p>
<pre class="brush: js;">
{
"brandLogoUri" : "http://dev.virtualearth.net/Branding/logo_powered_by.png",
"resourceSets" : [ {
"resources" : [ {
"name" : "Regent Street, London NW10 5",
"point" : { "coordinates" : [ 51.528781000000002,-0.216583]
}
},
{
"name" : "Regent Street, London W1S 2",
"point" : { "coordinates" : [ 51.511755000000001,-0.139491]
}
},
{
"name" : "Regent Street, London W4 3",
"point" : { "coordinates" : [ 51.488630999999998,-0.28262900000000002]
}
}
]
} ]
}
</pre>
<p>This is just a short example where just some properties important for this example are shown. You can find more details on the Microsoft site.</p>
<p>HTML template where the JSON object is loaded should match JSON structure - example is shown in the following listing:</p>
<pre class="brush: xml;">
<div id="data">
<img src="#" id="brandLogoUri" />
<ol class="resourceSets">
<li class="resources">
<span class="name"></span>
<span class="point">
(<a href="#">
<span class="coordinates">
<span rel="0"></span>,
<span rel="1"></span>
</span>
</a>)
</span>
</li>
</ol>
</div>
</pre>
<p>Structure of the HTML template matches the structure of the JSON object (classes matches the names and structure of the properties of JSON object
that is returned). You can see more details about the generating lists in the <a href="list.html">generating list example</a>. Attributes rel="0" and rel="1" of the span elements are used to load first and second element of the array in theese HTML elements. You can see more details about the generating lists in the <a href="array.html">generating array elements example</a>. Therefore, JSON can be loaded into the template usign the following line of code:</p>
<pre class="brush: js;">
$("#data").loadJSON(data);
</pre>
<p>That is everything that is required to load results from the BingMaps site and load them in your page using client-side script only. In the following section are shortly described additional features implemented in this example (showing results on the map, zooming, placing one of the results in the middle of the map).
<h2>Showing addresses on the map</h2>
<p>You can see in this example that when results are loaded in the HTML, they are shown in the map. This part is not related to the loadJSON plugin,
but here is a short description how it is done. In the HTML is placed one image where the map is loaded. Custom JavaScript set the src attribute
of the image based on the results. Code for setting the image is shown in the following listing:</p>
<pre class="brush: js;">
var zoom = 12;
var center = "";
function showMap(){
var pushpins = "";
var i = 1;
$(".point .coordinates").each(function(){ pushpins+= "&pp="+$(this).text()+";;"+(i++); } );
$("#searchmap").attr("src",
"http://dev.virtualearth.net/REST/V1/Imagery/Map/road/"+
center+"/"+zoom+"?mapSize=600,400&ml=TrafficFlow&mapVersion=v1&key="+
key+pushpins);
}
</pre>
<p>Variable zoom and center defines where is a center of the image and what zoom level is used. When you click on the search button or links
contianing coordinates center variable is set. Value of this variable is in the format 51.528781,-0.216583 so this is read directly from the
text of the link. The following code example set the center variable and redraws the map when link containing coordinates is pressed:</p>
<pre class="brush: js;">
$(".point a").live("click", function(event){
center = $(this).text();
showMap();
});
</pre>
<p>Similar code is executed when the search results are loaded into the list.</p>
<p>Variable zoom has values between 1 and 19 and it is changed when ui slided is moved. UI slider code is shown in the following listing:</p>
<pre class="brush: js;">
$( "#slider" ).slider({
value:12,
min: 1,
max: 19,
step: 1,
slide: function( event, ui ) {
zoom = ui.value;
showMap();
}
});
</pre>
<p>As you can see, loadJSON plugin enables you to quick and easy load results into your HTML code and focus on the concrete features of the site.</p>
</div>
</div>
</body>
</html>