Skip to content

Instantly share code, notes, and snippets.

@walkermatt

walkermatt/map.html

Created September 16, 2016 17:47
Show Gist options
  • Save walkermatt/da844b231d45574d45071f3525f68e4a to your computer and use it in GitHub Desktop.
Save walkermatt/da844b231d45574d45071f3525f68e4a to your computer and use it in GitHub Desktop.
Download ZIP
OpenLayers 3 LayerSwitcher and Popup together
Raw
map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OpenLayers 3 - LayerSwitcher &amp; Popup</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.css" />
<link rel="stylesheet" href="https://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.css" />
<link rel="stylesheet" href="https://rawgit.com/walkermatt/ol3-layerswitcher/master/examples/layerswitcher.css" />
<link rel="stylesheet" href="https://rawgit.com/walkermatt/ol3-popup/master/src/ol3-popup.css" />
</head>
<body>
<div id="map"></div>
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.17.1/ol.js"></script>
<script src="https://rawgit.com/walkermatt/ol3-layerswitcher/master/src/ol3-layerswitcher.js"></script>
<script src="https://rawgit.com/walkermatt/ol3-popup/master/src/ol3-popup.js"></script>
<script src="map.js"></script>
</body>
</html>
Raw
map.js
(function() {
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Group({
'title': 'Base maps',
layers: [
new ol.layer.Tile({
title: 'Water color',
type: 'base',
visible: false,
source: new ol.source.Stamen({
layer: 'watercolor'
})
}),
new ol.layer.Tile({
title: 'OSM',
type: 'base',
visible: true,
source: new ol.source.OSM()
}),
new ol.layer.Group({
title: 'Satellite and labels',
type: 'base',
combine: true,
visible: false,
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
// Get your own key at https://www.bingmapsportal.com/
key: 'Ahd_32h3fT3C7xFHrqhpKzoixGJGHvOlcvXWy6k2RRYARRsrfu7KDctzDT2ei9xB',
imagerySet: 'Aerial'
})
}),
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'terrain-labels'
})
})
]
})
]
}),
new ol.layer.Group({
title: 'Overlays',
layers: [
new ol.layer.Tile({
title: 'Countries',
source: new ol.source.TileWMS({
url: 'http://demo.opengeo.org/geoserver/wms',
params: {'LAYERS': 'ne:ne_10m_admin_1_states_provinces_lines_shp'},
serverType: 'geoserver'
})
})
]
})
],
view: new ol.View({
center: ol.proj.transform([-0.92, 52.96], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
// LayerSwitcher
var layerSwitcher = new ol.control.LayerSwitcher({
tipLabel: 'Légende' // Optional label for button
});
map.addControl(layerSwitcher);
// Popup
var popup = new ol.Overlay.Popup();
map.addOverlay(popup);
map.on('singleclick', function(evt) {
var prettyCoord = ol.coordinate.toStringHDMS(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'), 2);
popup.show(evt.coordinate, '<div><h2>Coordinates</h2><p>' + prettyCoord + '</p></div>');
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment