Upgrading openlayers to 3.x

1 files changed, 109 insertions, 44 deletions

diff --git a/lib/postrunner/TrackView.rb b/lib/postrunner/TrackView.rb
index fc7bc21..fb902d4 100644
--- a/lib/postrunner/TrackView.rb
+++ b/lib/postrunner/TrackView.rb
@@ -31,9 +31,9 @@ module PostRunner
         doc.unique(:trackview_style) {
           doc.style(style)
           doc.link({ 'rel' => 'stylesheet',
-                     'href' => 'openlayers/theme/default/style.css',
+                     'href' => 'openlayers/ol.css',
                      'type' => 'text/css' })
-          doc.script({ 'src' => 'openlayers/OpenLayers.js' })
+          doc.script({ 'src' => 'openlayers/ol.js' })
         }
         doc.script(java_script)
       }
@@ -61,59 +61,103 @@ EOT
 
     def java_script
       js = <<EOT
-var map;
-
 function init() {
-  var mercator = new OpenLayers.Projection("EPSG:900913");
-  var geographic = new OpenLayers.Projection("EPSG:4326");
 EOT
 
       center_long = @session.swc_long +
         (@session.nec_long - @session.swc_long) / 2.0
       center_lat = @session.swc_lat +
         (@session.nec_lat - @session.swc_lat) / 2.0
-      last_lap = @activity.fit_activity.laps[-1]
 
-      js << <<EOT
-  map = new OpenLayers.Map({
-      div: "map",
-      projection: mercator,
-      layers: [ new OpenLayers.Layer.OSM() ],
-      center: new OpenLayers.LonLat(#{center_long}, #{center_lat}).transform(geographic, mercator),
-      zoom: 13
-  });
-EOT
-      js << <<"EOT"
-  track_layer = new OpenLayers.Layer.PointTrack("Track",
-    {style: {strokeColor: '#FF0000',  strokeWidth: 5}});
-  map.addLayer(track_layer);
-  track_layer.addNodes([
-EOT
       track_points(js)
-
+      lap_markers(js)
       js << <<"EOT"
-    ]);
-  var markers = new OpenLayers.Layer.Markers( "Markers" );
-  map.addLayer(markers);
-
-  var size = new OpenLayers.Size(21,25);
-  var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
+  lm_w = 40;
+  lm_h = 100;
+  var map = new ol.Map({
+    view: new ol.View({
+      center: ol.proj.transform([ #{center_long}, #{center_lat} ],
+                                'EPSG:4326', 'EPSG:900913'),
+      zoom: 14,
+    }),
+    layers: [
+      new ol.layer.Tile({
+        source: new ol.source.MapQuest({layer: 'osm'})
+      }),
+      new ol.layer.Vector({
+        source: source_vector = new ol.source.Vector({
+          features: [
+            new ol.Feature({
+              geometry: new ol.geom.LineString(track_points)
+            })
+          ]
+        }),
+        style: [
+          new ol.style.Style({
+            stroke: new ol.style.Stroke({
+              color: 'red',
+              width: 5
+            }),
+            fill: new ol.style.Fill({
+              color: 'white'
+            })
+          })
+        ]
+      }),
+      new ol.layer.Vector({
+        source: lap_marker_source = new ol.source.Vector(),
+        style: function(feature, resolution) {
+          return [
+            new ol.style.Style({
+              stroke: new ol.style.Stroke({
+                color: 'black',
+                width: 2
+              }),
+              fill: new ol.style.Fill({
+                color: 'red'
+              }),
+              text: new ol.style.Text({
+                font: '' + (lm_w / resolution) + 'px helvetica,sans-serif',
+                text: resolution < (lm_w / 8.0) ? feature.get('name') : '',
+                fill: new ol.style.Fill({
+                  color: 'black'
+                })
+              })
+            })
+          ];
+        }
+      })
+    ],
+    target: "map"
+  });
+  for (var i in lap_markers) {
+    x = lap_markers[i][0];
+    y = lap_markers[i][1];
+    lap_marker_source.addFeature(
+      new ol.Feature({
+        geometry: new ol.geom.Polygon([[[ x - lm_w, y + lm_h ],
+                                        [ x, y ],
+                                        [ x + lm_w, y + lm_h ],
+                                        [ x - lm_w, y + lm_h ]]])
+      })
+    );
+    lap_marker_source.addFeature(
+      new ol.Feature({
+        geometry: new ol.geom.Circle([ x, y + lm_h + 3 ], lm_w),
+        name: (i == 0 ? 'S' : i == lap_markers.length - 1 ? 'F' : i),
+      })
+    );
+  };
+};
 EOT
-      set_marker(js, 'marker-green', @session.start_position_long,
-                 @session.start_position_lat)
-      @activity.fit_activity.laps[0..-2].each do |lap|
-        set_marker(js, 'marker-blue',
-                   lap.end_position_long, lap.end_position_lat)
-      end
-      set_marker(js, 'marker',
-                 last_lap.end_position_long, last_lap.end_position_lat)
-      js << "\n};"
 
       js
     end
 
     def track_points(script)
       first = true
+      script << "var track_points = [\n"
+
       @activity.fit_activity.sessions.each do |session|
         session.records.each do |record|
           long = record.position_long
@@ -123,19 +167,40 @@ EOT
           if first
             first = false
           else
-            script << ","
+            script << ', '
           end
-          script << <<"EOT"
-new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(#{long}, #{lat}).transform(geographic, mercator))
-EOT
+          script << "[ #{long}, #{lat} ]"
         end
       end
+      script << <<"EOT"
+];
+track_points.forEach(
+  function(coords, i, arr) {
+    arr[i] = ol.proj.transform(coords, 'EPSG:4326', 'EPSG:900913');
+  }
+);
+EOT
     end
 
-    def set_marker(script, type, long, lat)
+    def lap_markers(script)
+      script << "var lap_markers = [\n" +
+        "[ #{@session.start_position_long}," +
+         " #{@session.start_position_lat} ], "
+      @activity.fit_activity.laps.each do |lap|
+        script << "[ #{lap.end_position_long}, #{lap.end_position_lat} ], "
+      end
+      last_lap = @activity.fit_activity.laps[-1]
+      script << "[ #{last_lap.end_position_long},
+                   #{last_lap.end_position_lat} ]"
       script << <<"EOT"
-    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(#{long},#{lat}).transform(geographic, mercator),new OpenLayers.Icon('openlayers/img/#{type}.png',size,offset)));
+];
+lap_markers.forEach(
+  function(coords, i, arr) {
+    arr[i] = ol.proj.transform(coords, 'EPSG:4326', 'EPSG:900913');
+  }
+);
 EOT
+
     end
 
   end