4

I can zoom and pan wfs layer when I don't have added control but I can't pan the map or zoom the layer with double click when I add a control to map: code for control is :

var select = new OpenLayers.Control.SelectFeature(district);
    map.addControl(select);
    select.activate();
    district.events.on({
        featureselected: function(event) {
            feature = event.feature;
            feature.popup = new OpenLayers.Popup.Anchored
                    ("dis_pop",
                            feature.geometry.getBounds().getCenterLonLat(),
                            new OpenLayers.Size(285, 250),
                            '<div class="popupcss"><p>' +
                            '<table>' +
                            '<tr>' +
                            '<td>' +
                            'Item' +
                            '</td>' +
                            '<td>' +
                            'Value' +
                            '</td>' 
                            '</tr>' +
                            '</table></div>',
                            null,
                            true
                            );
            map.addPopup(feature.popup);
        },
        featureunselected: function(event) {
            var feature = event.feature;
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
    });

The code is working file but I can't zoom on double click. I also can't pan the map with mouse cursor.

3

I don't know what happened anyone with greater knowledge can explain but for anyone with similar problem I solved it by adding controls:

// Panel (toolbar)
    var oDragPanCtrl = new OpenLayers.Control.DragPan({
        isDefault: true,
        title: 'Pan map: keep the left mouse button pressed to drag the map'
    });

var oZoomBoxOutCtrl = new OpenLayers.Control.ZoomBox({
    out: true, displayClass: "olControlZoomBoxOut",
    title: 'Zoom out: click in the map or use the left '
            + 'mouse button and drag to create a rectangle'
});

var oZoomBoxInCtrl = new OpenLayers.Control.ZoomBox({
    title: 'Zoom in: click in the map or use the left '
            + 'mouse button and drag to create a rectangle'
});

var oZoomBoxOutCtrl = new OpenLayers.Control.ZoomBox({
    out: true, displayClass: "olControlZoomBoxOut",
    title: 'Zoom out: click in the map or use the left '
            + 'mouse button and drag to create a rectangle'
});

var oPanel = new OpenLayers.Control.Panel({
    defaultControl: oDragPanCtrl
});

oPanel.addControls([    
    oZoomBoxInCtrl,
    oZoomBoxOutCtrl,
    oDragPanCtrl
]);

map.addControl(oPanel);//map is Openlayers.Map() object


You can make this control beautiful by adding css(not required):

.olControlPanel div { 
    display:block;
    width:  24px;
    height: 24px;
    float: left; /* remove this if you want a vertical toolbar  */
    margin: 0px 2px 0px 2px;
}


/* ZoomBox - zoom in */
.olControlPanel .olControlZoomBoxItemInactive { 
    background-image: url("/geoserver/www/openlayers/theme/default/img/zoom_in_off.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.olControlPanel .olControlZoomBoxItemActive { 
    background-image: url("/geoserver/www/openlayers/theme/default/img/zoom_in_on.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

/* ZoomBox - zoom out */
.olControlPanel .olControlZoomBoxOutItemInactive {
    background-image: url("/geoserver/www/openlayers/theme/default/img/zoom_out_off.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.olControlPanel .olControlZoomBoxOutItemActive { 
    background-image: url("/geoserver/www/openlayers/theme/default/img/zoom_out_on.png");
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

/* DragPan */
.olControlPanel .olControlDragPanItemInactive { 
    background-image: url("/geoserver/www/openlayers/theme/default/img/pan_off.png");
    background-repeat: no-repeat;
    background-position: 0px 1px;
}
.olControlPanel .olControlDragPanItemActive { 
    background-image: url("/geoserver/www/Openlayers/theme/default/img/pan_on.png");
    background-repeat: no-repeat;
    background-position: 0px 1px;
}
1

OpenLayers Documentation says

featureSelected Listeners will receive an object with a feature property referencing the selected feature.

so replace

featureselected: function(event) {
            feature = event.feature;

with

featureselected: function(feature){

same with featureunselected

UPDATE Try this

var select = new OpenLayers.Control.SelectFeature(district,{
    onSelect: function(feature) {
            feature.popup = new OpenLayers.Popup.Anchored
                    ("dis_pop",
                            feature.geometry.getBounds().getCenterLonLat(),
                            new OpenLayers.Size(285, 250),
                            '<div class="popupcss"><p>' +
                            '<table>' +
                            '<tr>' +
                            '<td>' +
                            'Item' +
                            '</td>' +
                            '<td>' +
                            'Value' +
                            '</td>' 
                            '</tr>' +
                            '</table></div>',
                            null,
                            true
                            );
            map.addPopup(feature.popup);
    },
    onUnselect: function(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
    });
map.addControl(select)
select.activate()
  • I have tried with feature it won't work. With event it will work but only thing is I can't pan and zoom. I can see the popup with all the feature attributes. – kinkajou Oct 22 '13 at 14:56
  • The activating select control activates the event handler o layer. Mayer manually registering event overrode the handlers. See updated answer. – neogeomat Oct 23 '13 at 12:59
  • I couldn't understand? – kinkajou Oct 24 '13 at 0:41
  • i put your event handler inside the control (i.e. featureselected event is handled by the select control's onSelect handler). Replace your code with mine. – neogeomat Oct 24 '13 at 3:35
  • I tried that it didn't work – kinkajou Oct 24 '13 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.