[GIS] How to Edit Popup using Openlayers Text Layer

javascriptopenlayers-2popup

I am creating a map with about 1000+ points using Openlayers. Currently when I click on one point's icon, the description for the point shows up in a popup, and to exit the popup I need to click on the same point's icon again. Is there a way to modify the code for this so that I can press a close button or I can click anywhere on the map so that this popup will close again? I know there is a way if I am just using a regular popup but I am using an Openlayers.layer.text layer.

var pois = new OpenLayers.Layer.Text( "Frequencies",
            { location:"./frequencyrange.txt",
              projection: map.displayProjection
            });
    map.addLayer(pois);

I use this code to add the text layer. Within the text file would be the following columns: lon lat title description icon iconSize iconOffset. Is there another column that I should add for the popup? I have tried a column that was supposed to modify the size of the popup but it did not work for me. So, so far I have not been able to modify the popup except for what is in it.

Best Answer

This OpenLayers example shows a type of pop up that has a close button and is using the same type of layer so I shouldn't be difficult to you to adapt it to your case.

Related Solutions

[GIS] OpenLayers popup – random losing click event, have to refresh page

as i understand from the codes and your explanation, it's come to my mind:

in OpenLayers.Popup method, there is a parameter which name is closeBox. this works for:

{Boolean} Whether to display a close box inside the popup.

if you make it true, the closing button will show in popup, in this case when you click to closing box, it is going to destroy all feature from map which is irreversible for this popup.

 destroy: function()

 nullify references to prevent circular references and memory leaks

Solution:

make it hidden or unselect for second call.

you can achieve this sth. as:

function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }

   function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     "<div style='font-size:.8em'>Feature: " + feature.id 
            +"<br>Area: " + feature.geometry.getArea()+"</div>",
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }

i hope it helps you...

WFS Data Collection – How to Collect Data via WFS and Popup

To all the people who are looking for a way to collect data via Popup as asked in my question, this is how I solved it (same script as in question except the added popup-function and the tool "select"):

function init() {
Save-strategy
var saveStrategy = new OpenLayers.Strategy.Save();

//empty map, bounds are test-layer bounds (EPSG:32647)  
map = new OpenLayers.Map({
    div: "map",
    allOverlays: true,
    maxExtent: new OpenLayers.Bounds(
    653237.69439077,1519879.063165,655229.57939001,1520825.6733868
    )
    });

//WFS-Layer Test= editable data
var test = new OpenLayers.Layer.Vector("Editable Features", {
    strategies: [new OpenLayers.Strategy.Fixed(), saveStrategy],    
    protocol: new OpenLayers.Protocol.WFS({
    url: "http://..../wfs",
    featurePrefix: 'testkf',
    featureNS: "http://.../testkf",
    extractAttributes: true,
    featureType: "test",
    geometryName: "geom",
    })
});

map.addLayer(test);

//add Popup
        var select = new OpenLayers.Control.SelectFeature(test);
            map.addControl(select);
            select.activate();

        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }

        <!-- crucial part is form within popup. careful with linebreaks-->  
        test.events.on({
            featureselected: function(event) {
                var feature = event.feature;
                feature.popup = new OpenLayers.Popup.FramedCloud
                ("pop",
                feature.geometry.getBounds().getCenterLonLat(),
                null,
                '<form action="http://.../myphp.php" method="post" target="new">'+                  
                '<p><div class="label"> entry by:</div> <input name="entryname" type="text" size="30" maxlength="30"  value="'+feature.attributes.entryname+'" ></p><br>'+
                '<input type="submit" name="schreiben" value="Submit" onClick="window.location.reload()"></form>',
                null,
                true 
                );
             map.addPopup(feature.popup);  
            },

            <!-- destroy popup when feature is no longer selected. Prevents showing 2 Popups at the same time-->
            featureunselected: function(event) {
                var feature = event.feature;
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
        });

//Toolbar:
    var panel = new OpenLayers.Control.Panel(
    {'displayClass': 'customEditingToolbar'}
    );

    var select = new OpenLayers.Control.SelectFeature(test, {
    title: "Select Field",
    displayClass: "olControlSelectFeature"
    });

    var draw = new OpenLayers.Control.DrawFeature(
    test, OpenLayers.Handler.Polygon,
    {
    title: "Draw Feature",
    displayClass: "olControlDrawFeaturePolygon",
    multi: true
    });

    var save = new OpenLayers.Control.Button({
    title: "Save Changes",
    trigger: function() {
    if(edit.feature) {
    edit.selectControl.unselectAll();
    }
    saveStrategy.save();
    },
    displayClass: "olControlSaveFeatures"
    });


panel.addControls([save, draw, select]);
map.addControl(panel);  
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}

For the form within the popup, a separate php-script is needed. Here, the crucial part is:

$res = pg_query ("UPDATE $tabelle SET entryname = '".pg_escape_string ($entryname)."' WHERE gid = '$gid'");

Hope that helps!

Best Answer

Related Solutions

[GIS] OpenLayers popup – random losing click event, have to refresh page

WFS Data Collection – How to Collect Data via WFS and Popup

Related Question