diff options
| -rw-r--r-- | chimere/static/chimere/js/edit_route_map.js | 50 | ||||
| -rw-r--r-- | chimere/static/chimere/js/jquery.chimere.js | 130 | ||||
| -rw-r--r-- | chimere/widgets.py | 30 |
3 files changed, 164 insertions, 46 deletions
diff --git a/chimere/static/chimere/js/edit_route_map.js b/chimere/static/chimere/js/edit_route_map.js index df81b49..b0bcceb 100644 --- a/chimere/static/chimere/js/edit_route_map.js +++ b/chimere/static/chimere/js/edit_route_map.js @@ -15,15 +15,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. See the file COPYING for details. */ - -/* map edit */ +/* +// map edit var map; var currentControl; var pathCreate; var pathModify; -/* availaible map layers */ +// availaible map layers var vectors = new OpenLayers.Layer.Vector("Vector Layer"); vectors.events.on({ @@ -33,7 +33,7 @@ vectors.events.on({ var currentFeature; function featureCreated(event) { - /* toggle to edition mode */ + // toggle to edition mode pathCreate.deactivate(); currentControl = pathModify; var help_route_create = document.getElementById('help-route-create'); @@ -71,13 +71,13 @@ function initFeatureFromGeometry(linestring){ vectors.removeFeatures(); vectors.addFeatures([currentFeature]); currentControl = pathModify; - /*zoom to the route*/ + // zoom to the route var bounds = vectors.getDataExtent(); if (bounds) map.zoomToExtent(bounds); } function updateForm(event) { - /* update the form */ + // update the form if(event){ currentFeature = event.feature; } @@ -93,14 +93,14 @@ function updateForm(event) { } -/* path control */ +// path control var pathCreate = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.Path); var currentControl = pathCreate; var pathModify = new OpenLayers.Control.ModifyFeature(vectors, {clickout:false, toggle:false}); -/* main initialisation function */ +// main initialisation function function init(){ var options = { controls:[new OpenLayers.Control.Navigation(), @@ -123,34 +123,36 @@ function init(){ vectors.setOpacity(0.5); map.addLayers([map_layer, vectors]); - /* zoom to the appropriate extent */ + //zoom to the appropriate extent if (!zoomToCurrentExtent(map)){ map.setCenter(centerLonLat, 12); } } +*/ function toggleDraw() { - document.getElementById('draw-toggle-off').style.display = 'None'; - document.getElementById('draw-or').style.display = 'None'; - document.getElementById('upload').style.display = 'None'; - document.getElementById('map_edit').style.display = ''; - document.getElementById('help-route-create').style.display = 'block'; - init(); + jQuery('#draw-toggle-off').hide(); + jQuery('#draw-or').hide(); + jQuery('#upload').hide(); + jQuery('#map_edit').show(); + jQuery('#help-route-create').show(); + jQuery('#map_edit').chimere(chimere_init_options); } function toggleDrawOn() { - jQuery('#button-move-map').removeClass('toggle-button-active').addClass('toggle-button-inactive'); - jQuery('#button-draw-map').removeClass('toggle-button-inactive').addClass('toggle-button-active'); - currentControl.activate(); - if (currentFeature){ - pathModify.selectControl.select(currentFeature); - } + jQuery('#button-move-map').removeClass('toggle-button-active' + ).addClass('toggle-button-inactive'); + jQuery('#button-draw-map').removeClass('toggle-button-inactive' + ).addClass('toggle-button-active'); + jQuery("#map_edit").chimere("activateCurrentControl"); } function toggleDrawOff() { - jQuery('#button-draw-map').removeClass('toggle-button-active').addClass('toggle-button-inactive'); - jQuery('#button-move-map').removeClass('toggle-button-inactive').addClass('toggle-button-active'); - currentControl.deactivate(); + jQuery('#button-draw-map').removeClass('toggle-button-active' + ).addClass('toggle-button-inactive'); + jQuery('#button-move-map').removeClass('toggle-button-inactive' + ).addClass('toggle-button-active'); + jQuery("#map_edit").chimere("deactivateCurrentControl"); } function checkFields(){ diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js index ea035ad..73e77cf 100644 --- a/chimere/static/chimere/js/jquery.chimere.js +++ b/chimere/static/chimere/js/jquery.chimere.js @@ -65,6 +65,7 @@ See the file COPYING for details. projection: new OpenLayers.Projection('EPSG:4326'), theme:null, current_feature: null, // To store the active POI + current_control: null, // To store the current control current_popup: null, // To store the current POI popup displayed current_category: null, // To store the current category clicked in list icon_offset: new OpenLayers.Pixel(0, 0), @@ -96,7 +97,8 @@ See the file COPYING for details. theme: settings.theme }; if (settings.restricted_extent){ - settings.restricted_extent.transform(EPSG_DISPLAY_PROJECTION, EPSG_PROJECTION); + settings.restricted_extent.transform(EPSG_DISPLAY_PROJECTION, + EPSG_PROJECTION); map_options['restrictedExtent'] = settings.restricted_extent; } @@ -111,7 +113,8 @@ See the file COPYING for details. // hard to understand from OL documentation... permalink_options["div"] = settings.permalink_element; } - settings.permalink = new OpenLayers.Control.Permalink(permalink_options); + settings.permalink = new OpenLayers.Control.Permalink( + permalink_options); } /* HACK new permalink createParams method FIXME when facilities are given to personalize the permalink */ @@ -131,7 +134,8 @@ See the file COPYING for details. settings.permalink.createParams = _createParams; settings.map.addControl(settings.permalink); // update with the translated permalink label - if(settings.permalink_label && settings.permalink.div && settings.permalink.div.childNodes.length > 0){ + if(settings.permalink_label && settings.permalink.div + && settings.permalink.div.childNodes.length > 0){ settings.permalink.div.childNodes[0].textContent = settings.permalink_label; } } @@ -142,6 +146,12 @@ See the file COPYING for details. settings.layerVectors = new OpenLayers.Layer.Vector("Vector Layer"); settings.map.addLayer(settings.layerVectors); settings.layerVectors.setOpacity(0.8); + if (settings.edition_type_is_route){ + settings.map.addControl(new OpenLayers.Control.DrawFeature( + settings.layerVectors, OpenLayers.Handler.Path)); + settings.map.addControl(new OpenLayers.Control.ModifyFeature( + settings.layerVectors, {clickout:false, toggle:false})); + } /* Markers layer */ settings.layerMarkers = new OpenLayers.Layer.Markers('POIs'); settings.map.addLayer(settings.layerMarkers); @@ -174,10 +184,18 @@ See the file COPYING for details. settings.map.events.register('click', settings.map, helpers.hidePopup); } else { - map.events.register('click', settings.map, methods.setMarker); + if (!settings.edition_type_is_route){ + map.events.register('click', settings.map, + methods.setMarker); + } else { + map.events.register('featuremodified', + settings.layerVectors, helpers.updateRouteForm); + map.events.register('featureadded', + settings.layerVectors, helpers.featureRouteCreated); + } } }, // end of init - + /* * Load markers and route from DB */ @@ -509,6 +527,60 @@ See the file COPYING for details. if (bounds) settings.map.zoomToExtent(bounds); } return; + }, + activateCurrentControl: function(){ + if (settings.current_control){ + settings.current_control.activate(); + } else { + var pathCreate = settings.map.getControlsByClass( + 'OpenLayers.Control.DrawFeature'); + if (pathCreate){ + pathCreate[0].activate(); + } + } + var pathModify = settings.map.getControlsByClass( + 'OpenLayers.Control.ModifyFeature'); + if (settings.current_feature && pathModify){ + pathModify[0].selectControl.select(settings.current_feature); + } + }, + deactivateCurrentControl: function(){ + if (settings.current_control){ + settings.current_control.deactivate(); + } + }, + initFeature: function(json_geometry){ + var json = new OpenLayers.Format.JSON(); + var polyline = json.read(json_geometry); + var point_array = new Array(); + for (i=0; i<polyline.coordinates.length; i++){ + var point = new OpenLayers.Geometry.Point( + polyline.coordinates[i][0], + polyline.coordinates[i][1]); + point_array.push(point); + } + var linestring = new OpenLayers.Geometry.LineString(point_array); + methods.initFeatureFromGeometry(linestring); + }, + initFeatureFromWkt: function(wkt_geometry){ + var linestring = OpenLayers.Geometry.fromWKT(wkt_geometry); + methods.initFeatureFromGeometry(linestring); + }, + initFeatureFromGeometry: function(linestring){ + linestring.transform(EPSG_DISPLAY_PROJECTION, + EPSG_PROJECTION); + currentFeature = new OpenLayers.Feature.Vector(); + currentFeature.geometry = linestring; + settings.layerVectors.removeFeatures(); + settings.layerVectors.addFeatures([currentFeature]); + var pathModify = settings.map.getControlsByClass( + 'OpenLayers.Control.ModifyFeature'); + if (pathModify){ + settings.current_control = pathModify[0]; + } + /*zoom to the route*/ + var bounds = settings.layerVectors.getDataExtent(); + if (bounds) settings.map.zoomToExtent(bounds); } }; // End of public methods var helpers = { @@ -547,16 +619,17 @@ See the file COPYING for details. * Retrieve checked_categories, and store it in settings */ var initialized = false; - $('#frm_categories .subcategories input:checkbox').each(function(index){ - if (!initialized){ - initialized = true; - settings.checked_categories = []; - settings.display_submited = false; - } - if ($(this).attr('checked') == 'checked'){ - cat_id = $(this).attr('id').split('_').pop(); - settings.checked_categories.push(parseInt(cat_id)); - } + $('#frm_categories .subcategories input:checkbox').each( + function(index){ + if (!initialized){ + initialized = true; + settings.checked_categories = []; + settings.display_submited = false; + } + if ($(this).attr('checked') == 'checked'){ + cat_id = $(this).attr('id').split('_').pop(); + settings.checked_categories.push(parseInt(cat_id)); + } }); if(initialized && $('#display_submited_check').attr("checked") == "checked"){ settings.display_submited = true; @@ -621,6 +694,33 @@ See the file COPYING for details. } } return map_extent; + }, + featureRouteCreated: function(event) { + /* toggle to edition mode */ + var pathModify = settings.map.getControlsByClass( + 'OpenLayers.Control.ModifyFeature')[0]; + var pathCreate = settings.map.getControlsByClass( + 'OpenLayers.Control.DrawFeature')[0]; + pathCreate.deactivate(); + settings.current_control = pathModify; + jQuery('#help-route-create').hide(); + jQuery('#help-route-modify').show(); + pathModify.activate(); + helpers.updateRouteForm(event); + pathModify.selectControl.select(event.feature); + }, + updateForm: function(event) { + /* update the form */ + if (event){ + settings.current_feature = event.feature; + } + var current_geo = settings.current_feature.geometry.clone(); + current_geo.transform(EPSG_PROJECTION, EPSG_DISPLAY_PROJECTION); + jQuery('#id_route').val(current_geo); + var vertices = current_geo.getVertices(); + if (vertices){ + jQuery('#id_point').val(vertices); + } } }; // End of helpers diff --git a/chimere/widgets.py b/chimere/widgets.py index b0ea71d..04a8e65 100644 --- a/chimere/widgets.py +++ b/chimere/widgets.py @@ -168,8 +168,9 @@ class RouteChooserWidget(forms.TextInput): css = {"all": settings.OSM_CSS_URLS + \ ["%schimere/css/forms.css" % settings.STATIC_URL,] } - js = settings.OSM_JS_URLS + \ - ["%schimere/js/edit_route_map.js" % settings.STATIC_URL, + js = settings.OSM_JS_URLS + list(settings.JQUERY_JS_URLS) + \ + ["%schimere/js/jquery.chimere.js" % settings.STATIC_URL, + "%schimere/js/edit_route_map.js" % settings.STATIC_URL, "%schimere/js/base.js" % settings.STATIC_URL,] def render(self, name, value, attrs=None, area_name='', routefile_id=None): @@ -177,6 +178,20 @@ class RouteChooserWidget(forms.TextInput): Render a map and latitude, longitude information field ''' tpl = getMapJS(area_name) + js = """ + var EPSG_DISPLAY_PROJECTION = epsg_display_projection = new OpenLayers.Projection('EPSG:%s'); + var EPSG_PROJECTION = epsg_projection = new OpenLayers.Projection('EPSG:%s'); + var chimere_init_options = {}; + chimere_init_options["map_layers"] = [new OpenLayers.Layer.OSM.Mapnik('Mapnik')]; + chimere_init_options['dynamic_categories'] = false; + chimere_init_options['edition'] = true; + chimere_init_options['edition_type_is_route'] = true; + chimere_init_options["checked_categories"] = []; + """ % (settings.CHIMERE_EPSG_DISPLAY_PROJECTION, + settings.CHIMERE_EPSG_PROJECTION) + tpl = u"<script type='text/javascript'><!--\n"\ + u"%s// !--></script>\n" % js + #TODO: manage area help_create = '' if not value: help_create = u"<h3>%s</h3>\n"\ @@ -202,8 +217,8 @@ class RouteChooserWidget(forms.TextInput): u"\"d\" or \"Del\" key."), _(u"To add a point click in the middle of a segment and drag the new "\ u"point to the desired position")) - tpl += u'<script src="%sedit_route_map.js"></script>\n' % \ - settings.STATIC_URL + #tpl += u'<script src="%sedit_route_map.js"></script>\n' % \ + # settings.STATIC_URL if not value: # upload a file tpl += u"<script type='text/javascript'><!--\n"\ @@ -244,9 +259,9 @@ class RouteChooserWidget(forms.TextInput): style, help_modify, name, name, value, routefile_id) tpl += u"<script type='text/javascript'><!--\n" if not value: - tpl += u"document.getElementById('map_edit').style.display = 'None';" + tpl += u"jQuery('#map_edit').hide();" if value: - tpl += u"init();\n" + tpl += u"jQuery('#map_edit').chimere(chimere_init_options);\n" val = value if type(value) == unicode: try: @@ -255,7 +270,8 @@ class RouteChooserWidget(forms.TextInput): pass if hasattr(val, 'json'): tpl += u"\nvar geometry='%s';\n"\ - u"initFeature(geometry);" % val.json + u"jQuery('#map_edit').chimere('initFeature', geometry);"\ + % val.json tpl += u"\n// --></script>\n" return mark_safe(tpl) |