app/views/browse/_map.rhtml

   1 <%= javascript_include_tag '/openlayers/OpenLayers.js' %>
   2 <%= javascript_include_tag '/openlayers/OpenStreetMap.js' %>
   3 <%= javascript_include_tag 'map.js' %>
   4 <div style="float:right">
   5 <div id="small_map" style="width:250px; height: 300px; border: solid 1px black">
   6 </div>
   7 <script type="text/javascript">
   8   function init() {
   9   var obj_type = '<%= type %>';
  10   var obj_id = <%= id %>;
  11   var url = "/api/<%= "#{API_VERSION}" %>/<%= type %>/<%= id %>";
  12   if (obj_type == "way") {
  13     url += "/full";
  14   }
  15   var map = createMap('small_map', {controls: [new OpenLayers.Control.Navigation()]});
  16   var osm_layer = new OpenLayers.Layer.GML("OSM", url, {format: OpenLayers.Format.OSM, projection: new OpenLayers.Projection("EPSG:4326")});
  17   osm_layer.events.register("loadend", osm_layer, function() {
  18     $("loading").innerHTML = "";
  19     this.map.zoomToExtent( this.features[0].geometry.getBounds());
  20     var center = map.getCenter().clone().transform(this.map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
  21     $("larger_map").href = '/?lat='+center.lat+'&lon='+center.lon+'&zoom='+this.map.getZoom();
  22     $("larger_map").innerHTML = "View Larger Map";
  23   })
  24   map.addLayer(osm_layer);
  25   osm_layer.loadGML();
  26   osm_layer.loaded = true;
  27 }
  28 window.onload = init;
  29 </script>
  30 <span id="loading">Loading...</span>
  31 <a id="larger_map" href=""></a>
  32 </div>