leaflet-geoserver-request
Version:
This is the library for wms, wfs, legend, wmsImage request from geoserver to leaflet.
83 lines (72 loc) • 2.37 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
/>
<title>Leaflet geoserver request</title>
<style>
html, body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="map">
<h1 class="leaflet-control">Leaflet-geoserver-request Plugin</h1>
</div>
<a href="https://github.com/iamtekson/l.geoserver"
><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a></a>
<!-- <div class="wmsimage" style="float: right;">
<h2>Wms Image</h2>
<img src="" alt="this is image" srcset="" id="wmsImage" />
</div> -->
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="../src/L.Geoserver.js"></script>
<script>
var map = L.map("map", {zoomControl: false}).setView([38.561303, 68.767846], 10);
var osmLayer = L.tileLayer(
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
{
maxZoom: 19,
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}
).addTo(map);
//wms
var wms = L.Geoserver.wms("https://riskinfo.tj/geoserver/wms", {
layers: `tajikistan:EAR_Builtup`,
});
wms.addTo(map);
//wfs
var wfs = L.Geoserver.wfs("https://riskinfo.tj/geoserver/wfs", {
layers: `tajikistan:jamoat`,
style: {
color: "red",
fillOpacity: 0,
opacity: 1,
stockWidth: 0.5,
},
onEachFeature: function (f, l) {
l.bindPopup('<pre>'+JSON.stringify(f.properties,null,' ').replace(/[\{\}"]/g,'')+'</pre>');
},
CQL_FILTER: `name_rg=='Sughd'`,
});
wfs.addTo(map)
//legend
var legend = L.Geoserver.legend("https://riskinfo.tj/geoserver/wms", {
layers: `tajikistan:EAR_Builtup`,
});
legend.addTo(map);
</script>