CODEWITHSUNDEEP
openlayers-3
Ken
Ken

Reputation: 1

Multiselect features in OpenLayers 3 not working

I am new to OpenLayers and have made a simple example where I try to enable drawing of polygons on a map. After drawing I want to be able to multiselect the polygons pressing shift click for further processing. I can not make this work even though some examples on the OpenLayers example page are pretty close... Here is my code (press Draw button and draw two polygons, press Stop button to exit drawing mode and try to multiselect holding shift key):

 <body>
        <div>
        <img src="stop.png" class="fmsv_map_btn" id="fmsv_stop_elm" title="Stop drawing" alt="Stop drawing">
        <img src="draw.png" class="fmsv_map_btn" id="fmsv_contour_elm" title="Contour" alt="Contour">    
        </div>
        <div width="600" height="600" id="map" class="map"></div>
        <script>
        var engine = this;
        var draw = null;
        var map = new ol.Map({
            target: "map",
            layers: [
              new ol.layer.Tile({
                  source: new ol.source.MapQuest({ layer: 'osm' })
              })
            ],
            view: new ol.View({
                center: [0,0],
                zoom: 2
            })
        });
        var features = new ol.Collection();
        var source = new ol.source.Vector({ features: features });
        var featureOverlay = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#000000',
                    width: 1
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#000000'
                    })
                })
            })
        });
        featureOverlay.setMap(map);
        $("#fmsv_contour_elm").click(function () {
            addInteraction("Polygon");
        });
        $("#fmsv_stop_elm").click(function () {
            if (draw)
                map.removeInteraction(draw);
            draw = null;
        });
        var selectClick = new ol.interaction.Select({
            condition: ol.events.condition.click,
            //addCondition: ol.events.condition.shiftKeyOnly,
            //toggleCondition: ol.events.condition.never,
            //removeCondition: ol.events.condition.altKeyOnly,
        });
        map.addInteraction(selectClick);
        var selectedFeatures = select.getFeatures();
        //selectClick.on('select', function (e) {
        //});

        function addInteraction(drawmode) {
            if (draw)
            map.removeInteraction(draw);
            draw = new ol.interaction.Draw({
               features: features,
               type: /** @type {ol.geom.GeometryType} */ (drawmode)
            });
            map.addInteraction(draw);
       }
    </script>
  </body>

Upvotes: 0

Views: 308

Answers (1)

oterral
oterral

Reputation: 471

Use map.addLayer(featureOverlay); instead of featureOverlay.setMap(map)

Upvotes: 0

Related Questions