Select Location from Map

When adding a location:

• ​http://127.0.0.1:8000/eden/gis/location/create

Want to be able to open up a Map Window 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)";
    }
}

---

BluePrintGeographicInformationSystems

Pakistan

Taiwan