Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the featureeffect-geometry sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/featureeffect-geometry/index.html
  -->
<title>Appliquer des effets de filtrage sur uen couche d'entités</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.11/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial,
          sans-serif;
      }

      #infoDiv {
        background-color: white;
        padding: 10px;
        width: 260px;
        margin: 5px;
        position: absolute;
        bottom: 15px;
        right: 10px;
        font-size: 14px;
        display: none;
      }

      .geometry-options {
        display: flex;
        flex-direction: row;
      }

      .geometry-button,
      .layer-button {
        flex: 1;
        border-style: solid;
        border-width: 1px;
        border-image: none;
      }

      .geometry-button-selected {
        background: #4c4c4c;
        color: #fff;
      }

      .options {
        max-width: 260px;
        width: 100%;
        height: 25px;
      }

      #distanceNum {
        width: 80%;
      }
    </style>
    <script>
      require([
        "esri/WebMap",
        "esri/layers/GraphicsLayer",
        "esri/views/MapView",
        "esri/Graphic",
        "esri/core/watchUtils",
        "esri/geometry/geometryEngine"
      ], function(
        WebMap,
        GraphicsLayer,
        MapView,
        Graphic,
        watchUtils,
        geometryEngine
      ) {
        let bufferGraphic, featureLayerView;
        let featureFilter = {};
        let layerViews = {};
        let filterGeometries = {};

        //FeatureFilter variables
        let filterGeometry = null;
        let geometryRel = "intersects";
        let distance = 0;
        let unit = "meters";

        let map = new WebMap({
          portalItem: {
            id: "971eae060595416283eaac4ad54cbbda"
          }
        });

        let bufferGeometriesLayer = new GraphicsLayer();

        map.load().then(function() {
          // add the graphics layer to the top once webmap loads
          map.layers.unshift(bufferGeometriesLayer);
          // loop through webmap's operational layers
          map.layers.forEach(function(layer, index) {
            // loop through all layerviews, add them to global variable
            // so that they can be accessed later for filtering
            view.whenLayerView(layer).then(function(layerView) {
              if (layer.type === "feature") {
                var type = layer.geometryType;
                layerViews[type] = layerView;
                if (layerView.layer.geometryType === "point") {
                  // set the point layer view as the active layer view
                  featureLayerView = layerView;
                }
              }
            });
          });
        });

        let view = new MapView({
          map: map,
          container: "viewDiv",
          padding: { right: 260 }
        });

        // geometry filter distance UI components
        const distanceNum = document.getElementById("distanceNum");
        const distanceUnit = document.getElementById("distance-select");
        const spatialRelType = document.getElementById("relationship-select");
        const distanceValueNum = document.getElementById("distanceValueNum");

        // listen to change and input events on UI components
        distanceNum.onchange = distanceVariablesChanged;
        distanceUnit.onchange = distanceVariablesChanged;
        spatialRelType.onchange = distanceVariablesChanged;
        distanceNum.oninput = distanceVariablesChanged;

        // get user entered values from distance related options
        function distanceVariablesChanged() {
          unit = distanceUnit.value;
          distance = parseInt(distanceNum.value);
          distanceValueNum.innerHTML = distance;
          geometryRel = spatialRelType.value;
          updateBuffer();
        }

        // update the buffer graphic if user is filtering by distance
        function updateBuffer() {
          if (distance > 0 && filterGeometry) {
            var newBufferGeometry = geometryEngine.geodesicBuffer(
              filterGeometry,
              distance,
              unit
            );
            bufferGeometriesLayer.graphics.getItemAt(
              0
            ).geometry = newBufferGeometry;
            updateFilter();
          } else {
            bufferGraphic.geometry = null;
            updateFilter();
          }
        }

        // set the geometry filter on the visible FeatureLayerView
        function updateFilter() {
          featureFilter = {
            // autocasts to FeatureFilter
            geometry: filterGeometry,
            spatialRelationship: geometryRel,
            distance: distance,
            units: unit
          };
          // set effect on excluded features
          // make them gray and transparent
          if (featureLayerView) {
            featureLayerView.effect = {
              filter: featureFilter,
              excludedEffect: "grayscale(100%) opacity(30%)"
            };
          }
        }

        // click events for the layer type buttons
        document.getElementById(
          "point-layer-button"
        ).onclick = layersChangedClickHandler;
        document.getElementById(
          "line-layer-button"
        ).onclick = layersChangedClickHandler;
        document.getElementById(
          "polygon-layer-button"
        ).onclick = layersChangedClickHandler;

        // Make the selected layerview visible while setting the other layerviews invisible
        function layersChangedClickHandler(event) {
          for (var key in layerViews) {
            layerViews[key].visible = false;
          }
          const geometryType = event.target.value;
          var layerView = layerViews[geometryType];
          layerView.visible = true;
          featureLayerView = layerView;
          updateBuffer();
          setActiveButton(this);
        }

        // geometry buttons - use the selected geometry to set effect
        document.getElementById(
          "point-geometry-button"
        ).onclick = geometryButtonsClickHandler;
        document.getElementById(
          "line-geometry-button"
        ).onclick = geometryButtonsClickHandler;
        document.getElementById(
          "polygon-geometry-button"
        ).onclick = geometryButtonsClickHandler;
        function geometryButtonsClickHandler(event) {
          const geometryType = event.target.value;
          var filterGraphic;
          for (var key in filterGeometries) {
            filterGeometries[key].visible = false;
          }
          var filterGraphic = filterGeometries[geometryType];
          filterGraphic.visible = true;
          filterGeometry = filterGraphic.geometry;

          updateBuffer();
          setActiveButton(this);
        }

        document.getElementById("clearFilter").onclick = function() {
          filterGeometry = null;
          bufferGraphic.geometry = null;
          for (var key in filterGeometries) {
            filterGeometries[key].visible = false;
          }
          updateFilter();
          setActiveButton();
        };

        function setActiveButton(selectedButton) {
          // focus the view to activate keyboard shortcuts for sketching
          var elements = document.getElementsByClassName(
            "geometry-button-selected"
          );
          if (selectedButton) {
            for (var i = 0; i < elements.length; i++) {
              if (
                elements[i].classList.contains("layer-button") &&
                selectedButton.classList.contains("layer-button")
              ) {
                elements[i].classList.remove("geometry-button-selected");
              } else if (
                elements[i].classList.contains("geometry-button") &&
                selectedButton.classList.contains("geometry-button")
              ) {
                elements[i].classList.remove("geometry-button-selected");
              }
              selectedButton.classList.add("geometry-button-selected");
            }
          } else if (!selectedButton) {
            for (var i = 0; i < elements.length; i++) {
              if (elements[i].classList.contains("geometry-button")) {
                elements[i].classList.remove("geometry-button-selected");
              }
            }
          }
        }

        // add predefined point, line and polygon features
        view.when(function() {
          const polygon = {
            type: "polygon",
            rings: [
              [-8369152.108088223, 4858625.975183949],
              [-8364871.261276581, 4858713.161169337],
              [-8365068.4747812, 4855823.856429268],
              [-8369472.561371844, 4856045.031150761],
              [-8369152.108088223, 4858625.975183949]
            ],
            spatialReference: view.spatialReference
          };
          const polygonGraphic = new Graphic({
            geometry: polygon,
            symbol: {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [51, 51, 204, 0.4],
              style: "solid",
              outline: {
                color: "white",
                width: 1
              }
            },
            visible: false
          });
          filterGeometries[polygonGraphic.geometry.type] = polygonGraphic;

          const line = {
            type: "polyline",
            paths: [
              [
                polygonGraphic.geometry.extent.xmin,
                polygonGraphic.geometry.extent.ymin
              ],
              [
                polygonGraphic.geometry.extent.xmax,
                polygonGraphic.geometry.extent.ymax
              ]
            ],
            spatialReference: view.spatialReference
          };
          const lineGraphic = new Graphic({
            geometry: line,
            symbol: {
              type: "simple-line",
              color: [51, 51, 204, 0.5],
              width: "4px"
            },
            visible: false
          });
          filterGeometries[lineGraphic.geometry.type] = lineGraphic;

          const point = {
            type: "point",
            x: polygonGraphic.geometry.centroid.x,
            y: polygonGraphic.geometry.centroid.y,
            spatialReference: view.spatialReference
          };

          const pointGraphic = new Graphic({
            geometry: point,
            symbol: {
              type: "text",
              color: [51, 51, 204, 0.9],
              text: "\ue61d",
              font: {
                size: 24,
                family: "calcite-web-icons"
              }
            },
            visible: false
          });
          filterGeometries[pointGraphic.geometry.type] = pointGraphic;

          bufferGraphic = new Graphic({
            symbol: {
              type: "simple-fill",
              color: [151, 151, 204, 0.5],
              style: "solid",
              outline: {
                color: "white",
                width: 1
              }
            },
            visible: true
          });
          bufferGeometriesLayer.addMany([
            bufferGraphic,
            polygonGraphic,
            lineGraphic,
            pointGraphic
          ]);
          document.getElementById("infoDiv").style.display = "block";
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="infoDiv">
      <b>Explorer les relations spatiales</b><br /><br />
      <label for="layers">Sélectionner une couche:</label>
      <div class="geometry-options" id="layers">
        <button
          class="esri-widget--button esri-icon-map-pin layer-button
          geometry-button-selected"
          id="point-layer-button"
          value="point"
          title="Select a point layer to see how it is spatially related to one of the predefined geometries"
        ></button>
        <button
          class="esri-widget--button esri-icon-polyline layer-button"
          id="line-layer-button"
          value="polyline"
          title="Select a line layer to see how it is spatially related to one of the predefined geometries"
        ></button>
        <button
          class="esri-widget--button esri-icon-polygon layer-button"
          id="polygon-layer-button"
          value="polygon"
          title="Select a polygon layer to see how it is spatially related to one of the predefined geometries"
        ></button>
      </div>
      <br />Sélectionner une géométrie prédéfinie:
      <div class="geometry-options">
        <button
          class="esri-widget--button esri-icon-map-pin geometry-button"
          id="point-geometry-button"
          value="point"
          title="Filter by point"
        ></button>
        <button
          class="esri-widget--button esri-icon-polyline geometry-button"
          id="line-geometry-button"
          value="polyline"
          title="Filter by line"
        ></button>
        <button
          class="esri-widget--button esri-icon-polygon geometry-button"
          id="polygon-geometry-button"
          value="polygon"
          title="Filter by polygon"
        ></button>
      </div>
      <br />
      <label for="relationship-select">Relation spatiale:</label>
      <select id="relationship-select" class="options">
        <option value="intersects" selected>Intersecte</option>
        <option value="contains">Contient</option>
        <option value="crosses">Traverse</option>
        <option value="envelope-intersects">Intersect l'enveloppe</option>
        <option value="overlaps">Superpose</option>
        <option value="touches">Touche</option>
        <option value="within">A l'intérieur</option>
        <option value="disjoint">A l'extérieur</option> </select
      ><br /><br />
      <div class="tooltip">
        <label for="distanceNum">Changer la distance:</label>
        <span id="distanceValueNum">0</span> <br />
        0<input
          id="distanceNum"
          type="range"
          min="0"
          max="5000"
          value="0"
          tabindex="1"
        />5000
      </div>
      <br /><br />
      <label for="distance-select">Unités de distance:</label>
      <select id="distance-select" class="options">
        <option value="meters">mètres</option>
        <option value="kilometers">kilomètres</option>
        <option value="feet">pieds</option>
        <option value="miles">miles</option>
        <option value="nautical-miles">miles nautiques</option> </select
      ><br /><br /><br />
      <button class="esri-button" id="clearFilter" type="button">
        Effacer tous les filtres
      </button>
    </div>
  </body>
</html>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console