Skip to content

Instantly share code, notes, and snippets.

@iamtekson

iamtekson/GeoserverWFSFull.html

Created November 1, 2019 12:02
Show Gist options
  • Save iamtekson/ab0be74d90ba0c750f2cb03d075a50cf to your computer and use it in GitHub Desktop.
Save iamtekson/ab0be74d90ba0c750f2cb03d075a50cf to your computer and use it in GitHub Desktop.
Download ZIP
This is the full reference of the WFS request in leaflet
Raw
GeoserverWFSFull.html
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<style>
#map {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
</body>
</html>
<script>
var map = L.map("map").setView([38.45, 70.6], 6);
var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//Geoserver Web Feature Service
$.ajax('http://localhost:8080/geoserver/wfs',{
type: 'GET',
data: {
service: 'WFS',
version: '1.1.0',
request: 'GetFeature',
typename: 'workspace:layer_name',
CQL_FILTER: "column='demo'",
srsname: 'EPSG:4326',
outputFormat: 'text/javascript',
},
dataType: 'jsonp',
jsonpCallback:'callback:handleJson',
jsonp:'format_options'
});
//Geojson style file
var myStyle = {
'color': 'red'
}
// the ajax callback function
function handleJson(data) {
selectedArea = L.geoJson(data, {
style: myStyle,
onEachFeature: function(feature, layer) {
layer.bindPopup(`Name: ${feature.properties.name_of_your_property}`)
}
}).addTo(map);
map.fitBounds(selectedArea.getBounds());
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment