source: ntrip/trunk/BNC/src/map/map_osb.html@ 7971

Last change on this file since 7971 was 5270, checked in by mervart, 11 years ago
File size: 3.4 KB
RevLine 
[5270]1<!DOCTYPE HTML>
2<html>
3
4 <head>
5 <title>BNC OpenStreetMap View</title>
6 <style type="text/css">
7 html, body, #basicMap {
8 width: 100%;
9 height: 100%;
10 margin: 0;
11 }
12 </style>
13
14 <script src="http://openlayers.org/api/OpenLayers.js" ></script>
15
16 <script>
17 var map;
18 var markers;
19 var marker;
20 var icon;
21 var traceIcon;
22 var fromProjection;
23 var toProjection;
24 var useTrace;
25 var zoom;
26
27 OpenLayers.Layer.OSM.StreetBrowser = OpenLayers.Class(OpenLayers.Layer.OSM, {
28 /**
29 * Constructor: OpenLayers.Layer.OSM.StreetBrowser
30 *
31 * Parameters:
32 * name - {String}
33 * options - {Object} Hashtable of extra options to tag onto the layer
34 */
35 initialize: function(name, options) {
36 var url = [
37 "http://tiles-base.openstreetbrowser.org/tiles/basemap_base/${z}/${x}/${y}.png"
38 ];
39 options = OpenLayers.Util.extend({
40 numZoomLevels: 18,
41 buffer: 0,
42 transitionEffect: "resize"
43 }, options);
44 var newArguments = [name, url, options];
45 OpenLayers.Layer.XYZ.prototype.initialize.apply(this, newArguments);
46 },
47
48 CLASS_NAME: "OpenLayers.Layer.OSM.StreetBrowser"
49 });
50
51 function initialize(lat, lon, trace) {
52 useTrace = trace;
53
54 map = new OpenLayers.Map("basicMap",
55 {controls:[
56 new OpenLayers.Control.Navigation(),
57 new OpenLayers.Control.PanZoomBar()]});
58 fromProjection = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
59 toProjection = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator
60 zoom = 0;
61
62 var mapnik = new OpenLayers.Layer.OSM.StreetBrowser();
63 var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);
64
65 map.addLayer(mapnik);
66
67 var size = new OpenLayers.Size(40,40);
68 var offset = new OpenLayers.Pixel(-size.w/2, -size.h/2);
69 icon = new OpenLayers.Icon("qrc:///map/crosshair.png", size, offset);
70
71 var sizeT = new OpenLayers.Size(2,2);
72 var offsetT = new OpenLayers.Pixel(-sizeT.w/2, -13);
73 traceIcon = new OpenLayers.Icon("qrc:///map/reddot.png", sizeT, offsetT);
74
75 markers = new OpenLayers.Layer.Markers("Markers");
76 marker = new OpenLayers.Marker(position, icon);
77 markers.addMarker(marker);
78
79 map.addLayer(markers);
80
81 map.setCenter(position, 3);
82 }
83
84 function gotoLocation(lat, lon) {
85 var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);
86 if (zoom == 0) {
87 zoom = 15;
88 map.setCenter(position, zoom);
89 }
90 else {
91 map.setCenter(position);
92 }
93 markers.removeMarker(marker);
94 marker = new OpenLayers.Marker(position, icon);
95 markers.addMarker(marker);
96 if (useTrace == 1) {
97 var trace = new OpenLayers.Marker(position, traceIcon.clone());
98 markers.addMarker(trace);
99 }
100 }
101
102 </script>
103
104 </head>
105
106 <body>
107 <div id="basicMap"></div>
108 </body>
109
110</html>
Note: See TracBrowser for help on using the repository browser.