Skip to content

Instantly share code, notes, and snippets.

@oliverheilig
Created December 28, 2013 16:18
Show Gist options
  • Save oliverheilig/8161136 to your computer and use it in GitHub Desktop.
Save oliverheilig/8161136 to your computer and use it in GitHub Desktop.
#map {
position: absolute;
left: 0px;
right: 0px;
top: 00px;
bottom: 0px;
}
#range {
top: 00px;
left: 0px;
right: 0px;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="xMap swipe demo" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>xMap swipe demo/title>
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css">
<script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script type='text/javascript' src="http://oliverheilig.github.io/Leaflet.NonTiledLayer/NonTiledLayer.js"></script>
<script type='text/javascript' src="http://oliverheilig.github.io/Leaflet.NonTiledLayer/NonTiledLayer.WMS.js"></script>
<script type='text/javascript' src="http://oliverheilig.github.io/Leaflet.NonTiledLayer/leaflet-x.js"></script>
</head>
<body>
<div id="map"></div>
<input id="range" type="range" min="0" max="1.0" step="any" />
</body>
</html>
var wmsUrl = "http://80.146.239.180/WMS";
var map = new L.Map('map');
// add nokia layer
var nokia = L.tileLayer('http://{s}.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?app_id=&token=', {
subdomains: '1234'
}).addTo(map);
// add the xServer layers
var background = X.backgroundLayer(wmsUrl, "HERE").addTo(map);
var labels = X.labelLayer(wmsUrl, "HERE").addTo(map);
// set up range splitter
var range = document.getElementById('range');
function clip() {
var nw = map.containerPointToLayerPoint([0, 0]),
se = map.containerPointToLayerPoint(map.getSize()),
clipX = nw.x + (se.x - nw.x) * range.value;
background.getContainer().style.clip = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
map._panes.overlayPane.style.clip = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
}
range['oninput' in range ? 'oninput' : 'onchange'] = clip;
map.on('move', clip);
// go to luxemburg
map.setView(new L.LatLng(49.611389, 6.130833), 13);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment