Skip to content

Instantly share code, notes, and snippets.

@hepplerj

hepplerj/README.md

Last active March 20, 2017 02:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hepplerj/4e7b050bddd018ea168145eee65da9ed to your computer and use it in GitHub Desktop.
Save hepplerj/4e7b050bddd018ea168145eee65da9ed to your computer and use it in GitHub Desktop.
Download ZIP
Using WMS in maps
Raw
README.md

Using WMS in web maps.

Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
<style>
#map {
height: 500px;
width: 1000px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<script>
// Create a Leaflet map and center it
var map = L.map('map').setView([37.3382, -121.8863], 10);
// Add an CARTO basemap
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
// Add WMS layer - railways
L.tileLayer.wms('https://geowebservices.stanford.edu/geoserver/wms', {
// specify layers
layers: 'druid:cf342kq2270',
// specify the format & transparency
format: 'image/png',
transparent: true
}).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment