ArcGIS JS 4.11, Bootstrap and Calcite - an exercise

832
0
04-29-2019 03:27 AM
Egge-JanPollé1
MVP Regular Contributor
3 0 832

Calcite Maps contains CSS classes that can be used with Bootstrap to quickly build responsive map apps with a great UI and UX.

After some trial and error I managed to create a first map app with those libraries. You can see it in action here:

Happy coding!

Egge-Jan

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="ArcGIS JS v4, Calcite Maps and Bootstrap Example">
  <title>Gemeente West Betuwe</title>
  <!-- Calcite Maps Bootstrap -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-bootstrap.min-v0.10.css">
  <!-- Calcite Maps -->
  <link rel="stylesheet" href="https://esri.github.io/calcite-maps/dist/css/calcite-maps-arcgis-4.x.min-v0.10.css">
  <!-- ArcGIS JS 4 -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body class="calcite-maps calcite-nav-top">
  <!-- Navbar -->
  <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bgcolor-dark-blue">
    <!-- Menu -->
    <div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation">
      <a class="dropdown-toggle" role="menubutton" aria-haspopup="true" aria-expanded="false" tabindex="0">
        <div class="calcite-dropdown-toggle">
          <span class="sr-only">Toggle dropdown menu</span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </a>
      <ul class="dropdown-menu" role="menu">
        <li><a role="menuitem" tabindex="0" data-target="#panelInfo" aria-haspopup="true"><span class="glyphicon glyphicon-info-sign"></span> Over deze kaart</a></li>
      </ul>
    </div>
    <!-- Title -->
    <div class="calcite-title calcite-overflow-hidden">
      <span class="calcite-title-main">Gemeente West Betuwe</span>
      <span class="calcite-title-divider hidden-xs"></span>
      <span class="calcite-title-sub hidden-xs">De gemeente West Betuwe bestaat uit 26 kernen</span>
    </div>
    <!-- Nav -->
    <ul class="nav navbar-nav calcite-nav">
      <li>
        <div class="calcite-navbar-search calcite-search-expander">
          <div id="searchWidgetDiv"></div>
        </div>
      </li>
    </ul>
  </nav>

  <!--/.calcite-navbar -->

  <!-- Map  -->

  <div class="calcite-map calcite-map-absolute">
    <div id="mapViewDiv"></div>
  </div>

  <!-- /.calcite-map -->

  <!-- Panels -->

  <div class="calcite-panels calcite-panels-left calcite-text-dark calcite-bg-light panel-group">

    <!-- Panel - About -->

    <div id="panelInfo" class="panel collapse in">
      <div id="headingInfo" class="panel-heading" role="tab">
        <div class="panel-title">
          <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseInfo"  aria-expanded="true" aria-controls="collapseInfo"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span><span class="panel-label">Interactieve kaart van de gemeente West Betuwe</span></a> 
          <a class="panel-close" role="button" data-toggle="collapse" tabindex="0" href="#panelInfo"><span class="esri-icon esri-icon-close" aria-hidden="true"></span></a>  
        </div>
      </div>
      <div id="collapseInfo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingInfo">
        <div class="panel-body">
		  <a href="https://www.westbetuwe.nl/" target="_blank" title="West Betuwe"><img src="https://www.westbetuwe.nl/sites/all/themes/westbetuwe/logo.svg" alt="West Betuwe" width="132px" height="77px"></a>
          <p>De <a href="https://www.westbetuwe.nl/" target="_blank">Gemeente West Betuwe</a> bestaat uit 24 dorpen en 2 kleine steden. Het gemeentehuis staat in Geldermalsen.</p>
		  <p>Gebruik de knoppen aan de rechterkant om de kaart te verkennen:</p>
		  <ul>
		    <li>kies een andere basiskaart of een luchtfoto</li>
			<li>spring met de bladwijzers langs elk van de 26 kernen.</li>
		  </ul>
		  Deze kaart is samengesteld door <a href="https://www.tensing.com/">Tensing GIS Consultancy B.V.</a>
        </div>
     </div>
    </div>

  </div>

  <!-- /.calcite-panels -->

  <script type="text/javascript">
    var dojoConfig = {
      packages: [{
        name: "bootstrap",
        location: "https://esri.github.io/calcite-maps/dist/vendor/dojo-bootstrap"
      },
      {
        name: "calcite-maps",
        location: "https://esri.github.io/calcite-maps/dist/js/dojo"
        
      }]
    };
  </script>

  <!-- ArcGIS JS 4 -->
  <script src="https://js.arcgis.com/4.11/"></script>
  <script>
    require([
      // ArcGIS
      "esri/WebMap",
      "esri/views/MapView",

      // Widgets
	  "esri/Basemap",
	  "esri/widgets/BasemapGallery",
	  "esri/widgets/BasemapGallery/support/LocalBasemapsSource",
	  "esri/widgets/Expand",
	  "esri/geometry/Point",
	  "esri/tasks/Locator",
      "esri/widgets/Home",
      "esri/widgets/Zoom",
      "esri/widgets/Search",
      "esri/widgets/ScaleBar",
      "esri/widgets/Attribution",
	  "esri/layers/FeatureLayer",
	  "esri/widgets/LayerList",
	  "esri/widgets/Bookmarks",

      // Bootstrap
      "bootstrap/Collapse",
      "bootstrap/Dropdown",

      // Calcite Maps
      "calcite-maps/calcitemaps-v0.10",
      
      // Calcite Maps ArcGIS Support
      "calcite-maps/calcitemaps-arcgis-support-v0.10",

      "dojo/domReady!"
    ], function(WebMap, MapView, Basemap, BasemapGallery, LocalBasemapsSource, Expand, Point, Locator, Home, Zoom, Search, ScaleBar, Attribution, FeatureLayer, LayerList, Bookmarks, Collapse, Dropdown, CalciteMaps, CalciteMapArcGISSupport) {

      /******************************************************************
       *
       * Create the map, view and widgets
       * 
       ******************************************************************/

      // Basemaps 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 localBasemaps = new LocalBasemapsSource({
		  basemaps : [topo_RD_EsriNL, open_Topo_RD_EsriNL, stratenkaart_RD_EsriNL, luchtfoto_RD_EsriNL, lightGrayCanvas_RD_EsriNL, darkGrayCanvas_RD_EsriNL]
		});

		var municipalitiesRenderer = {
		  "type": "simple",
		  "symbol": {
			"color": [
				193,157,188,0
			  ],
			  "outline": {
				"width": 3,
				"color": [255,0,0,255]
			  },
			  "type": "simple-fill",
			  "style": "solid"
			  }
		}

		var westBetuweLayer = new FeatureLayer({
		  url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
		  definitionExpression: "Gemeentenaam = 'West Betuwe'",
		  renderer: municipalitiesRenderer,
		  title: "Gemeente West Betuwe"
	    });

      // Map
	    var map = new WebMap({
      	  basemap: topo_RD_EsriNL,
		  bookmarks: []
      	});
      
      // View
		var centerPoint = new Point({
		  x: 141000,
		  y: 431000,
		  spatialReference: 28992
		});

      var mapView = new MapView({
      	spatialReference: 28992,
        container: "mapViewDiv",
        map: map,
      	center: centerPoint,
      	zoom: 7,
        padding: {
          top: 50,
          bottom: 0
        },
        ui: {components: []}
      });

      // Popup and panel sync
      mapView.when(function(){
        CalciteMapArcGISSupport.setPopupPanelSync(mapView);
      });

      // Search - add to navbar
      var searchWidget = new Search({
        container: "searchWidgetDiv",
        view: mapView,
		sources: [{
		    locator: new Locator({ url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"}),
			singleLineFieldName: "SingleLine", // This allows to search on the combination of Postal Code and House number, e.g. 4181 AE 38
		    countryCode:"NL", //use the default GeocodeServer, but limit the results to the Netherlands only
		    placeholder: "Adres of plaats zoeken"
	    }],
		includeDefaultSources: false
      });
      CalciteMapArcGISSupport.setSearchExpandEvents(searchWidget);

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

		basemapGalleryExpand = new Expand({
		  expandIconClass: "esri-icon-basemap",
		  expandTooltip: "Basiskaarten",
		  view: mapView,
		  content: basemapGallery.domNode,
		  group: "top-right"
		});

		// 26 bookmarks, one for each settlement in the municipality West Betuwe
		var acquoy = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 138503.35304403925, "xmin": 136631.68680070675, "ymax": 432739.07342354086, "ymin": 431723.0713915368}, "name": "Acquoy"}
		var asperen = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 136622.16178165673, "xmin": 134750.49553832423, "ymax": 432993.0739315419, "ymin": 431977.0718995378}, "name": "Asperen"}
		var beesd = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 143550.49825170927, "xmin": 139807.16576504428, "ymax": 434558.7619750061, "ymin": 432526.75791099796}, "name": "Beesd"}
		var buurmalsen = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 149563.92921902513, "xmin": 147692.26297569263, "ymax": 434331.74646668794, "ymin": 433315.7444346839}, "name": "Buurmalsen"}
		var deil = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 145914.8999798049, "xmin": 144043.2337364724, "ymax": 433349.8428156855, "ymin": 432333.84078368143}, "name": "Deil"}
		var enspijk = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 143824.1582983215, "xmin": 141952.492054989, "ymax": 433286.3426886853, "ymin": 432270.3406566812}, "name": "Enspijk"}
		var est = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 150885.78617204374, "xmin": 149014.11992871124, "ymax": 429857.2684293447, "ymin": 428841.26639734063}, "name": "Est"}
		var geldermalsen = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 152072.72858544375, "xmin": 144586.06361211382, "ymax": 434355.4041321138, "ymin": 430291.39600409754}, "name": "Geldermalsen"}
		var gellicum = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 139809.74584502002, "xmin": 137938.07960168752, "ymax": 432562.79321577866, "ymin": 431546.7911837746}, "name": "Gellicum"}
		var haaften = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 144804.84772048338, "xmin": 141061.51523381838, "ymax": 426469.7671901477, "ymin": 424437.7631261396}, "name": "Haaften"}
		var heesselt = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 152986.67343878676, "xmin": 151115.00719545427, "ymax": 425528.9288043354, "ymin": 424512.92677233135}, "name": "Heesselt"}
		var hellouw = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 141734.09537931997, "xmin": 139862.42913598748, "ymax": 426967.99866790266, "ymin": 425951.9966358986}, "name": "Hellouw"}
		var herwijnen = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 139057.28484307035, "xmin": 135313.95235640535, "ymax": 427292.3445488486, "ymin": 425260.34048484045}, "name": "Herwijnen"}
		var heukelum = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 134357.71964230874, "xmin": 132486.05339897625, "ymax": 432002.7877464117, "ymin": 430986.7857144076}, "name": "Heukelum"}
		var meteren = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 149720.9209097724, "xmin": 145977.5884231074, "ymax": 431895.130998323, "ymin": 429863.12693431485}, "name": "Meteren"}
		var neerijnen = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 148605.2236977566, "xmin": 146733.5574544241, "ymax": 427592.99739405577, "ymin": 426576.9953620517}, "name": "Neerijnen"}
		var ophemert = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 155858.63468991983, "xmin": 153986.96844658733, "ymax": 428995.5784613015, "ymin": 427979.57642929745}, "name": "Ophemert"}
		var opijnen = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 150153.02875367695, "xmin": 148281.36251034445, "ymax": 427178.9951751489, "ymin": 426162.9931431448}, "name": "Opijnen"}
		var rhenoy = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 139883.65542643785, "xmin": 138011.98918310535, "ymax": 433465.3423578122, "ymin": 432449.34032580815}, "name": "Rhenoy"}
		var rumpt = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 141623.5589062448, "xmin": 139751.89266291232, "ymax": 433311.3545498366, "ymin": 432295.35251783254}, "name": "Rumpt"}
		var spijk = {"extent": {"spatialReference": {"wkid": 28992},"xmax": 129845.6697719994, "xmin": 127974.0035286669, "ymax": 430100.6874421172, "ymin": 429084.68541011313}, "name": "Spijk"}
		var tricht = {"extent": {"spatialReference": {"wkid": 28992},"xmax": 147787.92126019052, "xmin": 145916.25501685802, "ymax": 434052.5306966994, "ymin": 433036.52866469533}, "name": "Tricht"}
		var tuil = {"extent": {"spatialReference": {"wkid": 28992},"xmax": 146090.7356022319, "xmin": 144219.0693588994, "ymax": 426628.87806301774, "ymin": 425612.8760310137}, "name": "Tuil"}
		var varik = {"extent": {"spatialReference": {"wkid": 28992}, "xmax": 154870.568815881, "xmin": 152998.9025725485, "ymax": 426641.3284201823, "ymin": 425625.3263881782}, "name": "Varik"}
		var vuren = {"extent": {"spatialReference": {"wkid": 28992},"xmax": 132126.59084458242, "xmin": 130254.92460124994, "ymax": 426615.1489074081, "ymin": 425599.14687540405}, "name": "Vuren"}
		var waardenburg = {"extent": {"spatialReference": {"wkid": 28992},"xmax": 147507.45807096915, "xmin": 143764.12558430416, "ymax": 427905.2744644191, "ymin": 425873.270400411}, "name": "Waardenburg"}

	
		map.bookmarks.addMany([acquoy, asperen, beesd, buurmalsen, deil, enspijk, est, geldermalsen, gellicum, haaften, heesselt, hellouw, herwijnen, heukelum, meteren, neerijnen, ophemert, opijnen, rhenoy, rumpt, spijk, tricht, tuil, varik, vuren, waardenburg]);
	
		const bookmarksWidget = new Bookmarks({
		  container: document.createElement("div"),
		  view: mapView
		});
		
		bookmarksWidgetExpand = new Expand({
		  expandIconClass: "esri-icon-bookmark", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
		  expandTooltip: "Bladwijzers", // optional, defaults to "Expand" for English locale
		  view: mapView,
		  content: bookmarksWidget.domNode,
		  group: "top-right"
		});

		var layerList = new LayerList({
		  container: document.createElement("div"),
		  view: mapView
		});

		layerListExpand = new Expand({
		  expandIconClass: "esri-icon-layer-list",  // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
		  expandTooltip: "Lagen aan- of uitzetten", // optional, defaults to "Expand" for English locale
		  view: mapView,
		  content: layerList.domNode,
		  group: "top-right"
		});

      var home = new Home({
        view: mapView,
		group: "top-right"
		
      });
 
      var zoom = new Zoom({
        view: mapView,
		group: "top-right"
      });
 
		mapView.ui.add([basemapGalleryExpand, bookmarksWidgetExpand, layerListExpand, home, zoom], "top-right");

      var scaleBar = new ScaleBar({
        view: mapView,
		unit: "metric"
      });
      mapView.ui.add(scaleBar, "bottom-left");

      var attribution = new Attribution({
        view: mapView
      });
      mapView.ui.add(attribution, "manual");
	  
	  map.layers.addMany([westBetuweLayer]);
    });
  </script>
</body>
</html>
About the Author
GIS Consultant at Tensing GIS Consultancy B.V.