Version 5 (modified by 14 years ago) ( diff ) | ,
---|
Select Location from Map
When adding a location:
Want to be able to open up a MapWindow where the cursor can be clicked on a location which will display a visual marker & populate the Lat/Lon fields of the create form.
Status
Done :)
ToDo
- The map window should be centered (& ideally zoomed) on the location which has been identified as the parent for this location, if selected.
- A further refinement may be to search by lat/long URL as suggested by Dominic to auto-suggest nearby locations once a point has been selected on the map.
Example code
From Sahana Agasti, which needs a little bit of porting from PHP to Python, some adjustment to the JavaScript variable names & then merging into the mapping API in modules/s3gis.py
:
var pointControl; // Add control to add new Points to the map. pointControl = new OpenLayers.Control.DrawFeature(featuresLayer, OpenLayers.Handler.Point); pointControl.featureAdded = shn_gis_map_add_geometry; map.addControl(pointControl); function shn_gis_map_control_add_point(){ shn_gis_map_control_deactivate_all(); document.getElementById('gis_map_icon_addpoint').style.backgroundImage = "url(res/OpenLayers/theme/default/img/draw_point_on.png)"; document.getElementById('gis_map_icon_descripion').innerHTML = '<?php echo _t('Mode: Add Point') ?>'; pointControl.activate(); } function shn_gis_map_add_geometry(feature){ var fcopy = feature.clone(); // need for later. var fcopygeom = fcopy.geometry.clone(); var lonlat = fcopy.geometry.getBounds().getCenterLonLat(); var proj_current = map.getProjectionObject(); lonlat.transform(proj_current, proj4326); var lon_new = lonlat.lon; var lat_new = lonlat.lat; var wkt_new = fcopy.geometry.transform(proj_current, proj4326).toString(); var type_new = featureTypeStr(fcopy); // Update form fields var x_gps = document.getElementById("gps_x"); var y_gps = document.getElementById("gps_y"); if( x_gps != null && y_gps != null){ x_gps.value = lon_new; y_gps.value = lat_new; } // store x,y coords in hidden variables named loc_x, loc_y // must be set via calling page var x_point = document.getElementsByName("loc_x"); var y_point = document.getElementsByName("loc_y"); if(x_point != null && y_point != null){ x_point[0].value = lon_new; y_point[0].value = lat_new; } // store type var loc_type = document.getElementsByName("loc_type"); if(loc_type != null){ loc_type[0].value = type_new; } // store wkt value var wkt_point = document.getElementsByName("loc_wkt"); if(wkt_point != null){ wkt_point[0].value = wkt_new; } // Remove last plot from layer featuresLayer.destroyFeatures(featuresLayer.features); // Add marker for visual confirmation add_Feature(featuresLayer, 'newFeature', fcopygeom, '<?php echo $icon ?>'); } // Add marker to map function add_Feature(layer, feature_id, geom, iconURL){ // Set icon dims var icon_img = new Image(); icon_img.src = iconURL; var max_w = 25; var max_h = 35; var width = icon_img.width; var height = icon_img.height; if(width > max_w){ height = ((max_w / width) * height); width = max_w; } if(height > max_h){ width = ((max_h / height) * width); height = max_h; } // http://www.nabble.com/Markers-vs-Features--td16497389.html var style_marker = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']); //style_mark.pointRadius = 12; style_marker.graphicWidth = width; style_marker.graphicHeight = height; style_marker.graphicXOffset = -(width / 2); style_marker.graphicYOffset = -height; style_marker.externalGraphic = iconURL; style_marker.graphicOpacity = 1; // Create Feature Vector + Props var featureVec = new OpenLayers.Feature.Vector(geom, null, style_marker); featureVec.fid = feature_id; // Add Feature. layer.addFeatures([featureVec]); } // Deactivate all other controls function shn_gis_map_control_deactivate_all(){ // Turn off navigate var nav = document.getElementById('gis_map_icon_select') if(nav != null){ nav.style.backgroundImage = "url(res/OpenLayers/theme/default/img/move_feature_off.png)"; } // Turn off select if(selectControl != null){ selectControl.unselectAll(); selectControl.deactivate(); document.getElementById('gis_map_icon_select').style.backgroundImage = "url(res/OpenLayers/theme/default/img/move_feature_off.png)"; } // Turn off drag if(dragControl != null){ dragControl.deactivate(); document.getElementById('gis_map_icon_drag').style.backgroundImage = "url(res/OpenLayers/theme/default/img/pan_off.png)"; } // Turn off modify //if(modifyControl != null){ //modifyControl.deactivate(); //} // Drop features/popups in progress from a create feature. if(currentFeature != null && ((pointControl != null && pointControl.active) || (lineControl != null && lineControl.active) || (polygonControl != null && polygonControl.active))){ if(currentFeature.popup != null){ currentFeature.popup.hide(); currentFeature.popup.destroy(currentFeature.popup); } featuresLayer.removeFeatures([currentFeature]); currentFeature.destroy(); currentFeature = null; } // Hide any popup showing and deactivate current feature. if(currentFeature != null){ if(currentFeature.popup != null){ currentFeature.popup.hide(); } currentFeature = null; } // Turn off point add if(pointControl != null){ pointControl.deactivate(); document.getElementById('gis_map_icon_addpoint').style.backgroundImage = "url(res/OpenLayers/theme/default/img/draw_point_off.png)"; } // Turn off line add if(lineControl != null){ lineControl.deactivate(); document.getElementById('gis_map_icon_addline').style.backgroundImage = "url(res/OpenLayers/theme/default/img/draw_line_off.png)"; } // Turn off polygon add if(polygonControl != null){ polygonControl.deactivate(); document.getElementById('gis_map_icon_addpolygon').style.backgroundImage = "url(res/OpenLayers/theme/default/img/draw_polygon_off.png)"; } }
Note:
See TracWiki
for help on using the wiki.