New selection sample

acanimal · Dec 14, 2014 · fddf79b · fddf79b
1 parent 84b43dd
commit fddf79b
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 0 deletions.
diff --git a/app/images/chapter07_08_selecting_features_box.png b/app/images/chapter07_08_selecting_features_box.png
diff --git a/app/samples.json b/app/samples.json
@@ -274,6 +274,12 @@
                 "description": "Basic vector data editor",
                 "url": "chapter07_07_editing_features.html",
                 "thumbnail": "chapter07_07_editing_features.png"
+            },
+            {
+                "title": "Selecting features within a vector box",
+                "description": "How to select features that intersects with a vector box",
+                "url": "chapter07_08_selecting_features_box.html",
+                "thumbnail": "chapter07_08_selecting_features_box.png"
             }
         ]
     }

diff --git a/app_tpl/chapter07_08_selecting_features_box.html b/app_tpl/chapter07_08_selecting_features_box.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html class="no-js">
+    <head>
+        include "head.html"
+
+        <style>
+            .toggle {
+                width: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <!--[if lt IE 10]>
+            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+
+        <div class="container">        
+
+            include "header.html"
+
+            <h2>Selecting features within a vector box</h2>
+
+            <p>The sample shows how we can combine the `ol.interacions.DragBox` and the `ol.interacions.Select` interactions to select those features that intersects with a given vector box:</p>
+
+            <button id="select" type="button" class="btn btn-default btn-sm" data-toggle="button" aria-pressed="false">Box selection</button>
+
+            <div id="map" class="map"></div>
+
+            <h4 class="text-muted">Source code:</h4>
+            <pre><code id="code_text" class="javascript"></code></pre>
+
+            include "footer.html"
+
+        </div>
+
+        include "tail.html"
+
+        include "ganalytics.html"
+
+        <script id="code">
+
+            // Create vector layers
+            var limitsLayer = new ol.layer.Vector({
+                source: new ol.source.StaticVector({
+                    url: 'data/world_limits.json',
+                    format: new ol.format.TopoJSON(),
+                    projection: 'EPSG:3857'
+                })
+            });
+
+            // Initialize the interactions
+            var selectInteraction = new ol.interaction.Select({
+                condition: ol.events.condition.never
+            });
+            var dragBoxInteraction = new ol.interaction.DragBox({
+                style: new ol.style.Style({
+                    stroke: new ol.style.Stroke({
+                        color: [250, 25, 25, 1]
+                    })
+                })
+            });
+            dragBoxInteraction.on('boxend', function(event) {
+                var selectedFeatures = selectInteraction.getFeatures();
+                var extent = dragBoxInteraction.getGeometry().getExtent();
+                limitsLayer.getSource().forEachFeatureIntersectingExtent(extent, function(feature) {
+                    selectedFeatures.push(feature);
+                });
+            });
+
+            // Create the map
+            var map = new ol.Map({
+                target: 'map',  // The DOM element that will contains the map
+                renderer: 'canvas', // Force the renderer to be used
+                layers: [
+                    new ol.layer.Tile({
+                        source: new ol.source.OSM()
+                    }),
+                    limitsLayer
+                ],
+                view: new ol.View({
+                    center: ol.proj.transform([2, 40], 'EPSG:4326', 'EPSG:3857'),
+                    zoom: 2
+                })
+            });
+
+            // Add or remove interactions
+            $('#select').on('click', function(event) {
+                var checked = !$('#select').hasClass('active');
+                if(checked) {
+                    map.addInteraction(selectInteraction);
+                    map.addInteraction(dragBoxInteraction);
+                } else {
+                    map.removeInteraction(selectInteraction);
+                    map.removeInteraction(dragBoxInteraction);
+                }
+            });
+        </script>
+
+        include "sourcecode.html"
+
+    </body>
+</html>