-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (87 loc) · 3.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web-GIS with geoserver and leaflet</title>
</head>
<style>
#map {
height: 100vh;
width: 100%;
}
</style>
<body>
<div id="map"></div>
</body>
</html>
<!-- leaflet -->
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- path to the file -->
<script src="lib/L.Geoserver.js"></script>
<!-- betterWMS -->
<script src="lib/L.TileLayer.BetterWMS.js"></script>
<script>
var map = L.map('map').setView([28, 84], 6);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
// // wms request
// var wmsLayer = L.Geoserver.wms("http://localhost:8080/geoserver/wms", {
// format: 'image/png',
// transparent: true,
// layers: "new:district",
// // layers:"new:states" //for only one layer
// // CQL_FILTER: "", //to filter data
// attribution: "Nepal wms"
// });
// wmsLayer.addTo(map);
// //wfs request
// var wfsLayer = L.Geoserver.wfs("http://localhost:8080/geoserver/wfs", {
// layers: "new:local_unit",
// style: {
// color: "#00ff00",
// fillOpacity: "0",
// opacity: "0.5",
// },
// onEachFeature: function (feature, layer) {
// console.log(feature);
// layer.bindPopup("this is popuped" + feature.id + layer);
// },
// });
// wfsLayer.addTo(map);
//legend request
var layerLegend = L.Geoserver.legend("http://localhost:8080/geoserver/wms", {
layers: "new:india",
// style: `style file`,
});
layerLegend.addTo(map);
var marker = new L.marker([27.707239, 85.321541]);
marker.addTo(map);
// to get latlng of the point when clicked
// map.on('click', function (e) {
// alert(e.latlng);
// });
//get capabilities request from geoserver
//reference:https://docs.geoserver.org/2.21.x/en/user/services/wms/reference.html
//http://localhost:8080/geoserver/wms?
// service=wms&
// version=1.1.1&
// request=GetCapabilities
//get legend graphic request
// http://localhost:8080/geoserver/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=topp:states
//wms get map request
var wms = 'http://localhost:8080/geoserver/new/wms?service=WMS&version=1.1.0&request=GetMap&layers=new%3Adistrict&bbox=80.05858430104666%2C26.34783707066447%2C88.20166777425237%2C30.46741031601408&width=768&height=388&srs=EPSG%3A4326&styles=&format=application/openlayers';
//betterWms gives the feature information of the point when clicked
var district_layer = L.tileLayer.betterWms("http://localhost:8080/geoserver/wms", {
layers: 'new:district',
format: 'image/png',
transparent: true,
attribution: "© Amit Poudyal"
});
district_layer.addTo(map);
</script>