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

4 files changed, 450 insertions, 0 deletions

diff --git a/static/edit_map.js b/static/edit_map.js
new file mode 100644
index 0000000..5a9c997
--- /dev/null
+++ b/static/edit_map.js
@@ -0,0 +1,117 @@
+/* map edit */
+
+/* availaible map layers */
+var layerMapnik = new OpenLayers.Layer.OSM.Mapnik('Mapnik');
+var layerMarkers = new OpenLayers.Layer.Markers('POIs');
+
+/* default size and offset for icon */
+var size = new OpenLayers.Size(21, 25);
+var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
+var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png', size, offset);
+
+/* set a marker with a click on the map */
+var setMarker = function (event){
+    event = event || window.event;
+    lonlat = layerMarkers.getLonLatFromViewPortPx(event.xy);
+    putMarker(lonlat);
+    OpenLayers.Event.stop(event);
+}
+
+/* put the marker on the map and update latitude and longitude fields */
+var putMarker = function (lonlat){
+    if (marker) {
+        layerMarkers.removeMarker(marker);
+    }
+    var marker = new OpenLayers.Marker(lonlat.clone(), icon);
+    layerMarkers.addMarker(marker);
+    lonlat = lonlat.clone().transform(map.getProjectionObject(),
+                                      epsg_display_projection);
+    document.getElementById('id_point').value = 'POINT(' + lonlat.lon +
+                                                ' ' + lonlat.lat + ')';
+    document.getElementById('live_latitude').value = lonlat.lon;
+    document.getElementById('live_longitude').value = lonlat.lat;
+}
+
+/* main initialisation function */
+function init(){
+    map = new OpenLayers.Map ('map_edit', {
+        controls:[new OpenLayers.Control.Navigation(),
+                    new OpenLayers.Control.PanZoomBar(),
+                    new OpenLayers.Control.Attribution()],
+        maxExtent: maxExtent,
+        maxResolution: 156543.0399,
+        units: 'm',
+        projection: epsg_projection,
+        displayProjection: epsg_display_projection,
+    } );
+    layerMarkers.setOpacity(0.5);
+    map.addLayers([layerMapnik, layerMarkers]);
+    map.events.register('click', map, setMarker);
+    map.setCenter(centerLonLat, 12);
+
+}
+
+
+/* code for drag'n drop : delayed for further version of openlayers */
+
+/*
+function init_b(){
+    init();
+
+    marker.events.register('mouseup', marker, releaseMarker);
+    marker.events.register('mousedown', marker, catchMarker);
+    marker.events.register('mouseover', marker, markerOver);
+    marker.events.register('mouseout', marker, markerOut);
+
+    map.events.register('mousemove', map, onMouseMove);
+    map.events.register('moveend', map, onMoveEnd);
+}
+
+var marker_catched = false;
+
+function catchMarker(event){
+    marker_catched = true;
+    event = event || window.event;
+    OpenLayers.Event.stop(event);
+}
+
+function releaseMarker(event){
+    event = event || window.event;
+    if(marker_catched) {
+        marker_catched = false;
+        lonlat = layerMarkers.getLonLatFromViewPortPx(marker.icon.px);
+        marker.lonlat = lonlat;
+        document.getElementById('latitude').value = marker.lonlat.lat;
+        document.getElementById('longitude').value = marker.lonlat.lon;
+    }
+    OpenLayers.Event.stop(event);
+}
+
+function onMouseMove(event) {
+    event = event || window.event;
+    if (!marker_catched) {return;}
+    marker.icon.px = null;
+    marker.icon.moveTo(new OpenLayers.Pixel(event.xy.x + delta_x,
+                                            event.xy.y + delta_y + 20));
+    defLiveLatLon();
+    lonlat = layerMarkers.getLonLatFromViewPortPx(marker.icon.px).transform(epsg_projection, epsg_display_projection);
+    live_longitude.value = lonlat.lon;
+    live_latitude.value = lonlat.lat;
+    OpenLayers.Event.stop(event);
+}
+
+function onMoveEnd(event) {
+    event = event || window.event;
+    marker.icon.px = map.getPixelFromLonLat(marker.lonlat);
+    OpenLayers.Event.stop(event);
+}
+
+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);
+};
+*/
diff --git a/static/forms.css b/static/forms.css
new file mode 100644
index 0000000..e536e96
--- /dev/null
+++ b/static/forms.css
@@ -0,0 +1,11 @@
+#map_edit{
+border: 1px solid black;
+width:700px;
+height:400px;
+float:left;
+}
+
+#live_lonlat{
+margin:1em;
+float:left;
+}
\ No newline at end of file
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);
+}
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..a70c702
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,150 @@
+body{
+background-color:#EEF;
+font-family:arial;
+font-size:80%;
+}
+
+fieldset{
+background-color:#FFF;
+-moz-border-radius: 10px;
+-webkit-border-radius: 10px;
+border-radius: 10px;
+}
+
+legend{
+font-weight:bold;
+color:purple;
+}
+
+h2{
+font-size:16px;
+text-align:center;
+margin:0;
+margin-bottom:10px;
+padding:0;
+width:100%;
+background-color:white;
+border:solid 1px purple;
+-moz-border-radius: 4px;
+-webkit-border-radius: 4px;
+border-radius: 4px;
+}
+
+hr.spacer{
+clear:both;
+border:None;
+}
+
+.edit label{
+display:block;
+}
+
+ul#action{
+background-color:#EEF;
+list-style-type:none;
+margin:0;
+padding:3px;
+padding-left:0;
+border-bottom:1px solid black;
+}
+
+#action li{
+display:inline;
+padding:3px;
+margin-right:6px;
+border:1px solid black;
+-moz-border-radius: 4px 4px 0 0;
+-webkit-border-radius: 4px 4px 0 0;
+border-radius: 4px 4px 0 0;
+}
+
+#action li#selected{
+background-color:#FFF;
+border-top:solid 2px purple;
+}
+
+#action a{
+text-decoration:None;
+color:black;
+}
+
+#panel{
+padding:6px 10px;
+border: 1px solid black;
+height:200px;
+position:absolute;
+z-index:5;
+top:50px;
+bottom:20px;
+right:18px;
+width:250px;
+background-color:#FFF;
+opacity:0.8;
+-moz-border-radius:10px;
+-webkit-border-radius:10px;
+border-radius:10px;
+}
+
+#detail{
+padding:6px 10px;
+border: 1px solid black;
+position:absolute;
+z-index:5;
+top:274px;
+bottom:18px;
+right:18px;
+width:250px;
+background-color:#FFF;
+opacity:0.8;
+-moz-border-radius:10px;
+-webkit-border-radius:10px;
+border-radius:10px;
+}
+
+#detail_content{
+overflow:auto;
+height:90%;
+}
+
+#map{
+border: 1px solid black;
+position:absolute;
+top:40px;
+bottom:8px;
+left:8px;
+right:8px;
+}
+
+ul#categories{
+margin:0;
+padding:0;
+overflow:auto;
+height:140px;
+}
+
+ul#categories li{
+font-variant:small-caps;
+list-style:none;
+}
+
+ul#categories li li{
+font-variant:normal;
+}
+
+ul#categories ul{
+margin:0;
+padding:0;
+}
+
+ul.subcategories img{
+height:20px;
+}
+
+.errorlist{
+color:purple;
+font-weight:bold;
+}
+
+.fieldWrapper{
+padding:6px;
+}
\ No newline at end of file