Zoom to a (sub)category (#38)

git-svn-id: http://www.peacefrogs.net/svn/chimere/trunk@14 9215b0d5-fb2c-4bbd-8d3e-bd2e9090e864

5 files changed, 106 insertions, 36 deletions

diff --git a/static/base.js b/static/base.js
index 19b3945..f880b61 100644
--- a/static/base.js
+++ b/static/base.js
@@ -1,3 +1,31 @@
+/* base function shared by some pages */
+/* Copyright (C) 2009  Étienne Loks  <etienne.loks_AT_peacefrogsDOTnet>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+See the file COPYING for details.
+*/
+
+/* show a block panel */
+function show(id){
+    document.getElementById(id).style.display = 'block';
+}
+
+/* hide a panel */
+function hide(id){
+    document.getElementById(id).style.display = 'None';
+}
 
 function saveExtent() {
     /* save the current extent in a cookie */
@@ -29,4 +57,4 @@ function zoomToCurrentExtent(map){
     else{
         return;
     }
-}
\ No newline at end of file
+}
diff --git a/static/icons/zoom.png b/static/icons/zoom.png
new file mode 100644
index 0000000..3a53680
--- /dev/null
+++ b/static/icons/zoom.png
diff --git a/static/main_map.js b/static/main_map.js
index 6370117..bd149a1 100644
--- a/static/main_map.js
+++ b/static/main_map.js
@@ -30,16 +30,6 @@ function checkAll(item, ids){
     }
 }
 
-/* show a block panel */
-function show(id){
-    document.getElementById(id).style.display = 'block';
-}
-
-/* hide a panel */
-function hide(id){
-    document.getElementById(id).style.display = 'None';
-}
-
 var map;
 
 /* availaible map layers */
@@ -75,27 +65,78 @@ function showPop(feature) {
     currentPopup = feature.popup;
 }
 
-/* load geo objects with an AJAX request */
-function loadGeoObjects(){
+/* check checked categories */
+var checked_categories;
+var display_submited = false;
+
+function updateCheckedCategories(){
     /* get checked categories */
     inputs = window.document.forms["frm_categories"];
-    var categories = '';
-    var display_submited = false;
+    checked_categories = '';
+    display_submited = false;
     for (var i = 0; i < inputs.length; i++) {
         input = inputs[i];
         if (input.checked
              && input.name.substring('category_'.length, 0) == 'category_'){
             id = input.name.substring('category_'.length, input.name.length);
-            if(categories) categories += '_';
-            categories += id;
+            if(checked_categories) checked_categories += '_';
+            checked_categories += id;
         }
         if (input.checked && input.name == 'display_submited'){
             display_submited = true;
         }
     }
+}
+
+/* load marker and route layer from a JSON feature string */
+function loadLayersFromJSON(layer_markers, layer_vectors, geo_objects){
+    for (var i = 0; i < geo_objects.features.length; i++) {
+        var feature = geo_objects.features[i];
+        if (feature.geometry.type == 'Point'){
+            putMarker(layer_markers, feature);
+        } else if (feature.geometry.type == 'LineString') {
+            putRoute(layer_vectors, feature);
+        }
+    }
+}
+
+/* zoom to a desired category */
+function zoomToCategory(categorie_ids){
+    updateCheckedCategories();
     /* 0 stand for all categories */
-    if (!categories) categories = '0';
-    var uri = "/chimere/getGeoObjects/" + categories;
+    var uri = "/chimere/getGeoObjects/" + categorie_ids;
+    if (display_submited) uri += "/A_S";
+    OpenLayers.loadURL(uri, '', this, zoomToCategoryExtent);
+}
+
+/* zoom to a selected category from an http response GeoJSON */
+function zoomToCategoryExtent(response){
+    if (response.responseText.indexOf('no results') != -1) return;
+    var fakeLayerVectors = new OpenLayers.Layer.Vector("Fake vector layer");
+    var fakeLayerMarkers = new OpenLayers.Layer.Markers('Fake POIs layer');
+    var json = new OpenLayers.Format.JSON();
+    var geo_objects = json.read(response.responseText);
+    /* load every geo object */
+    loadLayersFromJSON(fakeLayerMarkers, fakeLayerVectors, geo_objects);
+    var bounds = fakeLayerMarkers.getDataExtent();
+    if (bounds){
+        bounds.extend(fakeLayerVectors.getDataExtent());
+    } else {
+        bounds = fakeLayerVectors.getDataExtent();
+    }
+    if(bounds){
+        map.zoomToExtent(bounds);
+    }
+    fakeLayerMarkers.destroy();
+    fakeLayerVectors.destroy();
+}
+
+/* load geo objects with an AJAX request */
+function loadGeoObjects(){
+    updateCheckedCategories();
+    /* 0 stand for all categories */
+    if (!checked_categories) checked_categories = '0';
+    var uri = "/chimere/getGeoObjects/" + checked_categories;
     if (display_submited) uri += "/A_S";
     OpenLayers.loadURL(uri, '', this, setGeoObjects);
 }
@@ -120,13 +161,7 @@ function setGeoObjects(response){
         var json = new OpenLayers.Format.JSON();
         var geo_objects = json.read(response.responseText);
         /* load every geo object */
-        for (var i = 0; i < geo_objects.features.length; i++) {
-            var feature = geo_objects.features[i];
-            if (feature.geometry.type == 'Point') putMarker(feature);
-            if (feature.geometry.type == 'LineString') {
-                putRoute(feature);
-            }
-        }
+        loadLayersFromJSON(layerMarkers, layerVectors, geo_objects);
         /*
         var geojson = new OpenLayers.Format.GeoJSON();
         var markers_pt = geojson.read(response.responseText);
@@ -136,9 +171,8 @@ function setGeoObjects(response){
     }
 }
 
-
 /* put a route on the map */
-function putRoute(route) {
+function putRoute(layer, route) {
     var polyline = route.geometry;
     var point_array = new Array();
     for (i=0; i<polyline.coordinates.length; i++){
@@ -155,12 +189,12 @@ function putRoute(route) {
     style.strokeWidth = 3;
     currentFeature.style = style;
     currentFeature.geometry = linestring;
-    layerVectors.addFeatures([currentFeature]);
+    layer.addFeatures([currentFeature]);
 }
 
 
 /* put a marker on the map */
-function putMarker(mark) {
+function putMarker(layer, mark) {
     /* initialise a new marker with appropriate attribute for setting a
     marker */
     lat = mark.geometry.coordinates[1];
@@ -212,7 +246,7 @@ function putMarker(mark) {
     marker.events.register('mousedown', feature, markerClick);
     marker.events.register('mouseover', feature, markerOver);
     marker.events.register('mouseout', feature, markerOut);
-    layerMarkers.addMarker(marker);
+    layer.addMarker(marker);
     return feature;
 }
 
@@ -230,8 +264,6 @@ function setDetail(response){
     }
 }
 
-
-
 /* main initialisation function */
 function init(){
     /* set the main map */
diff --git a/static/styles.css b/static/styles.css
index f07784c..d7880d7 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -227,7 +227,7 @@ margin:0;
 padding:0;
 }
 
-ul.subcategories img{
+ul.subcategories label img{
 height:20px;
 }
 
diff --git a/templates/main_map.html b/templates/main_map.html
index 20f740a..d5dc43c 100644
--- a/templates/main_map.html
+++ b/templates/main_map.html
@@ -4,9 +4,19 @@
 <div id='panel'>
 <form method='post' name='frm_categories' id='frm_categories'>
 <ul id='categories'>{% for category, lst_sub_categories in sub_categories %}
-  <li><input type='checkbox' id='maincat_{{category.id}}' onclick='var lst=new Array();{% for sub_category in lst_sub_categories %}lst.push("{{sub_category.id}}");{% endfor %}checkAll(this, lst);loadGeoObjects();' {% if category.selected %} checked='checked'{%endif%}/>{% trans category.name %}
+<script language='javascript'><!--
+var lst_{{category.id}}=new Array();
+{% for sub_category in lst_sub_categories %}
+lst_{{category.id}}.push("{{sub_category.id}}");{% endfor %}
+--></script>
+  <li><input type='checkbox' id='maincat_{{category.id}}' onclick='checkAll(this, lst_{{category.id}});loadGeoObjects();' {% if category.selected %} checked='checked'{%endif%} />
+ {% trans category.name %}
+ <img class='zoom_image' alt='{% trans "Zoom to" %} {{category.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToCategory(lst_{{category.id}}.join("_"))'/>
     <ul class='subcategories'>{% for sub_category in lst_sub_categories %}
-      <li><input type='checkbox' onclick='loadGeoObjects()' name='category_{{sub_category.id}}' id='category_{{sub_category.id}}'{% if sub_category.selected %} checked='checked'{% endif %}/> <label for='{{sub_category.id}}'><img alt='{{sub_category.name}}' src='{{media_path}}{{sub_category.icon.image}}'/> {% trans sub_category.name %}</label></li>{% endfor %}
+      <li><input type='checkbox' onclick='loadGeoObjects()' name='category_{{sub_category.id}}' id='category_{{sub_category.id}}'{% if sub_category.selected %} checked='checked'{% endif %}/> <label for='{{sub_category.id}}'>
+      <img alt='{{sub_category.name}}' src='{{media_path}}{{sub_category.icon.image}}'/>
+      {% trans sub_category.name %}</label>
+      <img class='zoom_image' alt='{% trans "Zoom to" %} {{sub_category.name}}' src='{{media_path}}icons/zoom.png' onclick='zoomToCategory({{sub_category.id}})'/></li>{% endfor %}
     </ul>
   </li>{% endfor %}
   <li id='display_submited'><input type='checkbox'  onclick='loadGeoObjects()' name='display_submited'/> {% trans "Display markers and routes waiting for validation"%}</li>