/
Paging Search Results.html
190 lines (153 loc) · 7.01 KB
/
Paging Search Results.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paged Search Results - Bing Maps Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This code example takes a data source and performs an initial radial search of 10 kilometers. It then displays the first 10 results on the map and also creates a list of the results below the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, Bing, Bing Maps" />
<meta name="author" content="Microsoft Bing Maps" />
<meta name="screenshot" content="bmv8-pagednearbyresultsexample.jpg" />
<script>
var sdsDataSourceUrl = 'https://spatial.virtualearth.net/REST/v1/data/20181f26d9e94c81acdf9496133d4f23/FourthCoffeeSample/FourthCoffeeShops';
var map, dataLayer, pageIdx = 0, queryOptions, numResults;
function GetMap() {
map = new Microsoft.Maps.Map('#myMap', {
center: new Microsoft.Maps.Location(47.678, -122.133),
zoom: 13
});
//Create a data layer to display results.
dataLayer = new Microsoft.Maps.Layer();
map.layers.insert(dataLayer);
//Add a mouse over event to the data layer.
Microsoft.Maps.Events.addHandler(dataLayer, 'mouseover', highlightListItem);
//Load the Bing Spatial Data Services module.
Microsoft.Maps.loadModule('Microsoft.Maps.SpatialDataService', function () {
//Create a query to get nearby data.
queryOptions = {
queryUrl: sdsDataSourceUrl,
top: 10,
inlineCount: true,
spatialFilter: {
spatialFilterType: 'nearby',
location: map.getCenter(),
radius: 10
}
};
//Trigger an initial search.
getNearByLocations();
});
}
function getNearByLocations() {
//Remove any existing data from the data layer.
dataLayer.clear();
//Update the query options to skip results based on the page index.
queryOptions.skip = pageIdx * 10,
Microsoft.Maps.SpatialDataService.QueryAPIManager.search(queryOptions, map,
function (data, inlineCount) {
//Store the number of results available.
numResults = inlineCount;
if (data.length > 0) {
//Calculate the start and end result index.
var start = pageIdx * 10 + 1;
var end = start + data.length - 1;
document.getElementById('pageInfo').innerText = 'Results: ' + start + ' - '
+ end + ' of ' + inlineCount + ' results';
//Create a list of the results.
var listHTML = ['<table>'],
locations = [];
for (var i = 0; i < data.length; i++) {
//Create HTML for each line item in the list.
//Add a column of index numbers.
listHTML.push('<tr><td>', (start + i), ') </td>');
//Create a link that calls a function, pass in the EntityID of a result into the rel attribute for cross referencing the list item to the shape.
listHTML.push('<td><a href="javascript:void(0);" rel="', data[i].metadata.EntityID, '" ',
' data[i].metadata.EntityID, '\');">',
data[i].metadata.DisplayName, '</a></td>');
//Create a column to display the distance to the location.
listHTML.push('<td>', data[i].metadata.__Distance.toFixed(2),
' km(s)</td></tr>');
//Add the result number to the pushpin.
data[i].setOptions({ text: start + i + '' });
locations.push(data[i].getLocation());
}
listHTML.push('</table>');
document.getElementById('resultList').innerHTML = listHTML.join('');
//Add results to the data layer.
dataLayer.add(data);
//Set the map view to show all the locations.
//Add padding to account for the pushpins pixel size.
map.setView({
bounds: Microsoft.Maps.LocationRect.fromLocations(locations),
padding: 30
});
}
});
}
function listItemClicked(entityId) {
//When an item in the list is clicked, look up its pushpin by entitiyId.
var shapes = dataLayer.getPrimitives();
for (var i = 0; i < shapes.length; i++) {
if (shapes[i].metadata.EntityID == entityId) {
//Center the map over the pushpin and zoom in.
map.setView({ center: shapes[i].getLocation(), zoom: 15 });
break;
}
}
}
function pageBackwards() {
if (pageIdx > 0) {
pageIdx--;
getNearByLocations();
}
}
function pageForward() {
//Ensure that paging does not exceed the number of results.
if ((pageIdx + 1) * 10 < numResults) {
pageIdx++;
getNearByLocations();
}
}
function highlightListItem(e) {
var shapeId = e.target.metadata.EntityID;
var elm = getListItemById(shapeId);
//Highlight the list item to indicate that its shape has been hovered.
elm.style.background = 'LightGreen';
//Remove the highlighting after a second.
setTimeout(function () {
elm.style.background = 'white';
}, 1000);
}
function getListItemById(shapeId) {
var listItems = document.getElementById('resultList').getElementsByTagName('a');
for (var i = 0; i < listItems.length; i++) {
var rel = listItems[i].getAttribute('rel');
if (rel === shapeId) {
return listItems[i];
}
}
return null;
}
</script>
</head>
<body>
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>
<div style="margin-top:10px;">
<input type="button" value="<" />
<input type="button" value=">" /><br /><br />
<div id="pageInfo"></div><br />
<div id="resultList"></div>
</div>
<script>
// Dynamic load the Bing Maps Key and Script
// Get your own Bing Maps key at https://www.microsoft.com/maps
(async () => {
let script = document.createElement("script");
let bingKey = await fetch("https://samples.azuremaps.com/api/GetBingMapsKey").then(r => r.text()).then(key => { return key });
script.setAttribute("src", `https://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=${bingKey}`);
document.body.appendChild(script);
})();
</script>
</body>
</html>