Last active
September 11, 2020 09:55
-
-
Save ThomasG77/8cb1fddc64d4b3d8c6e7d76ad1d20dd4 to your computer and use it in GitHub Desktop.
Modified version of demo http://viglino.github.io/ol-ext/examples/control/map.switcher.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<!-- | |
Copyright (c) 2015 Jean-Marc VIGLINO, | |
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/ | |
--> | |
<title>ol-ext: Layerswitcher</title> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
<meta name="description" content="An OL3 layerswitcher." /> | |
<meta name="keywords" content="ol3, layer, layerswitcher, control,jQuery" /> | |
<!-- jQuery --> | |
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> | |
<!-- Openlayers --> | |
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script> | |
<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" /> | |
<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script> | |
<!-- ol-ext --> | |
<link rel="stylesheet" href="https://viglino.github.io/ol-ext/dist/ol-ext.css" /> | |
<script type="text/javascript" src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script> | |
<link rel="stylesheet" href="https://viglino.github.io/ol-ext/examples/style.css" /> | |
<style> | |
.hideOpacity .layerswitcher-opacity { | |
display:none; | |
} | |
.hideOpacity .ol-layerswitcher .layerup { | |
height: 1.5em; | |
} | |
.showPercent .layerSwitcher .ol-layerswitcher .layerswitcher-opacity-label { | |
display: block; | |
} | |
.ol-header > div { | |
width:100%; | |
} | |
.toggleVisibility { | |
padding-left: 1.6em; | |
cursor: pointer; | |
border-bottom: 2px solid #369; | |
margin-bottom: 0.5em; | |
} | |
.toggleVisibility:before { | |
background-color: #fff; | |
border: 2px solid #369; | |
box-sizing: border-box; | |
content: ""; | |
display: block; | |
height: 1.2em; | |
left: 0.1em; | |
margin: 0; | |
position: absolute; | |
width: 1.2em; | |
} | |
.toggleVisibility.show:before { | |
background: #369; | |
} | |
</style> | |
</head> | |
<body > | |
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a> | |
<a href="../../index.html"> | |
<h1>ol-ext: LayerSwitcher control</h1> | |
</a> | |
<div class="info"> | |
Add a layer switcher inside or outside the map. | |
<ul> | |
<li> | |
The <i>title</i> or <i>name</i> layer's property is used to named the ol.layer in the switcher. | |
</li> | |
<li> | |
It shows use of the <i>displayInLayerSwitcher</i> layer's property to cause it to not display in the LayerSwitcher | |
</li> | |
<li> | |
The <i>baseLayer</i> layer's property manage exclusive visibility on layers (only one base layer is shown at a time). | |
</li> | |
<li> | |
The <i>allwaysOnTop</i> layer's property make a layer to stay on top of others. | |
</li> | |
<li> | |
Layers in an ol.layer.Group are grouped together and can be managed all together (visibility/opacity/ordering). | |
</li> | |
<li> | |
The <i>openInLayerSwitcher</i> property of an ol.layer.Group is used to code the visibility of the sublayers. | |
</li> | |
<li> | |
The <i>show_progress</i> option display a progress bar on tiled layers (only once per map). | |
</li> | |
<li> | |
You can use the <i>setHeader()</i> function to add a header to the layer list. | |
</li> | |
<li> | |
You can use the <i>drawlist</i> event handle the current line display (add button, change list style, etc.) | |
</li> | |
<li> | |
It trigger a <i>toogle</i> event when shown/hidden | |
</li> | |
</ul> | |
<p> | |
<a href="map.switcher2.html">You can customize the LayerSwitcher using CSS</a> | |
</p> | |
</div> | |
<!-- Map div --> | |
<div id="map" style="width:600px; height:400px;"></div> | |
<div class="external layerSwitcher"><b>External layer switcher</b></div> | |
<div class="options"> | |
<h2>Options:</h2> | |
<input id="dils" type="checkbox" checked="checked" onchange="displayInLayerSwitcher(this.checked);"/> | |
<label for="dils">display "Pirate Map" in LayerSwitcher (zoom out to make it visible).</label> | |
<br/> | |
<input id="opb" type="checkbox" onchange="$('body').toggleClass('hideOpacity');" /> | |
<label for="opb">hide opacity bar</label> | |
<br/> | |
<input id="percent" type="checkbox" onchange="$('body').toggleClass('showPercent');" /> | |
<label for="percent">show percent information</label> | |
</div> | |
<script type="text/javascript"> | |
// A group layer for base layers | |
var baseLayers = new ol.layer.Group({ | |
title: 'Base Layers', | |
openInLayerSwitcher: true, | |
layers: [ | |
new ol.layer.Tile({ | |
title: "Watercolor", | |
baseLayer: true, | |
source: new ol.source.Stamen({ layer: 'watercolor' }) | |
}), | |
new ol.layer.Tile({ | |
title: "Toner", | |
baseLayer: true, | |
visible: false, | |
source: new ol.source.Stamen({ layer: 'toner' }) | |
}), | |
new ol.layer.Tile({ | |
title: "OSM", | |
baseLayer: true, | |
source: new ol.source.OSM(), | |
visible: false | |
}) | |
] | |
}); | |
// A layer with minResolution (hidden on hight zoom level) | |
var mapbox = new ol.layer.Tile({ | |
title: "Pirate Map", | |
displayInLayerSwitcher: false, | |
minResolution: 1223, | |
source: new ol.source.XYZ({ | |
attributions: [ | |
'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ', | |
ol.source.OSM.ATTRIBUTION | |
], | |
url: 'https://{a-d}.tiles.mapbox.com/v3/aj.Sketchy2/{z}/{x}/{y}.png' | |
}) | |
}); | |
// An overlay that stay on top | |
var labels = new ol.layer.Tile({ | |
title: "Labels (on top)", | |
allwaysOnTop: true, // Stay on top of layer switcher | |
noSwitcherDelete: true, // Prevent deleting from layer switcher | |
source: new ol.source.Stamen({ layer: 'terrain-labels' }) | |
}); | |
// WMS with bbox | |
var brgm = new ol.layer.Tile ({ | |
"title": "GEOLOGIE", | |
"extent": [ | |
-653182.6969582437, | |
5037463.842847037, | |
1233297.5065495989, | |
6646432.677299531 | |
], | |
"minResolution": 3.527777777777778, | |
"maxResolution": 3527.777777777778, | |
"source": new ol.source.TileWMS({ | |
"url": "https://geoservices.brgm.fr/geologie", | |
"projection": "EPSG:3857", | |
"params": { | |
"LAYERS": "GEOLOGIE", | |
"FORMAT": "image/png", | |
"VERSION": "1.3.0" | |
}, | |
"attributions": [ | |
"<a href='http://www.brgm.fr/'>© Brgm</a>" | |
] | |
}) | |
}); | |
// The Map | |
var map = new ol.Map({ | |
target: 'map', | |
view: new ol.View({ | |
zoom: 11, | |
center: [260497, 6249720] | |
}), | |
layers: [ baseLayers, mapbox, brgm, labels ] | |
}); | |
// Add control inside the map | |
var ctrl = new ol.control.LayerSwitcher({ | |
reordering: false, | |
trash: false | |
}); | |
map.addControl(ctrl); | |
ctrl.on('toggle', function(e) { | |
console.log('Collapse layerswitcher', e.collapsed); | |
}); | |
// Add a layer switcher outside the map | |
var switcher = new ol.control.LayerSwitcher({ | |
target:$(".layerSwitcher").get(0), | |
// displayInLayerSwitcher: function (l) { return false; }, | |
show_progress: true, | |
extent: false, | |
reordering: false, | |
trash: false | |
//oninfo: function (l) { alert(l.get("title")); } | |
}); | |
// Add a button to show/hide the layers | |
var button = $('<div class="toggleVisibility" title="show/hide">') | |
.text("Show/hide all") | |
.click(function() { | |
var a = map.getLayers().getArray(); | |
var b = !a[0].getVisible(); | |
if (b) button.removeClass("show"); | |
else button.addClass("show"); | |
for (var i=0; i<a.length; i++) { | |
a[i].setVisible(b); | |
} | |
}); | |
switcher.setHeader($('<div>').append(button).get(0)) | |
map.addControl(switcher); | |
// Insert mapbox layer in layer switcher | |
function displayInLayerSwitcher(b) { | |
mapbox.set('displayInLayerSwitcher', b); | |
} | |
// Get options values | |
if ($("#opb").prop("checked")) $('body').addClass('hideOpacity'); | |
if ($("#percent").prop("checked")) $('body').addClass('showPercent'); | |
if ($("#dils").prop("checked")) displayInLayerSwitcher(true); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment