Example of various ZoomSlider controls.
This example shows how to add a zoom slider to a map and how to customize it.
<!DOCTYPE html> <html> <head> <title>Zoom slider example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/3.8.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/3.8.1/build/ol.js"></script> <style> /** * The zoomslider in the second map shall be placed between the zoom-in and * zoom-out buttons. */ #map2 .ol-zoom .ol-zoom-out { margin-top: 204px; } #map2 .ol-zoomslider { background-color: transparent; top: 2.3em; } #map2 .ol-touch .ol-zoom .ol-zoom-out { margin-top: 212px; } #map2 .ol-touch .ol-zoomslider { top: 2.75em; } #map2 .ol-zoom-in.ol-has-tooltip:hover [role=tooltip], #map2 .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] { top: 3px; } #map2 .ol-zoom-out.ol-has-tooltip:hover [role=tooltip], #map2 .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] { top: 232px; } /** * The zoomslider in the third map shall be horizontal, placed in the top-right * corner, smaller and orange. */ #map3 .ol-zoomslider { top: 8px; left: auto; right: 8px; background-color: rgba(255,69,0,0.2); width: 200px; height: 15px; padding: 0; box-shadow: 0 0 5px rgb(255,69,0); border-radius: 20px; } #map3 .ol-zoomslider:hover { background-color: rgba(255,69,0,0.3); } #map3 .ol-zoomslider-thumb { height: 15px; width: 15px; margin: 0; filter: none; background-color: rgba(255,69,0,0.6); border-radius: 20px; } #map3 a.ol-zoomslider-handle:hover { background-color: rgba(255,69,0,0.7); } </style> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span4"> <h4>Default style</h4> <div id="map1" class="map"></div> </div> <div class="span4"> <h4>Placed between zoom controls</h4> <div id="map2" class="map"></div> </div> <div class="span4"> <h4>Horizontal and completely re-styled</h4> <div id="map3" class="map"></div> </div> </div> </div> <script> /** * Helper method for map-creation. * * @param {string} divId The id of the div for the map. * @return {ol.Map} The ol.Map instance. */ var createMap = function(divId) { var source, layer, map, zoomslider, resolutions; source = new ol.source.MapQuest({layer: 'sat'}); layer = new ol.layer.Tile({ source: source }); map = new ol.Map({ layers: [layer], target: divId, view: new ol.View({ center: [0, 0], zoom: 2 }) }); zoomslider = new ol.control.ZoomSlider(); map.addControl(zoomslider); return map; }; var map1 = createMap('map1'); var map2 = createMap('map2'); var map3 = createMap('map3'); </script> </body> </html>