Skip to content

Instantly share code, notes, and snippets.

@DavidHickman

DavidHickman/index.html

Last active October 24, 2017 05:02
Show Gist options
  • Save DavidHickman/aa054c133fc7671003495f5063067782 to your computer and use it in GitHub Desktop.
Save DavidHickman/aa054c133fc7671003495f5063067782 to your computer and use it in GitHub Desktop.
Download ZIP
Leaflet Geoserver example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Geoserver layer in Leaflet Example</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico"/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
</head>
<body>
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
$(document).ready(function () {
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var wmsLayer = L.tileLayer.wms("http://localhost:8080/geoserver/gis_forum/wms", {
layers: 'gis_forum:beach_access',
format: 'image/png',
transparent: true
}).addTo(mymap);
var geojsonLayer = new L.GeoJSON();
function handleJson(data) {
console.log(data)
geojsonLayer.addData(data);
}
$.ajax({
url: 'http://localhost:8080/geoserver/gis_forum/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=gis_forum%3Abeach_access&maxFeatures=50&outputFormat=application%2Fjson&format_options=callback:handleJson',
dataType: 'jsonp',
jsonpCallback: 'getJson'
});
mymap.addLayer(geojsonLayer);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment