Scribd
Upload
19 views1 page

Simple Geoportal

This document contains code for creating an OpenLayers map with base layers and a WMS layer. It loads base layers from OpenStreetMap and a GeoServer instance. PHP code is used to get layer information from a JSON API and add a WMS layer from a URL and layer name. The map view is fitted to the extent of all layers.

Uploaded by

T. Sanyoki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views1 page

Simple Geoportal

This document contains code for creating an OpenLayers map with base layers and a WMS layer. It loads base layers from OpenStreetMap and a GeoServer instance. PHP code is used to get layer information from a JSON API and add a WMS layer from a URL and layer name. The map view is fitted to the extent of all layers.

Uploaded by

T. Sanyoki
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Geoportal Kalsel - Integration SDI by Sekretariat Simpul Jaringan Daerah Provinsi Kalimantan Selatan">
<meta name="author" content="Geoportal SDI">
<title>Geoportal Kalsel - SDI</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- OL Library Map Service -->
<link rel="stylesheet" href="js/ol.css" type="text/css">
</head>
<body>
<div id="map" style="width:100%; height:600px;"></div>
<div></div>
<?php
$url = 'http://geoservice.kalselprov.go.id/rest/API/MapService';
$konten = file_get_contents($url);
$data = json_decode($konten, true);
$idxM = 10; // contoh index peta
?>
<!-- OL https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png -->
<!-- OL Library Map Service -->
<script src="js/ol.js"></script>
<script>
var attribution = new ol.control.Attribution({
collapsible: false
});
var map = new ol.Map({
controls: ol.control.defaults({ attribution: false }).extend([attribution]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM({
url: 'https://tile.openstreetmap.be/osmbe/{z}/{x}/{y}.png',
attributions: [ol.source.OSM.ATTRIBUTION, '<a href="http://geoportal.kalselprov.go.id">GEOPORTAL KALSEL</a>'],
})
}) ,
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://palapa.big.go.id:8080/geoserver/gwc/service/wms',
params: {LAYERS: 'basemap_rbi:basemap', VERSION: '1.1.1'}
})
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([115.35247, -2.64673]),
zoom:9
})
});

var wms_source = new ol.source.TileWMS({


url: '<?php echo $data["layers"][$idxM]['url'] ?>',
params: {
'LAYERS': '<?php echo $data["layers"][$idxM]['layer'] ?>'
}
});

// contoh
// var wms_source = new ol.source.TileWMS({
// url: ' http://geoportal.kalselprov.go.id:8080/geoserver/GeoDB/wms?',
// params: {
// 'LAYERS': ' indonesia_COVID19_01_04_2020'
// }
// });

var wms_layer = new ol.layer.Tile({


source: wms_source
});
map.addLayer(wms_layer);

var extent = ol.extent.createEmpty();


projecten.getLayers().forEach(function(layer) {
ol.extent.extend(extent, layer.getSource().getExtent());
});
map.getView().fitExtent(extent, map.getSize());

</script>
</body>
</html>

You might also like