ArcGIS JS 4.11, Bootstrap and Calcite - an exercise
1352
0
04-29-2019 03:27 AM
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>