1 | var osm = new OpenLayers.Layer.OSM(); |
---|
2 | |
---|
3 | var utfgrid = new OpenLayers.Layer.UTFGrid({ |
---|
4 | url: "utfgrid/world_utfgrid/${z}/${x}/${y}.json", |
---|
5 | utfgridResolution: 4, // default is 2 |
---|
6 | displayInLayerSwitcher: false |
---|
7 | }); |
---|
8 | |
---|
9 | var map = new OpenLayers.Map({ |
---|
10 | div: "map", |
---|
11 | projection: "EPSG:900913", |
---|
12 | controls: [], |
---|
13 | layers: [osm, utfgrid], |
---|
14 | center: [0, 0], |
---|
15 | zoom: 1 |
---|
16 | }); |
---|
17 | |
---|
18 | var callback = function(infoLookup) { |
---|
19 | var msg = ""; |
---|
20 | if (infoLookup) { |
---|
21 | var info; |
---|
22 | for (var idx in infoLookup) { |
---|
23 | // idx can be used to retrieve layer from map.layers[idx] |
---|
24 | info = infoLookup[idx]; |
---|
25 | if (info && info.data) { |
---|
26 | msg += "[" + info.id + "] <strong>In 2005, " + |
---|
27 | info.data.NAME + " had a population of " + |
---|
28 | info.data.POP2005 + " people.</strong> "; |
---|
29 | } |
---|
30 | } |
---|
31 | } |
---|
32 | document.getElementById("attrs").innerHTML = msg; |
---|
33 | }; |
---|
34 | |
---|
35 | var controls = { |
---|
36 | move: new OpenLayers.Control.UTFGrid({ |
---|
37 | callback: callback, |
---|
38 | handlerMode: "move" |
---|
39 | }), |
---|
40 | hover: new OpenLayers.Control.UTFGrid({ |
---|
41 | callback: callback, |
---|
42 | handlerMode: "hover" |
---|
43 | }), |
---|
44 | click: new OpenLayers.Control.UTFGrid({ |
---|
45 | callback: callback, |
---|
46 | handlerMode: "click" |
---|
47 | }) |
---|
48 | }; |
---|
49 | for (var key in controls) { |
---|
50 | map.addControl(controls[key]); |
---|
51 | } |
---|
52 | |
---|
53 | function toggleControl(el) { |
---|
54 | for (var c in controls) { |
---|
55 | controls[c].deactivate(); |
---|
56 | } |
---|
57 | controls[el.value].activate(); |
---|
58 | } |
---|
59 | |
---|
60 | // activate the control that responds to mousemove |
---|
61 | toggleControl({value: "move"}); |
---|