Getting started with ArcGIS JavaScript - Toggle labels on or off<\/A> <\/P><\/P>
<!DOCTYPE html><\/SPAN>
<<\/SPAN>html><\/SPAN><\/SPAN>
<<\/SPAN>head><\/SPAN><\/SPAN>
<<\/SPAN>meta charset="utf-8"><\/<SPAn>
<<\/<SPAn>
<meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">
<title>Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten</title>
<link rel=\"stylesheet\" href=\"https://js.arcgis.com/4.14/esri/css/main.css\">
<script src=\"https://js.arcgis.com/4.14/\"></script>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-basemap-gallery__item-thumbnail {
width: auto;
}
</style>
<script>
require([
"esri/Map",
"esri/geometry/Point",
"esri/views/MapView",
"esri/layers/WMTSLayer",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
"esri/widgets/Search",
"esri/tasks/Locator",
"esri/Basemap",
"esri/widgets/BasemapGallery",
"esri/widgets/BasemapGallery/support/LocalBasemapsSource",
"esri/widgets/Expand"
], function(Map, Point, MapView, WMTSLayer, FeatureLayer, LayerList, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand) {
// BRT Background map from PDOK as basemap
var brtachtergrondkaart = new Basemap({
baseLayers: [
new WMTSLayer({
url: "https://geodata.nationaalgeoregister.nl/tiles/service/wmts?request=GetCapabilities&service=WMTS" class="punctuation token">,
copyright:
"<a target='_top' href='https://www.pdok.nl/introductie/-/article/basisregistratie-topografie-achtergrondkaarten-brt-a-'>BRT Background Map</a> from <a target='_top' href='https://www.pdok.nl/'>PDOK</a>",
activeLayer: {
id: "brtachtergrondkaart"
}
})
],
title: "BRT Background Map (PDOK)",
id: "brtachtergrondkaart_pdok",
thumbnailUrl: "images/map.jpg"
});
// Base maps Esr Netherlands
var lightGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "9ff6521e85d24df1aa9cd4aebfef748b"}}); // Light gray Canvas RD
var darkGrayCanvas_RD_EsriNL = new Basemap({portalItem: {id: "62a3befb579e4d9f9c5c51576c8a7c25"}}); // Dark gray 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 </ Span > stratenkaart_RD_EsriNL = </ Span > New </ Span > Basemap </ Span > ( </ Span > { </ Span > portalItem : </ Span > { </ Span > id : </ Span > "9fe1a753955f418fa1cbaf1c47610a47" </ Span > } </ Span > } </ Span > ) </ Span > ; </ Span > // Stratenkaart RD </ Span >
Var </ Span > luchtfoto_RD_EsriNL = </ Span > New </ Span > Basemap </ Span > ( </ Span > { </ Span > portalItem : </ Span > { </ Span > id : </ Span > "38e1a1c6ee2c421290622400d22ecf57" </ Span > } </ Span > } </ Span > ) </ Span > ; </ Span > // Aerial photo RD </ Span >
Var </ Span > dutchBasemaps = </ Span > New </ Span > LocalBasemapsSource </ Span > ( </ Span > { </ Span >
basemaps : [ </ Span > brtachtergrondkaartnew FeatureLayer({
url: "https://services.arcgis.com/nSZVuSZjHpEZZbRo/arcgis/rest/services/Bestuurlijke_Grenzen_Gemeenten_2019/FeatureServer/0",
title: "Municipalities (2019)",
popupTemplate: popupTemplateMun,
renderer: rendererMun,
labelingInfo: [labelClassMun],
labelsVisible: false
});
var popupTemplateProv = {title: "Province {Provincienaam}", content: ""};
var rendererProv = {type: "simple", symbol: {type: "simple-fill" , style: "none" , outline: { width: 2.5 , color: "#8B4513" } } } ;
labelClassProv symbol type "text", color "#8B4513", haloColor "white", haloSize "4px", font size 12, weight< SPAN string = token">{
if (event.item.layer.labelsVisible === false) {
event.item.layer.labelsVisible = true;
event.action.title = "Turn off labels";
} else {
event.item.layer.labelsVisible = false;
event.action.title = "Turn on labels";
}
}
});
layerListExpand = new Expand({
expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: layerList.label,
view: view,
content: layerList,
expanded: true,
group: "top-right"
});
var basemapGallery = new <\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/SPAN><\/<\/span\/><<<emojI_32>>\/<\/span\/><<<emojI_33>>\/<\/span\/><<<emojI_34>>\/<\/span\/><<<emojI_35>>\/<\/span\/><<<emojI_36>>\/<\/span\/><<<emojI_37>>\/<\/span\/><<<emojI_38>>\/<\/span\/><<<emojI_39>>\/<\/span\/><<<emojI_40>>\/<\/span\/><<<emojI_41>>\/<\/span\/><<<emojI_42>>\/<\/span\/><<<emojI_43>>\/<\/span\/><<<emojI_44>>\/<\/span\/><<<emojI_45>>\/<\/span\/><<<emojI_46>>\/<\/span\/><<<emojI_47>>\/<\/span\/><<<emojI_48>>\/<\/span\/><<<emojI_49>>\/<\/span\/>
