30:T886,html`${ selection ? html`

${Object.entries(selection).map(([key, value]) => { const descriptions = { objectid: "Unique record ID", issuer: "Permit issuer", prov: "Province", idprov: "Province ID", kab: "Regency / City", idkab: "Regency/City ID", island: "Island", nmoprt: "Company name", tipopr: "Company type", adoprt: "Company address", phoprt: "Company phone", skblok: "Permit/License code", tiptmb: "Mining license type", datstr: "Start date", datend: "End date", lublok: "Area (hectares)", status: "Operational status code", locate: "Location keyword", idcmd: "Commodity ID", clascmd: "Commodity class", commdt: "Commodity", idblok: "Block ID", remark: "Generation or batch", srs_id: "Spatial reference system", fcode: "Feature code", datcrte: "Record creation date", shape: "Geometry type" }; return html``; })}

Field	Value	Description (Inferred)
${key}	${value}	${ descriptions[key] \|\| "" }

` : html`

Click on IUP area to show more detail..

` }`31:T883,map = { // base layers const baseLayers = { "ESRI Satellite": new ol.layer.Tile({ source: new ol.source.XYZ({ url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", attributions: "Tiles © Esri" }), visible: true, title: "ESRI Satellite" }), OpenStreetMap: new ol.layer.Tile({ source: new ol.source.OSM(), visible: false, title: "OpenStreetMap" }), "ESRI Topo": new ol.layer.Tile({ source: new ol.source.XYZ({ url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}", attributions: "Tiles © Esri" }), visible: false, title: "ESRI Topo" }) }; // Operational layer const operationalLayer = new ol.layer.Tile({ source: new ol.source.TileArcGISRest({ url: "https://kspservices.big.go.id/satupeta/rest/services/PUBLIK/PERIZINAN_DAN_PERTANAHAN/MapServer", params: { layers: "show:4" } }) }); // target container const mapContainer = html`

`; // Map instance const map = new ol.Map({ target: mapContainer, layers: [...Object.values(baseLayers), operationalLayer], view: new ol.View({ center: ol.proj.fromLonLat([110.9, -7.5]), zoom: 5 }) }); // layer switcher control on top-right const selector = html``; mapContainer.appendChild(selector); selector.addEventListener("change", () => { for (const [name, layer] of Object.entries(baseLayers)) { layer.setVisible(name === selector.value); } }); // Fit view setTimeout(() => { map.updateSize(); map .getView() .fit( ol.proj.transformExtent( [93.216, -12.922, 143.07, 7.738], "EPSG:4326", map.getView().getProjection() ), { size: map.getSize() } ); }, 1); return map; }32:T49c,map.on("singleclick", function (evt) { const view = map.getView(); const projection = view.getProjection(); const size = map.getSize(); const resolution = view.getResolution(); const coordinate = evt.coordinate; const extent = view.calculateExtent(size); const [x, y] = ol.proj.transform(coordinate, projection, "EPSG:4326"); const url = "https://kspservices.big.go.id/satupeta/rest/services/PUBLIK/PERIZINAN_DAN_PERTANAHAN/MapServer/identify"; const params = new URLSearchParams({ f: "json", geometry: `${x},${y}`, geometryType: "esriGeometryPoint", sr: "4326", layers: "all:4", tolerance: "5", mapExtent: extent .map((coord) => ol.proj.transform([coord], projection, "EPSG:4326")[0]) .join(","), imageDisplay: `${size[0]},${size[1]},96`, returnGeometry: "false" }); fetch(`${url}?${params}`) .then((response) => response.json()) .then((data) => { if (data.results && data.results.length) { mutable selection = data.results[0].attributes; console.log("Attributes:", data.results[0].attributes); } else { console.log("No features found."); } }); })33:[] 2e:{"title":"Loading ArcGIS Mapserver Layer - Indonesia IUP","cells":[{"id":0,"value":"# Loading ArcGIS Mapserver Layer - Indonesia IUP ","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"map.getTargetElement()","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"---\n### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"mutable selection = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"ol = require(\"openlayers\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}