Miscellany

<script src="/biketracker/web/bundles/jsbiketracker/OpenLayers/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var records = [{"longitude":138098619,"latitude":574051847},{"longitude":138099406,"latitude":574051869},{"longitude":138099910,"latitude":574052324},{"longitude":138101696,"latitude":574050975},{"longitude":138102850,"latitude":574051483},{"longitude":138105200,"latitude":574052790},{"longitude":138105297,"latitude":574053305},{"longitude":138106352,"latitude":574051915},{"longitude":138107697,"latitude":574048101},{"longitude":138110013,"latitude":574048596},{"longitude":138110430,"latitude":574048202}];
</script>

<div id="map_container" style="width: 100%; height: 400px"></div>

<script type="text/javascript">
var init_map = function() {

    var map = new OpenLayers.Map("map_container");

    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    
    var lineLayer = new OpenLayers.Layer.Vector("Bike Path"); 
    var points = new Array(records.length);
    for (item in records) {
        points[item] = new OpenLayers.Geometry.Point(
           records[item].longitude*180/Math.pow(2,31), records[item].latitude*180/Math.pow(2,31)
        );
    }
    var line = new OpenLayers.Geometry.LineString(points);
    var style = { strokeColor: '#ff0000',
                  strokeOpacity: 0.5,
                  strokeWidth: 5
                };

    var lineFeature = new OpenLayers.Feature.Vector(
        line, null, style
    );
    lineLayer.addFeatures([lineFeature]);
    map.addLayer(lineLayer);
    map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));

    map.setCenter(new OpenLayers.LonLat(records[0].longitude*180/Math.pow(2,31), records[0].latitude*180/Math.pow(2,31))
      .transform(
        new OpenLayers.Projection("EPSG:4326"),
        new OpenLayers.Projection("EPSG:900913")
      ), 14
    );
};

$(document).ready(function() {
    init_map();
});
</script>