EPolle_TensingInternational

Aan de slag met ArcGIS JavaScript - Kaart draaien

Blog Post created by EPolle_TensingInternational Champion on Jun 5, 2019

Aan de slag met ArcGIS JavaScript - Inhoudsopgave

 

Compass Widget

 

Ja, een goede kaart hoort noordgericht te zijn... maar soms is het ook leuk of nuttig om de plattegrond te draaien, om deze vanuit een ander perspectief te bekijken.

Met de ArcGIS API for JavaScript 4.x maak je een web map die door de gebruiker gedraaid kan worden (dit is standaardfunctionaliteit).

 

De kaart draaien, hoe doe je dat? Met de cursor op de kaart, de rechter muisknop ingedrukt houden en dan slepen. (Ja, misschien moet je dat even aan de eindgebruikers uitleggen. Het is immers niet heel intuïtief; het heeft bij mij ook een tijdje geduurd voordat ik dit in de gaten had...)

 

In deze oefening voegen we een Compass widget toe, die de gebruiker in staat stelt om de kaart weer naar het noorden te draaien nadat men de kaart gedraaid heeft ("Kompasoriëntatie resetten"). Let op: met deze knop kan men de kaart dus niet roteren, dat moet met een rechter-muisknop-sleepactie gedaan worden. Alleen als men de kaart weer naar het noorden wil draaien, dan moet men op de kompasknop klikken.

 

Hieronder staat de broncode. Klik hier om te zien hoe het draaien van de kaart werkt.

 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Aan de slag met ArcGIS JavaScript - Kaart draaien</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>


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

  <script> 
      require([
        "esri/Map",
        "esri/geometry/Point",
        "esri/views/MapView",
        "esri/layers/WMTSLayer",
        "esri/widgets/Search",
        "esri/tasks/Locator",
          "esri/Basemap",
          "esri/widgets/BasemapGallery",
          "esri/widgets/BasemapGallery/support/LocalBasemapsSource",
          "esri/widgets/Expand",
        "esri/widgets/Compass"
      ], function(Map, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand, Compass) {

      // BRT Achtergrondkaart van PDOK als achtergrondkaart
      var brtachtergrondkaart = new Basemap({
        baseLayers: [
           new WMTSLayer({
            url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS",
            copyright:
              "<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Achtergrondkaart</a> van <a target='_top' href='https://www.pdok.nl/'>PDOK</a>",
            activeLayer: {
              id: "brtachtergrondkaart"
            }
          })
        ],
        title: "BRT Achtergrondkaart (PDOK)",
        id: "brtachtergrondkaart_pdok",
        thumbnailUrl: "images/map.jpg"
      });

      // Basiskaarten Esr Nederland
      var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); //Lichtgrijze Canvas RD
      var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); //Donkergrijze Canvas RD
      var topo_RD_EsriNL = new Basemap({portalItem: {id: "7aea6fa913a94176a1074edb40690318"}}); //Topo RD
      var open_Topo_RD_EsriNL = new Basemap({portalItem: {id: "0698b71eb7cf47898086d072e574ac32"}}); //Open Topo RD
      var stratenkaart_RD_EsriNL = new Basemap({portalItem: {id: "9fe1a753955f418fa1cbaf1c47610a47"}}); //Stratenkaart RD
      var luchtfoto_RD_EsriNL = new Basemap({portalItem: {id: "38e1a1c6ee2c421290622400d22ecf57"}}); //Luchtfoto RD
     
      var dutchBasemaps  = new LocalBasemapsSource({
        basemaps : [brtachtergrondkaart, topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL]
      });

      var map = new Map({
        basemap: topo_RD_EsriNL
      });
     
       var view = new MapView({
         spatialReference: 28992,
         container: "viewDiv",
         map: map,
         center: new Point({x: 155000, y: 463000, spatialReference: 28992}),
         zoom: 3
       });

      var compass = new Compass({
        view: view
      });

      view.ui.add(compass, "top-left");

      var basemapGallery = new BasemapGallery({
        container: document.createElement("div"),
        view: view,
          source: dutchBasemaps
      });

      basemapGalleryExpand = new Expand({
        expandIconClass: "esri-icon-basemap", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
        expandTooltip: basemapGallery.label,
        view: view,
        content: basemapGallery.domNode,
        group: "top-right"
      });

      var searchWidget = new Search({
        container: document.createElement("div"),
        view: view,
        includeDefaultSources: false
      });

      searchWidget.sources = [{
        locator: new Locator({ url: "https://services.arcgisonline.nl/arcgis/rest/services/Geocoder_BAG_RD/GeocodeServer"}), // GeocodeServer van Esri Nederland
        singleLineFieldName: "SingleLine", // Deze optie zorgt er voor dat je kunt zoeken op postcode/huisnummer combinatie, bijvoorbeeld: 4181 AE 38
        placeholder: searchWidget.allPlaceholder // "Find address or place" voor de English locale, "Adres of plaats zoeken" voor de Nederlandse locale
      }]
      
      searchWidgetExpand = new Expand({
        expandIconClass: "esri-icon-search",
        expandTooltip: searchWidget.label,
        view: view,
        content: searchWidget.domNode,
          expanded: true,
        group: "top-right"
      });

      view.ui.add([searchWidgetExpand, basemapGalleryExpand], "top-right");

    });
  </script>

</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

Outcomes