← Back to branch summary

~ubuntu-fr-webteam/ubuntu-fr-map/trunk

« back to all changes in this revision

Viewing changes to index.html

  • Committer: root
  • Date: 2011-07-30 19:01:24 UTC
  • Revision ID: root@ubuntu-fr.kofuke.org-20110730190124-gqz34e0becpzw2eb
Initial commit.

Show diffs side-by-side

added added

removed removed

Lines of Context:
index.html
 
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
2
<html>
 
3
<head>
 
4
  <title>OpenDataMap.ca - Open Data Ottawa Points of Interest</title>
 
5
 
 
6
  <meta charset="UTF-8">
 
7
 
 
8
  <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
 
9
 
 
10
  <script type="text/javascript" src="openlayers/OpenLayers.js" charset="utf-8"></script>
 
11
  <script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" charset="utf-8"></script>
 
12
 
 
13
  <script type="text/javascript" charset="utf-8">
 
14
    function set_cookie(c_key, c_val) {
 
15
      var c = c_key + '=' + c_val;
 
16
 
 
17
      // cookie expires in 1 month
 
18
      var dt = new Date();
 
19
      dt.setTime(dt.getTime() + (30 * 24 * 60 * 60 * 1000));
 
20
      c = c + '; expires=' + dt.toGMTString();
 
21
      c = c + '; path=/';
 
22
      document.cookie = c;
 
23
    }
 
24
 
 
25
    function get_cookie(c_key) {
 
26
      var c_key_eq = c_key + "=";
 
27
      var cookies = document.cookie.split(';');
 
28
      var i;
 
29
      for(i = 0; i < cookies.length; i++) {
 
30
        var cookie = cookies[i];
 
31
        while (cookie.charAt(0)==' ') { 
 
32
          cookie = cookie.substring(1, cookie.length);
 
33
        }
 
34
 
 
35
        if (cookie.indexOf(c_key_eq) == 0) {
 
36
          return cookie.substring(c_key_eq.length, cookie.length);
 
37
        }
 
38
      }
 
39
 
 
40
      return null;
 
41
    }
 
42
 
 
43
    // Coordinates for Ottawa, ON or values saved in cookies
 
44
    var lat = get_cookie('lat') != null ? parseFloat(get_cookie('lat').replace(/^\s+|\s+$/g,"")) : 48.8957;
 
45
    var lon = get_cookie('lon') != null ? parseFloat(get_cookie('lon').replace(/^\s+|\s+$/g,"")) : 2.388;
 
46
    var zoom = get_cookie('zoom') != null ? parseInt(get_cookie('zoom').replace(/^\s+|\s+$/g,"")) : 14;
 
47
 
 
48
    var last_zoom = zoom;
 
49
        
 
50
    var map; // holds Map object
 
51
    var markers = {users: null, events: null}; // holds Markers object
 
52
    var my_markers = new Array(); // our list of Markers
 
53
 
 
54
    // Set the language to English
 
55
    OpenLayers.Lang.setCode("en");
 
56
 
 
57
    // Determines if the marker is within the bounds of the visible part of the map at the current zoom level
 
58
    function marker_is_in_view(marker) {
 
59
      var tlLonLat = map.getLonLatFromPixel(new OpenLayers.Pixel(1,1)).
 
60
            transform(map.getProjectionObject(),map.displayProjection);
 
61
      var mapsize = map.getSize();
 
62
      var brLonLat = map.getLonLatFromPixel(new OpenLayers.Pixel(mapsize.w - 1, mapsize.h - 1)).
 
63
            transform(map.getProjectionObject(),map.displayProjection);
 
64
 
 
65
      var tlLonLatF = new OpenLayers.LonLat(tlLonLat.lon, tlLonLat.lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 
66
      var brLonLatF = new OpenLayers.LonLat(brLonLat.lon, brLonLat.lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 
67
 
 
68
      if (tlLonLatF.lon <= marker.lonlat.lon && marker.lonlat.lon <= brLonLatF.lon &&
 
69
          tlLonLatF.lat >= marker.lonlat.lat && marker.lonlat.lat >= brLonLatF.lat) {
 
70
        return 1;
 
71
      } else {
 
72
        return 0;
 
73
      }
 
74
    }
 
75
 
 
76
    // Determines if the parameter is in the my_markers array
 
77
    function marker_in_my_markers(marker) {
 
78
      for (var i = 0; i < my_markers.length; i++) {
 
79
        if (my_markers[i].lonlat.lon == marker.lonlat.lon && my_markers[i].lonlat.lat == marker.lonlat.lat) {
 
80
          return 1;
 
81
        }
 
82
      }
 
83
      return 0;
 
84
    }
 
85
 
 
86
    // When the map is moved, fetch some markers
 
87
    var i = 0;
 
88
    function moveend_listener(evt) {
 
89
      if (i == 0) {
 
90
        i = 1;
 
91
        return;
 
92
      }
 
93
      var zoom = map.getZoom();
 
94
      var tlLonLat = map.getLonLatFromPixel(new OpenLayers.Pixel(1,1)).
 
95
            transform(map.getProjectionObject(),map.displayProjection);
 
96
      var mapsize = map.getSize();
 
97
      var brLonLat = map.getLonLatFromPixel(new OpenLayers.Pixel(mapsize.w - 1, mapsize.h - 1)).
 
98
            transform(map.getProjectionObject(),map.displayProjection);
 
99
 
 
100
      var url = (function() {
 
101
        var more = 0.5;
 
102
        var width = (tlLonLat.lat - brLonLat.lat) * more;
 
103
        var height = (brLonLat.lon - tlLonLat.lon) * more;
 
104
 
 
105
        return function(layer) {
 
106
          return 'http://apicarte.ubuntu-fr.org/r/'
 
107
             + layer
 
108
             + '/' + (brLonLat.lat - width)
 
109
             + ',' + (tlLonLat.lon - height)
 
110
             + ',' + (tlLonLat.lat + width)
 
111
             + ',' + (brLonLat.lon + height) + '.json';
 
112
        }
 
113
      })();
 
114
 
 
115
      // GET and process some markers
 
116
      var cb = function(evt) {
 
117
        var request = this;
 
118
 
 
119
        if (request.readyState != 4)
 
120
          return;
 
121
 
 
122
        if (request.status != 200)
 
123
          return;
 
124
 
 
125
        var data = request.responseText.indexOf('{');
 
126
        var layer = request.responseText.substring(0, data);
 
127
        data = JSON.parse(request.responseText.substring(data));
 
128
 
 
129
        var my_markers_2 = new Array();
 
130
        while (my_markers.length > 0) {
 
131
          var current_marker = my_markers.pop();
 
132
          if (last_zoom < map.getZoom() && marker_is_in_view(current_marker) == 1) {
 
133
            my_markers_2.push(current_marker);
 
134
          } else {
 
135
            markers[layer].removeMarker(current_marker);
 
136
            current_marker.destroy();
 
137
          }
 
138
        }
 
139
        my_markers = my_markers_2;
 
140
        last_zoom = map.getZoom();
 
141
 
 
142
        data.matches.forEach(function(wpt) {
 
143
          // Build a new marker
 
144
          var size = new OpenLayers.Size(32, 37);
 
145
          var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
 
146
          var icon = new OpenLayers.Icon("http://osm.org/images/osm_logo.png", size, offset);
 
147
          var lonLatMarker = new OpenLayers.LonLat(wpt.longitude, wpt.latitude).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 
148
          var marker = new OpenLayers.Marker(lonLatMarker, icon);
 
149
 
 
150
          if (marker_in_my_markers(marker) == 1) {
 
151
            // if we already have this marker on the map, don't try to re-add it
 
152
            marker.destroy();
 
153
          } else {
 
154
            // Add the marker to the map
 
155
            var feature = new OpenLayers.Feature(markers[layer], lonLatMarker);
 
156
            feature.closeBox = true;
 
157
            feature.popupClass = OpenLayers.Class(OpenLayers.Popup.AnchoredBubble, {minSize: new OpenLayers.Size(300, 180) } );
 
158
            feature.data.popupContentHTML = '<h2>' + wpt.key + '</h2><p>' + wpt.properties.desc + '</p>';
 
159
            feature.data.overflow = 'auto';
 
160
            marker.feature = feature;
 
161
 
 
162
            var markerClick = function(evt) {
 
163
              if (this.popup == null) {
 
164
                this.popup = this.createPopup(this.closeBox);
 
165
                map.addPopup(this.popup);
 
166
                this.popup.show();
 
167
              } else {
 
168
                this.popup.toggle();
 
169
              }
 
170
              OpenLayers.Event.stop(evt);
 
171
            };
 
172
 
 
173
            marker.events.register("mousedown", feature, markerClick);
 
174
 
 
175
            markers[layer].addMarker(marker);
 
176
            my_markers.push(marker);
 
177
          }
 
178
        });
 
179
      };
 
180
 
 
181
      for (var layer in markers) {
 
182
        var request = new XMLHttpRequest;
 
183
        request.onreadystatechange = cb;
 
184
        request.open('GET', url(layer), true);
 
185
        request.send();
 
186
      }
 
187
 
 
188
      var centerLonLat = map.getLonLatFromPixel(new OpenLayers.Pixel(mapsize.w / 2, mapsize.h / 2)). transform(map.getProjectionObject(),map.displayProjection);
 
189
 
 
190
      set_cookie('lon', centerLonLat.lon);
 
191
      set_cookie('lat', centerLonLat.lat);
 
192
      set_cookie('zoom', map.getZoom());
 
193
    }
 
194
 
 
195
    // Initialize the map
 
196
    function init() {
 
197
 
 
198
      map = new OpenLayers.Map ("map", {
 
199
        controls: [new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar()],
 
200
        maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
 
201
        maxResolution: 156543.0399,
 
202
        numZoomLevels: 19,
 
203
        units: 'm',
 
204
        projection: new OpenLayers.Projection("EPSG:900913"),
 
205
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
 
206
        eventListeners: { "moveend": moveend_listener, "zoomend": moveend_listener }
 
207
      } );
 
208
 
 
209
      var layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
 
210
      map.addLayer(layerMapnik);
 
211
 
 
212
      var layerTah = new OpenLayers.Layer.OSM.Osmarender("Tiles@Home");
 
213
      map.addLayer(layerTah);
 
214
 
 
215
      var layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
 
216
      map.addLayer(layerCycleMap);
 
217
 
 
218
      for (var layer in markers) {
 
219
        markers[layer] = new OpenLayers.Layer.Markers(layer.name);
 
220
        map.addLayer(markers[layer]);
 
221
      }
 
222
 
 
223
      map.addControl(new OpenLayers.Control.LayerSwitcher());
 
224
 
 
225
      var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
 
226
      map.setCenter(lonLat, zoom);
 
227
    }
 
228
 
 
229
  </script>
 
230
</head>
 
231
<body onload="init();">
 
232
  <div id="map"></div>
 
233
</body>
 
234
</html>