OpenLayers + Dojo = Simple zoom control
05/02/2012 Leave a Comment
As a quick test of the new OpenLayers and Dojo integration I thought I would take up the challenge of creating a simple zoom control using Dojo widgets. However that proved a little harder than I first thought.
1) You need to remember to add the OpenLayers library as it does not ship with Dojo.
2) You need a container to add the zoom slider too, how about a floating window.
3) Then need to work out the scales and set the slider to the map.
4) But remember the map object is wrapped.
5) As well as having a crazy z-index.
So here is a quick outline of how it was put together.
Create the HTML page
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style>
html, body { width: 100%; height: 100%; margin:0; padding:0; font-family:Sans-serif; font-size:12px; }
</style>
Add the correct script references.
<script src="./OpenLayers-2.11/OpenLayers-2.11/OpenLayers.js" type="text/javascript"></script>
<script src="./dojo-release-1.7.1/dojo-release-1.7.1/dojo/dojo.js" type="text/javascript"></script>
<link rel="stylesheet" href="./OpenLayers-2.11/OpenLayers-2.11/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="./dojo-release-1.7.1/dojo-release-1.7.1/dijit/themes/dijit.css" type="text/css">
<link rel="stylesheet" href="./dojo-release-1.7.1/dojo-release-1.7.1/dijit/themes/tundra/tundra.css" type="text/css">
Also remember to add the stylesheets for the floating layers, otherwise bad things happen.
<link rel="stylesheet" href="./dojo-release-1.7.1/dojo-release-1.7.1/dojox/layout/resources/FloatingPane.css" type="text/css">
<link rel="stylesheet" href="./dojo-release-1.7.1/dojo-release-1.7.1/dojox/layout/resources/ResizeHandle.css" type="text/css">
</head>
The rest of the HTML with the div that acts as the content for the floating layer, containing another div we will convert into a dojo slider.
<body class="tundra">
<div id="navDialog">
<div style="width:100px; margin:auto; margin-top:5px;margin-bottom:5px;" align="center">
<div id="verticalSlider" data-dojo-type="dijit.form.VerticalSlider"
value="6" minimum="0" maximum="10" intermediateChanges="true" showButtons="false" style="height:200px;" name="verticalSlider">
<div data-dojo-type="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px"></div>
<ol data-dojo-type="dijit.form.VerticalRuleLabels" container="rightDecoration" style="font-size:75%;color:gray;width:40px;">
<li>Region</li><li>Area</li><li>Local</li><li>Postal</li><li>Street</li>
</ol>
</div>
</div>
</div>
Also add in the map object, this will be full screen and the styles in the header mean we have no borders.
<div id="map" style="width:100%; height:100%; z-index:10"></div>
Now onto the script
<script type="text/javascript">
require([
"dojo/ready",
"dojo/parser",
"dojo/domReady",
"dojo/dom-construct",
"dojo/_base/window",
"dojox/geo/openlayers/Map",
"dojox/geo/openlayers/Layer",
"dojox/geo/openlayers/WidgetFeature",
"dojox/layout/FloatingPane",
"dijit/form/Slider"
],
function(ready, win, domConstruct,
Map, Layer, WidgetFeature, Chart, Chart2D, Pie, blue,
FloatingPane, Slider, ComboBox, JsonRestStore, rpcJsonRest){
var map;
ready(function(){
navDialog = new dojox.layout.FloatingPane({
title: "Zoom",
resizable: false,
closable: false,
dockable: false,
style: "top:10px; right:10px; opacity:0.9",
id: "navDialog"
}, "navDialog");
navDialog.startup();
navDialog.bringToTop();
Now lets setup the map control, note the over-ride of the z_index so the map sits under the floating layers.
// This is New York
var ny = {latitude : 40.71427, longitude : -74.00597};
// create a map widget and place it on the page.
OpenLayers.Map.prototype.Z_INDEX_BASE.Control = 10;
map = new dojox.geo.openlayers.Map("map");
layer = new dojox.geo.openlayers.Layer();
map.addLayer(layer);
map.fitTo({
position : [ ny.longitude, ny.latitude ],
extent : 0.1
});
This section sets up the slider, and the 2 events one that triggers on a change in the slider value, and the other if the map is zoomed using the mouse roller. Note the wrapped map object “map.getOLMap()”.
var zoomSlider = dijit.byId("verticalSlider");
zoomSlider.maximum = map.getOLMap().getNumZoomLevels()-1;
function updateMapZoom() { map.getOLMap().zoomTo(Math.round(zoomSlider.get("value"))); }
function updateSliderZoom() { zoomSlider.setValue(map.getOLMap().getZoom());}
map.getOLMap().events.register("zoomend", this, updateSliderZoom);
dojo.connect(zoomSlider,"onChange",updateMapZoom);
updateMapZoom();
});
});
</script>
</body>
</html>
