Skip to content

Instantly share code, notes, and snippets.

@fidelthomet

fidelthomet/index.html

Last active February 16, 2016 10:33
Show Gist options
  • Save fidelthomet/c3609d2941f4c95a2885 to your computer and use it in GitHub Desktop.
Save fidelthomet/c3609d2941f4c95a2885 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<style type="text/css">
#map { height: 400px; }
</style>
</head>
<body>
<div id="map"></div>
<button>toggle maps</button>
</body>
<script type="text/javascript">
var map = L.map('map').setView([47.3697569594515, 8.609590530395506], 13);
var ortho = L.tileLayer.wms("http://wms.zh.ch/OrthoZHWMS?SERVICE=WMS&Request=GetCapabilities", {
layers: 'orthophotos',
format: 'image/png',
transparent: true,
attribution: "Imagery by <a href='http://www.are.zh.ch/'>Amt für Raumentwicklung</a>"
})
var fcir = L.tileLayer.wms("http://wms.zh.ch/OrthoZHWMS?SERVICE=WMS&Request=GetCapabilities", {
layers: 'ortho_fcir',
format: 'image/png',
transparent: true,
attribution: "Imagery by <a href='http://www.are.zh.ch/'>Amt für Raumentwicklung</a>"
})
map.addLayer(ortho);
document.querySelectorAll('button')[0].addEventListener("click", function(){
if(map.hasLayer(ortho)){
map.removeLayer(ortho)
map.addLayer(fcir)
} else {
map.removeLayer(fcir)
map.addLayer(ortho)
}
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment