ここをクリックしてウィジェットの展開・折りたたみ動作を見ることができます。<\/>\n<!DOCTYPE html><\/>\n<<\/>html<\/>\n<<\/>head<\/>\n <<\/>meta charset=\"utf-8\"><\/>\n <<\/>meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\"><\/>\n <<\/>title>ArcGIS JavaScript 入門 - ウィジェット折りたたみ</title><\/>\n <<\/>style><\/>\n html, body, #viewDiv {<\/>\n padding: 0;<\/>\n margin: 0;<\/>\n height: 100%;<\/>\n width: 100%;<\/>\n }<\/>\n </style><\/>\n </head><\/>\n <link rel=\"stylesheet\" href=\"https://js.arcgis.com/4.11/esri/css/main.css\"><\/>\n <script src=\"https://js.arcgis.com/4.11/\"><\/>>
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"
], function(Map, Point, MapView, WMTSLayer, Search, Locator, Basemap, BasemapGallery, LocalBasemapsSource, Expand) {
// PDOK の BRT 背景地図を背景地図として使用
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: "https://www.pdok.nl/o/iv-pdok-theme/images/pdok/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",
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
