Rectangle and click selection

ThinkGeo UI for Web WebForms
1

Hi guys,


I have a box selection tool in my map that allows a user to draw a rectangle in the map to select one or many polygons from a shapefile layer. I use the EditOverlay.TrackMode set to TrackMode.Rectangle and then I handle the TrackShapeFinished to query the polygons touching the drawn rectangle. Everything works very well so far but i've noticed that the Map does not respond to mouse click when in TrackMode.Rectangle mode (Map_Click and Map_TrackShapeFinished are not fired by mouse click).


Is there a way to make both rectangle and click selection work without switching the EditOverlay.TrackMode property? So the user could either draw a rectangle to make a selection or just point and click a specific polygon.


Is there a validation of what's been drawn before you fire the TrackShapeFinished event?


Thank you,


 


Marc



2

Hi, Marc 
  
 Thanks for your suggestion about the EditOverlay. 
  
 By default, we need to stop the click event to bubble up through the hierarchy, so that the click event for map control won’t be triggered.  
 There is another solution for your problem. We can use the KeyMask to trigger the drawing of rectangle, what I mean is that we only respond to some of the combination of keys are down. Please see the code below for full detail: 
  
         var OnMapCreated = function(map) { 
            
             var rectangleControl = map.getControl(‘Rectangle’); 
             // handler only responds if Ctrl-Shift is down 
             rectangleControl.handler.keyMask = OpenLayers.Handler.MOD_SHIFT | OpenLayers.Handler.MOD_CTRL; 
  
             var pointControl = map.getControl(‘Point’); 
             // handler only responds if the Shift key is down 
             rectangleControl.handler.keyMask = OpenLayers.Handler.MOD_SHIFT; 
         } 
  
 Thanks, 
  
 Khalil 


3

Thanks Kalil! 
  
 Actually I don’t really need the MapClick event to be triggered when the EditOverlay TrackMode is set to TrackMode.Rectangle. It would be nice to have the TrackShapeFinished event triggered when the user clicks the map and to have a rectangle of 1px by 1px added to the EditOverlay. 
  
 Hope my suggestion will make its way… 
  
 Thanks again for the solution 
  
 Marc

4

 


Hi Marc,
For you scenario, it will be better that there is one button for switch the map status.
I agree that checking width and height is a good idea. Here as following is the code about how to implement on client side. It uses OpenLayers library which can be found at openlayers.org/ .
<script language="javascript" type="text/javascript">
        OnMapCreated = function(map) {
            var drawFeatures = map.getControlsByClass("OpenLayers.Control.DrawFeature");
            if (drawFeatures != 'undefined' && drawFeatures.length != 0) {
                var editOverlay = map.getLayersByName("EditOverlay")[0];
                for (var i = 0; i < drawFeatures.length; i++) {
                    if (drawFeatures.id == 'Rectangle') {
                        drawFeatures.events.register('featureadded', this, function(feature) {
                            var size = feature.feature.geometry.bounds.getSize();

                            var width = size.w;

                            var height = size.h;
                            // Check it tolerance between two points, otherwise, raise the click event manually.
                            // Todo: please implement this part based on your scenario
                        });
                    }
                }
            }
        }
</script>
 
Any questions please let us know. Thanks,
Johnny