1 | // API key for http://openlayers.org. Please get your own at |
---|
2 | // http://bingmapsportal.com/ and use that instead. |
---|
3 | var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf"; |
---|
4 | |
---|
5 | // initialize map when page ready |
---|
6 | var map; |
---|
7 | var gg = new OpenLayers.Projection("EPSG:4326"); |
---|
8 | var sm = new OpenLayers.Projection("EPSG:900913"); |
---|
9 | |
---|
10 | var init = function (onSelectFeatureFunction) { |
---|
11 | |
---|
12 | var vector = new OpenLayers.Layer.Vector("Vector Layer", {}); |
---|
13 | |
---|
14 | var sprintersLayer = new OpenLayers.Layer.Vector("Sprinters", { |
---|
15 | styleMap: new OpenLayers.StyleMap({ |
---|
16 | externalGraphic: "img/mobile-loc.png", |
---|
17 | graphicOpacity: 1.0, |
---|
18 | graphicWidth: 16, |
---|
19 | graphicHeight: 26, |
---|
20 | graphicYOffset: -26 |
---|
21 | }) |
---|
22 | }); |
---|
23 | |
---|
24 | var sprinters = getFeatures(); |
---|
25 | sprintersLayer.addFeatures(sprinters); |
---|
26 | |
---|
27 | var selectControl = new OpenLayers.Control.SelectFeature(sprintersLayer, { |
---|
28 | autoActivate:true, |
---|
29 | onSelect: onSelectFeatureFunction}); |
---|
30 | |
---|
31 | var geolocate = new OpenLayers.Control.Geolocate({ |
---|
32 | id: 'locate-control', |
---|
33 | geolocationOptions: { |
---|
34 | enableHighAccuracy: false, |
---|
35 | maximumAge: 0, |
---|
36 | timeout: 7000 |
---|
37 | } |
---|
38 | }); |
---|
39 | // create map |
---|
40 | map = new OpenLayers.Map({ |
---|
41 | div: "map", |
---|
42 | theme: null, |
---|
43 | projection: sm, |
---|
44 | numZoomLevels: 18, |
---|
45 | controls: [ |
---|
46 | new OpenLayers.Control.Attribution(), |
---|
47 | new OpenLayers.Control.TouchNavigation({ |
---|
48 | dragPanOptions: { |
---|
49 | enableKinetic: true |
---|
50 | } |
---|
51 | }), |
---|
52 | geolocate, |
---|
53 | selectControl |
---|
54 | ], |
---|
55 | layers: [ |
---|
56 | new OpenLayers.Layer.OSM("OpenStreetMap", null, { |
---|
57 | transitionEffect: 'resize' |
---|
58 | }), |
---|
59 | new OpenLayers.Layer.Bing({ |
---|
60 | key: apiKey, |
---|
61 | type: "Road", |
---|
62 | // custom metadata parameter to request the new map style - only useful |
---|
63 | // before May 1st, 2011 |
---|
64 | metadataParams: { |
---|
65 | mapVersion: "v1" |
---|
66 | }, |
---|
67 | name: "Bing Road", |
---|
68 | transitionEffect: 'resize' |
---|
69 | }), |
---|
70 | new OpenLayers.Layer.Bing({ |
---|
71 | key: apiKey, |
---|
72 | type: "Aerial", |
---|
73 | name: "Bing Aerial", |
---|
74 | transitionEffect: 'resize' |
---|
75 | }), |
---|
76 | new OpenLayers.Layer.Bing({ |
---|
77 | key: apiKey, |
---|
78 | type: "AerialWithLabels", |
---|
79 | name: "Bing Aerial + Labels", |
---|
80 | transitionEffect: 'resize' |
---|
81 | }), |
---|
82 | vector, |
---|
83 | sprintersLayer |
---|
84 | ], |
---|
85 | center: new OpenLayers.LonLat(0, 0), |
---|
86 | zoom: 1 |
---|
87 | }); |
---|
88 | |
---|
89 | var style = { |
---|
90 | fillOpacity: 0.1, |
---|
91 | fillColor: '#000', |
---|
92 | strokeColor: '#f00', |
---|
93 | strokeOpacity: 0.6 |
---|
94 | }; |
---|
95 | geolocate.events.register("locationupdated", this, function(e) { |
---|
96 | vector.removeAllFeatures(); |
---|
97 | vector.addFeatures([ |
---|
98 | new OpenLayers.Feature.Vector( |
---|
99 | e.point, |
---|
100 | {}, |
---|
101 | { |
---|
102 | graphicName: 'cross', |
---|
103 | strokeColor: '#f00', |
---|
104 | strokeWidth: 2, |
---|
105 | fillOpacity: 0, |
---|
106 | pointRadius: 10 |
---|
107 | } |
---|
108 | ), |
---|
109 | new OpenLayers.Feature.Vector( |
---|
110 | OpenLayers.Geometry.Polygon.createRegularPolygon( |
---|
111 | new OpenLayers.Geometry.Point(e.point.x, e.point.y), |
---|
112 | e.position.coords.accuracy / 2, |
---|
113 | 50, |
---|
114 | 0 |
---|
115 | ), |
---|
116 | {}, |
---|
117 | style |
---|
118 | ) |
---|
119 | ]); |
---|
120 | map.zoomToExtent(vector.getDataExtent()); |
---|
121 | }); |
---|
122 | |
---|
123 | function getFeatures() { |
---|
124 | var features = { |
---|
125 | "type": "FeatureCollection", |
---|
126 | "features": [ |
---|
127 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1332700, 7906300]}, |
---|
128 | "properties": {"Name": "Igor Tihonov", "Country":"Sweden", "City":"Gothenburg"}}, |
---|
129 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [790300, 6573900]}, |
---|
130 | "properties": {"Name": "Marc Jansen", "Country":"Germany", "City":"Bonn"}}, |
---|
131 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [568600, 6817300]}, |
---|
132 | "properties": {"Name": "Bart van den Eijnden", "Country":"Netherlands", "City":"Utrecht"}}, |
---|
133 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-7909900, 5215100]}, |
---|
134 | "properties": {"Name": "Christopher Schmidt", "Country":"United States of America", "City":"Boston"}}, |
---|
135 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-937400, 5093200]}, |
---|
136 | "properties": {"Name": "Jorge Gustavo Rocha", "Country":"Portugal", "City":"Braga"}}, |
---|
137 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-355300, 7547800]}, |
---|
138 | "properties": {"Name": "Jennie Fletcher ", "Country":"Scotland", "City":"Edinburgh"}}, |
---|
139 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657068.53608487, 5712321.2472725]}, |
---|
140 | "properties": {"Name": "Bruno Binet ", "Country":"France", "City":"Chambéry"}}, |
---|
141 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [667250.8958124, 5668048.6072737]}, |
---|
142 | "properties": {"Name": "Eric Lemoine", "Country":"France", "City":"Theys"}}, |
---|
143 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [653518.03606319, 5721118.5122914]}, |
---|
144 | "properties": {"Name": "Antoine Abt", "Country":"France", "City":"La Motte Servolex"}}, |
---|
145 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [657985.78042416, 5711862.6251028]}, |
---|
146 | "properties": {"Name": "Pierre Giraud", "Country":"France", "City":"Chambéry"}}, |
---|
147 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [742941.93818208, 5861818.9477535]}, |
---|
148 | "properties": {"Name": "Stéphane Brunner", "Country":"Switzerland", "City":"Paudex"}}, |
---|
149 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [736082.61064069, 5908165.4649505]}, |
---|
150 | "properties": {"Name": "Frédéric Junod", "Country":"Switzerland", "City":"Montagny-prÚs-Yverdon"}}, |
---|
151 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [771595.97057525, 5912284.7041793]}, |
---|
152 | "properties": {"Name": "Cédric Moullet", "Country":"Switzerland", "City":"Payerne"}}, |
---|
153 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [744205.23922364, 5861277.319748]}, |
---|
154 | "properties": {"Name": "Benoit Quartier", "Country":"Switzerland", "City":"Lutry"}}, |
---|
155 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [1717430.147101, 5954568.7127565]}, |
---|
156 | "properties": {"Name": "Andreas Hocevar", "Country":"Austria", "City":"Graz"}}, |
---|
157 | { "type": "Feature", "geometry": {"type": "Point", "coordinates": [-12362007.067301,5729082.2365672]}, |
---|
158 | "properties": {"Name": "Tim Schaub", "Country":"United States of America", "City":"Bozeman"}} |
---|
159 | ] |
---|
160 | }; |
---|
161 | |
---|
162 | var reader = new OpenLayers.Format.GeoJSON(); |
---|
163 | |
---|
164 | return reader.read(features); |
---|
165 | } |
---|
166 | |
---|
167 | }; |
---|