lets put a map in there

chaloBEST/static/js/editstops.js

@@ -1,5 +1,8 @@
-var API_BASE = "/1.0/"
+var API_BASE = "/1.0/",
+    map;
+(function() {
     $(function() {
+        initMap();
         $('.tabButton').click(function() {
             if ($(this).hasClass("selected")) {
                 return;
@@ -51,9 +54,21 @@ $(function() {
             var $loading = $('<span />').addClass("loadingSpan").text("Loading...").appendTo($target);
             $.getJSON(url, {}, function(obj) {
                 $loading.remove();
-            var stopsGeojson = obj.stops; //TODO: render filtered geojson with known geometries on map
+                var stopsGeojson = obj.stops;              
                 var stops = stopsGeojson.features;
                 var $stopsList = getStopsList(stops);
+                var stopsWithGeom = [];
+                $.each(stopsGeojson.stops, function(i,v) {
+                    if (!$.isEmptyObject(v.geometry)) {
+                        stopsWithGeom.push(v);
+                    }    
+                });
+                stopsGeojson.stops = stopsWithGeom;
+                var currFeatures = jsonLayer.features;
+                jsonLayer.removeFeatures(currFeatures);
+                jsonLayer.addFeatures(geojson_format.read(stopsGeojson));
+                var maxExtent = jsonLayer.getDataExtent();
+                map.zoomToExtent(maxExtent);                
                 $target.append($stopsList);
                 $target.data("hasList", true);
                 $target.data("loading", false);
@@ -108,3 +123,38 @@ function getStopForm(stop) {
         return $div;
     }
 
+    function initMap() {
+        var center = new OpenLayers.LonLat(72.855211097628413, 19.010775291486027);
+        map = new OpenLayers.Map("mapCol", {});
+        var layers = [];
+        layers[0] = new OpenLayers.Layer.Google(
+                    "Google Streets", // the default
+                    {numZoomLevels: 20, isBaseLayer: true}
+                );
+        geojson_format = new OpenLayers.Format.GeoJSON();
+        //yes, jsonLayer is global. Yes, I know it's wrong.
+        jsonLayer = layers[1] = new OpenLayers.Layer.Vector({'geometryType': 'Point'});
+        //  map.addLayer(vector_layer);
+        map.addLayers(layers);
+        map.setCenter(center, 12);
+
+        mapControl = new OpenLayers.Control.SelectFeature(layers[1]);
+        zoomControl = new OpenLayers.Control.ZoomToMaxExtent();
+        map.addControl(mapControl);
+        //  map.addControl(zoomControl);
+        mapControl.activate();
+        //  zoomControl.activate();
+        layers[1].events.on({
+           'featureselected': onFeatureSelect,
+           'featureunselected': onFeatureUnselect
+        });  
+    }
+
+    function onFeatureSelect(feature) {
+        console.log("selected", feature);
+    }
+
+    function onFeatureUnselect(feature) {
+        console.log("unselected", feature);
+    }
+})();

chaloBEST/templates/editstops.html

@@ -3,6 +3,7 @@
 {% block head %}
 <link rel="stylesheet" href="/static/css/editstops.css" />
 <script type="text/javascript" src="/static/js/editstops.js"></script>
+<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>
 {% endblock %}