How to get list of all markers from selected Polygon using OpenLayer MAP v2

Question

0.00/5 (No votes)

See more:

I am able to run following features on OpenLayers Map Version 2.x

Put Markers on Map
Draw Polygon on Map
Select Polygon on Map

Now my requirement is when i select any polygon then i would like to show alert box with all marker which are inside the selected polygon.

I am using following code:

HTML

<html>
    <head>
        <link href="common.css" type="text/css" rel="stylesheet">
        <link rel="stylesheet" href="style.css" type="text/css" />
        <script src="OpenLayers.js"></script>
    </head>
    <body>
        <div id="map"></div>
        <div style="font-weight: bold">OSM Drawing Layer</div>
        <select id="mapMode" name="mapMode" size="1" >
            <option value="none" selected>Navigation</option>
            <option value="polygon">Draw Polygon</option>
            <option value="line">Draw Line</option>
            <option value="select">Select Features</option>
        </select>
        <div id="highlighted"></div>
        <br />
        <div id="featureTable"></div>
        <script type="text/javascript">
            var lat=23.033863;
            var lon=72.585022;
            var zoom=4;
            var mapOptions = {
                div: "map"
            };

            var map = new OpenLayers.Map('map', mapOptions);
            map.addLayer(new OpenLayers.Layer.OSM());
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            var epsg4326 = new OpenLayers.Projection("EPSG:4326");
            var projectTo = map.getProjectionObject();

            if(!map.getCenter()){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(epsg4326, projectTo);
                map.setCenter (lonLat, zoom);
            }

            drawingLayer = new OpenLayers.Layer.Vector("Drawing layer");
            drawingLayer.events.on({
                'featureselected': function(feature) {
                    updateFeatureTable(this.selectedFeatures);
                },
                'featureunselected': function(feature) {
                    updateFeatureTable(this.selectedFeatures);
                }
            });
            map.addLayer(drawingLayer);

            var lonLatSarkhej = new OpenLayers.LonLat(72.5000,22.9833).transform(epsg4326,projectTo);
            var lonLatVadodara = new OpenLayers.LonLat(73.2003,22.3000).transform(epsg4326,projectTo);
            var lonLatBhuj = new OpenLayers.LonLat(69.6700,23.2500).transform(epsg4326,projectTo);
            var lonLatMumbai = new OpenLayers.LonLat(72.8258,18.9750).transform(epsg4326,projectTo);
            var lonLatJaipur = new OpenLayers.LonLat(75.8235,26.9260).transform(epsg4326,projectTo);
            var lonLatDelhi = new OpenLayers.LonLat(77.2300,28.6100).transform(epsg4326,projectTo);

            var markers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markers);
            var size = new OpenLayers.Size(24,24);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('icon/Marker-Pink.png', size, offset);

            markers.addMarker(new OpenLayers.Marker(lonLatSarkhej,icon)); //Sarkhej
            markers.addMarker(new OpenLayers.Marker(lonLatVadodara,icon.clone())); //Vadodara
            markers.addMarker(new OpenLayers.Marker(lonLatBhuj,icon.clone())); //Bhuj
            markers.addMarker(new OpenLayers.Marker(lonLatMumbai,icon.clone())); //Mumbai
            markers.addMarker(new OpenLayers.Marker(lonLatJaipur,icon.clone())); //Jaipur
            markers.addMarker(new OpenLayers.Marker(lonLatDelhi,icon.clone())); //Delhi

            drawingControls = {
                polygon: new OpenLayers.Control.DrawFeature(drawingLayer, OpenLayers.Handler.Polygon, {
                    eventListeners: {
                        "featureadded": controlFeatureHandler
                    }
                }),
                line: new OpenLayers.Control.DrawFeature(drawingLayer, OpenLayers.Handler.Path),
                select: new OpenLayers.Control.SelectFeature(
                        drawingLayer,
                        {
                            clickout: false,
                            toggle: false,
                            multiple: false,
                            hover: false,
                            toggleKey: "ctrlKey", // ctrl key removes from selection
                            multipleKey: "shiftKey", // shift key adds to selection
                            box: true
                        }
                )
            };

            for (var key in drawingControls) {
                map.addControl(drawingControls[key]);
            }

            var highlightCtrl = new OpenLayers.Control.SelectFeature(drawingLayer, {
                hover: true,
                highlightOnly: true,
                renderIntent: "temporary",
                eventListeners: {
                    //beforefeaturehighlighted: report,
                    featurehighlighted: report,
                    featureunhighlighted: unReport
                }
            });
            map.addControl(highlightCtrl);
            highlightCtrl.activate();

            function report(e) {
                //OpenLayers.Console.log(e.type, e.feature.id);
                document.getElementById('highlighted').innerHTML=e.feature.id;
            };
            function unReport(e) {
                //OpenLayers.Console.log(e.type, e.feature.id);
                document.getElementById('highlighted').innerHTML="";
            };

            function changeMapMode(value) {
                for (var key in drawingControls) {
                    var control = drawingControls[key];
                    if (value == key) {
                        control.activate();
                    } else {
                        control.deactivate();
                    }
                }
            }

            function controlFeatureHandler(e) {
                alert(e.feature.geometry.getBounds());
            }

            function updateFeatureTable(featureList) {
                var wkt = new OpenLayers.Format.WKT();
                var table = "<table border='1'>";
                for(var key in featureList) {
                    table += "<tr><td>";
                    table += featureList[key].id;
                    table += "</td><td>";
                    table += wkt.write(featureList[key]);
                    table += "</td></tr>";
                }
                table += "</table>";
                document.getElementById('featureTable').innerHTML=table;
            }
        </script>
    </body>
</html>

Can any body has idea how could i get all the markers inside the selected polygon?

I have found one article which is written using OpenLayers Version 3 How to find markers in selected dragbox openlayers 3?[^]. But i am using version 2.x

Any help would be highly appreciated.

Posted 21-Nov-14 2:21am

Sunasara Imdadhusen

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sunasara Imdadhusen · Accepted Answer · 2014-11-23T18:21:00

Solution 1

I have get Answer from Gabor Farkas from below link:

How to get list of all markers from selected Polygon using OpenLayer MAP v2[^]

This would be for your reference if you are looking for the same.

Thanks,
Imdadhusen

Posted 23-Nov-14 18:21pm

Sunasara Imdadhusen