diff --git a/examples/overviewmap-custom.html b/examples/overviewmap-custom.html new file mode 100644 index 0000000000..d00be1357d --- /dev/null +++ b/examples/overviewmap-custom.html @@ -0,0 +1,77 @@ + + + + + + + + + + + + ol3 OverviewMap control with advanced customization example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+

OverviewMap control, advanced

+
+ +
+

Example of OverviewMap control with advanced customization.

+
+

See the overviewmap-custom.js source to see how this is done.

+

This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.

+
+
overview, overviewmap
+
+
+ + + + + + + diff --git a/examples/overviewmap-custom.js b/examples/overviewmap-custom.js new file mode 100644 index 0000000000..c9aa0c181d --- /dev/null +++ b/examples/overviewmap-custom.js @@ -0,0 +1,43 @@ +goog.require('ol.Map'); +goog.require('ol.View'); +goog.require('ol.control'); +goog.require('ol.control.OverviewMap'); +goog.require('ol.interaction'); +goog.require('ol.interaction.DragRotateAndZoom'); +goog.require('ol.layer.Tile'); +goog.require('ol.source.OSM'); + + +var overviewMapControl = new ol.control.OverviewMap({ + // see in overviewmap-custom.html to see the custom CSS used + className: 'ol-overviewmap ol-custom-overviewmap', + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM({ + 'url': '//{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png' + }) + }) + ], + collapseLabel: '\u00BB', + label: '\u00AB', + collapsed: false +}); + +var map = new ol.Map({ + controls: ol.control.defaults().extend([ + overviewMapControl + ]), + interactions: ol.interaction.defaults().extend([ + new ol.interaction.DragRotateAndZoom() + ]), + layers: [ + new ol.layer.Tile({ + source: new ol.source.OSM() + }) + ], + target: 'map', + view: new ol.View({ + center: [500000, 6000000], + zoom: 7 + }) +});