2d:null 2e:["$","title",null,{"children":"Loading ArcGIS Mapserver Layer - Indonesia IUP | Dany Laksono | Observable"}] 33: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..

` }`34: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; }35: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."); } }); })36:[] 31:{"id":"5df74245640e49d6","slug":"indonesia-iup","title":"Loading ArcGIS Mapserver Layer - Indonesia IUP","thumbnail":"41c074ccfc2cb64b0056d0aa3686ad760d29421f177d5062a1e0aa1f375f4129","access_level":"public","create_time":"$D2025-06-07T17:39:37.638Z","update_time":"$D2025-06-08T07:22:48.715Z","view_time":null,"first_public_time":"$D2025-06-08T07:15:23.015Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"56ae77b65752301c","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":"starter_2024"},"version":75,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bff00548b500be1","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":null}],"members":[{"type":"individual","id":"2bff00548b500be1","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":null,"role":"editor"},{"type":"team","id":"56ae77b65752301c","login":"danylaksono","name":"Dany Laksono","avatar_url":"https://avatars-next.observableusercontent.com/151e6b82114dee2de7c5f8520c765e5dab42f220fd1dc9588d67d3fb50d35c80","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Loading ArcGIS Mapserver Layer - Indonesia IUP","cells":[{"id":0,"value":"# Loading ArcGIS Mapserver Layer - Indonesia IUP ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"map.getTargetElement()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"---\n### Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"mutable selection = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"ol = require(\"openlayers\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"