From 06f75c9f0b0b03edd730d0dc1b7b61223059018e Mon Sep 17 00:00:00 2001
From: Sanj <b@pad.ma>
Date: Mon, 20 Feb 2012 23:48:23 +0530
Subject: [PATCH] lets put a map in there

---
 chaloBEST/static/js/editstops.js   | 256 +++++++++++++++++------------
 chaloBEST/templates/editstops.html |   1 +
 2 files changed, 154 insertions(+), 103 deletions(-)

diff --git a/chaloBEST/static/js/editstops.js b/chaloBEST/static/js/editstops.js
index 872b65c..dbfeb7f 100644
--- a/chaloBEST/static/js/editstops.js
+++ b/chaloBEST/static/js/editstops.js
@@ -1,110 +1,160 @@
-var API_BASE = "/1.0/"
-$(function() {
-    $('.tabButton').click(function() {
-        if ($(this).hasClass("selected")) {
-            return;
-        }
-        var $that = $(this);
-        var name = $that.attr("data-name");
-        var $listWrapper = $('#' + name);
-        if ($that.data("loaded")) {
-            $.noop(); //dont load data
-        } else {
-            $that.data("loaded", true);
-            var $list = $('#' + name + 'List');
-            var url = API_BASE + name + "/";
-            var $loadingLi = $('<div />').text("Loading...").appendTo($list);
-            $.getJSON(url, {}, function(items) {
-                $loadingLi.remove();
-                $.each(items, function(i,v) {
-                    var $li = $('<div />')
-                        .addClass("listItem")
-                        .appendTo($list);
-                    var $txt = $('<span >').addClass("listItemText").text(v).appendTo($li);
-                });
-            });
-        }
-
-        $('.listWrapper').hide();
-        $listWrapper.show();
-        $('.selected').removeClass("selected");
-        $that.addClass("selected");
-    });
-
-    $('.list').click(function(e) {
-        var name = $(this).attr("id").replace("sList", ""); //FIXME: stick name in a data attr or so?
-        var $target = $(e.target).parent();
-        if (!$target.hasClass('listItem')) {
-            return;
-        }
-        if ($target.data("loading")) {
-            return;
-        }
-        $('.selectedListItem').removeClass("selectedListItem");
-        $target.addClass("selectedListItem");
-        if ($target.data("hasList")) {
-            $target.find(".stopsList").toggle();
-            return;         
-        } 
-        var url = API_BASE + name + "/" + $target.find(".listItemText").text();
-        $target.data("loading", true);
-        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 stops = stopsGeojson.features;
-            var $stopsList = getStopsList(stops);
-            $target.append($stopsList);
-            $target.data("hasList", true);
-            $target.data("loading", false);
-        });
-    });
-
-    $('.listSearch').keyup(function(e) {
-        var val = $(this).val();
-        var name = $(this).attr("id").replace("Search", "");
-        var $list = $('#' + name + "List");
-        $list.find(".listItem").each(function() {
-            var $that = $(this);
-            var txt = $that.find(".listItemText").text();
-            if (txt.indexOf(val) == -1) {
-                $that.hide();
-            } else {
-                $that.show();
+var API_BASE = "/1.0/",
+    map;
+(function() {
+    $(function() {
+        initMap();
+        $('.tabButton').click(function() {
+            if ($(this).hasClass("selected")) {
+                return;
             }
+            var $that = $(this);
+            var name = $that.attr("data-name");
+            var $listWrapper = $('#' + name);
+            if ($that.data("loaded")) {
+                $.noop(); //dont load data
+            } else {
+                $that.data("loaded", true);
+                var $list = $('#' + name + 'List');
+                var url = API_BASE + name + "/";
+                var $loadingLi = $('<div />').text("Loading...").appendTo($list);
+                $.getJSON(url, {}, function(items) {
+                    $loadingLi.remove();
+                    $.each(items, function(i,v) {
+                        var $li = $('<div />')
+                            .addClass("listItem")
+                            .appendTo($list);
+                        var $txt = $('<span >').addClass("listItemText").text(v).appendTo($li);
+                    });
+                });
+            }
+
+            $('.listWrapper').hide();
+            $listWrapper.show();
+            $('.selected').removeClass("selected");
+            $that.addClass("selected");
         });
+
+        $('.list').click(function(e) {
+            var name = $(this).attr("id").replace("sList", ""); //FIXME: stick name in a data attr or so?
+            var $target = $(e.target).parent();
+            if (!$target.hasClass('listItem')) {
+                return;
+            }
+            if ($target.data("loading")) {
+                return;
+            }
+            $('.selectedListItem').removeClass("selectedListItem");
+            $target.addClass("selectedListItem");
+            if ($target.data("hasList")) {
+                $target.find(".stopsList").toggle();
+                return;         
+            } 
+            var url = API_BASE + name + "/" + $target.find(".listItemText").text();
+            $target.data("loading", true);
+            var $loading = $('<span />').addClass("loadingSpan").text("Loading...").appendTo($target);
+            $.getJSON(url, {}, function(obj) {
+                $loading.remove();
+                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);
+            });
+        });
+
+        $('.listSearch').keyup(function(e) {
+            var val = $(this).val();
+            var name = $(this).attr("id").replace("Search", "");
+            var $list = $('#' + name + "List");
+            $list.find(".listItem").each(function() {
+                var $that = $(this);
+                var txt = $that.find(".listItemText").text();
+                if (txt.indexOf(val) == -1) {
+                    $that.hide();
+                } else {
+                    $that.show();
+                }
+            });
+        });
+
     });
 
-});
+    function getStopsList(stops) {
+        var $ul = $('<ul />').addClass("stopsList").click(function(e) {
+            var $target = $(e.target);
+            if ($target.hasClass("selectedStop")) {
+                return;
+            }
+            $('.selectedStop').removeClass("selectedStop");
+            $target.addClass("selectedStop");
+            var props = $target.data("properties");
+            var $form = getStopForm(props);
+            $('#formCol').empty();
+            $('#formCol').append($form);
+        });
+        $.each(stops, function(i,v) {
+            var props = v.properties;
+            var geom = v.geometry;
+            var $li = $('<li />').addClass("stopItem").data("slug", props.slug).data("properties", props).data("geometry", geom).text(props.display_name).appendTo($ul);
+            $.isEmptyObject(geom) ? $li.addClass("no_has_point") : $li.addClass("has_point");
+        });
+        return $ul;
+    }
 
-function getStopsList(stops) {
-    var $ul = $('<ul />').addClass("stopsList").click(function(e) {
-        var $target = $(e.target);
-        if ($target.hasClass("selectedStop")) {
-            return;
-        }
-        $('.selectedStop').removeClass("selectedStop");
-        $target.addClass("selectedStop");
-        var props = $target.data("properties");
-        var $form = getStopForm(props);
-        $('#formCol').empty();
-        $('#formCol').append($form);
-    });
-    $.each(stops, function(i,v) {
-        var props = v.properties;
-        var geom = v.geometry;
-        var $li = $('<li />').addClass("stopItem").data("slug", props.slug).data("properties", props).data("geometry", geom).text(props.display_name).appendTo($ul);
-        $.isEmptyObject(geom) ? $li.addClass("no_has_point") : $li.addClass("has_point");
-    });
-    return $ul;
-}
+    function getStopForm(stop) {
+    //    console.log(stop);
+        var $div = $('<div />');
+        var $displayName = $('<div />').text(stop.display_name).appendTo($div);
+        var $routes = $('<div />').text("Routes: " + stop.routes).appendTo($div); 
+    //    var $form = $('<form />').apendTo($div);    
+        return $div;
+    }
 
-function getStopForm(stop) {
-//    console.log(stop);
-    var $div = $('<div />');
-    var $displayName = $('<div />').text(stop.display_name).appendTo($div);
-    var $routes = $('<div />').text("Routes: " + stop.routes).appendTo($div); 
-//    var $form = $('<form />').apendTo($div);    
-    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);
+    }
+})();
diff --git a/chaloBEST/templates/editstops.html b/chaloBEST/templates/editstops.html
index 0d6fc10..cf84e44 100644
--- a/chaloBEST/templates/editstops.html
+++ b/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 %}