1 files changed, 172 insertions, 0 deletions
diff --git a/static/main_map.js b/static/main_map.js
new file mode 100644
index 0000000..9bb703f
--- /dev/null
+++ b/static/main_map.js
@@ -0,0 +1,172 @@
+/* main map */
+
+/* availaible map layers */
+var layerMapnik = new OpenLayers.Layer.OSM.Mapnik('Classic');
+var cyclemap = new OpenLayers.Layer.OSM.CycleMap("Cycle map", {
+      displayOutsideMaxExtent: true,
+      wrapDateLine: true});
+
+/* default size and offset for icon */
+var size = new OpenLayers.Size(21, 25);
+var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
+
+/* define global variable */
+var markers = new Array();
+var layerMarkers;
+
+var currentPopup;
+var currentFeature;
+var clicked = false;
+
+/* show a popup */
+function showPop(feature) {
+    if (currentPopup != null) {
+      currentPopup.hide();
+    }
+    if (feature.popup == null) {
+        feature.popup = feature.createPopup();
+        map.addPopup(feature.popup);
+    } else {
+        feature.popup.toggle();
+    }
+    currentPopup = feature.popup;
+}
+
+/* load markers with an AJAX request */
+function loadMarkers(){
+    /* get checked categories */
+    inputs = window.document.forms["frm_categories"];
+    var categories = '';
+    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;
+        }
+    }
+    /* 0 stand for all categories */
+    if (!categories) categories = '0';
+    var uri = "/chimere/getMarkers/" + categories;
+    OpenLayers.loadURL(uri, '', this, setMarkers);
+}
+
+/* update the marker layers from an http response GeoJSON */
+function setMarkers(response){
+    if(layerMarkers) layerMarkers.destroy();
+    if (response.responseText.indexOf('no results') == -1) {
+        /* clean the marker layer */
+        if (currentPopup) {
+            currentPopup.hide();
+            hideDetail();
+        }
+        layerMarkers = new OpenLayers.Layer.Markers('POIs');
+        map.addLayer(layerMarkers);
+        layerMarkers.setOpacity(0.8);
+
+        var json = new OpenLayers.Format.JSON();
+        var markers_pt = json.read(response.responseText);
+        /* load every marker */
+        for (var i = 0; i < markers_pt.features.length; i++) {
+            putMarker(markers_pt.features[i]);
+        }
+        /*
+        var geojson = new OpenLayers.Format.GeoJSON();
+        var markers_pt = geojson.read(response.responseText);
+        for (var i = 0; i < markers_pt.length; i++) {
+            putMarker2(markers_pt[i]);
+        }*/
+    }
+}
+
+/* put a marker on the map */
+function putMarker(mark) {
+    /* initialise a new feature with appropriate attribute for setting a
+    marker */
+    lat = mark.geometry.coordinates[1];
+    lon = mark.geometry.coordinates[0];
+    iconclone = new OpenLayers.Icon(media_path + mark.properties.icon_path,
+                                    size, offset);
+    var feature = new OpenLayers.Feature(markers,
+              new OpenLayers.LonLat(lon, lat).transform(epsg_display_projection,
+                                                        epsg_projection),
+              {icon:iconclone});
+    /*feature.closeBox = false;*/
+    feature.pk = mark.properties.pk;
+    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud);
+    feature.data.popupContentHTML = "<div class='cloud'>" + mark.properties.name + "<br/>&nbsp;</div>";
+    feature.data.overflow = 'hidden';
+    var marker = feature.createMarker();
+
+    /* manage markers events */
+    var markerClick = function (evt) {
+        currentFeature = this;
+        if (clicked) {
+            if (currentPopup == this.popup) {
+                this.popup.hide();
+                clicked = false;
+                hideDetail();
+            } else {
+                currentPopup.hide();
+                showPop(this);
+                updateDetail(this.pk);
+            }
+        } else {
+            showPop(this);
+            clicked = true;
+            updateDetail(this.pk);
+        }
+        OpenLayers.Event.stop(evt);
+    };
+    var markerOver = function (evt) {
+        document.body.style.cursor='pointer';
+        OpenLayers.Event.stop(evt);
+    };
+    var markerOut = function (evt) {
+        document.body.style.cursor='auto';
+        OpenLayers.Event.stop(evt);
+    };
+    marker.events.register('mousedown', feature, markerClick);
+    marker.events.register('mouseover', feature, markerOver);
+    marker.events.register('mouseout', feature, markerOut);
+    layerMarkers.addMarker(marker);
+    return feature;
+}
+
+/* update current detail panel with an AJAX request */
+function updateDetail(pk){
+    var uri = "/chimere/getDetail/" + pk;
+    OpenLayers.loadURL(uri, '', this, setDetail);
+}
+
+/* update the detail panel from an http response */
+function setDetail(response){
+    if (response.responseText.indexOf('no results') == -1) {
+        document.getElementById('detail_content').innerHTML = response.responseText;
+    }
+}
+
+/* hide content of detail panel */
+function hideDetail(){
+    document.getElementById('detail_content').innerHTML = '';
+}
+
+/* main initialisation function */
+function init(){
+    /* set the main map */
+    map = new OpenLayers.Map ('map', {
+        controls:[new OpenLayers.Control.Navigation(),
+                  new OpenLayers.Control.PanZoomBar(),
+                  new OpenLayers.Control.ScaleLine()],
+        maxExtent: maxExtent,
+        maxResolution: 156543.0399,
+        units: 'm',
+        projection: new OpenLayers.Projection('EPSG:4326')
+    });
+        /*projection: new OpenLayers.Projection('EPSG:900913'),
+        displayProjection: new OpenLayers.Projection('EPSG:4326')*/
+    map.addLayers([layerMapnik, cyclemap]);
+    loadMarkers();
+    map.setCenter(centerLonLat, 12);
+}