There might be situations where you do not want your map ends at -180 or +180 longitude degrees as you are working in that area and need a continuous map. For example, imagine a map where on the left you can see the end of Russia and at the right Alaska, as shown in the following screenshot:
This property is a common attribute from base class OpenLayers.Layer and is called the wrapDateLine.
To wrap the date line options, perform the following steps:
- Create an HTML file and add the OpenLayers dependency.
- In the beginning, we have put a checkbox to activate/deactivate the wrap data line feature, as follows:
Wrap date line: <input dojoType="dijit.form.CheckBox" checked onChange="wrapDateLine" /> <br/>
Note
Do not worry about the
dojoType="dijit.form.CheckBox"attribute, it is because the Dojo Toolkit (http://dojotoolkit.org) is used in the sample.Think of it as a normal HTML input element.
- Next, we have added the
DOMelement used to render the map, as follows:<div id="ch2_wrapdataline" style="width: 100%; height: 100%;"></div>
- Within a
scriptelement, create the map instance, as follows:<script type="text/javascript"> // Create the map using the specified DOM element var map = new OpenLayers.Map("ch2_wrapdataline"); - Now, create a WMS layer specifying the
wrapDateLineproperty, as follows:// Add a WMS layer var wms = new OpenLayers.Layer.WMS("OpenLayers WMS Basic", "http://labs.metacarta.com/wms/vmap0", { layers: 'basic' }, { wrapDateLine: true }); map.addLayer(wms); // Center map view map.setCenter(new OpenLayers.LonLat(-110,0), 2); - Finally, implement the function that will change the
wrapDateLineproperty value, as follows:function wrapDateLine(checked) { wms.wrapDateLine = checked; wms.redraw(); } </script>
All the magic of this recipe is in the wrapDateLine property in the OpenLayers.Layer class. You need to set it to true to wrap and create a continuous layer on their longitudinal axes.
In addition, we have created a function that reacts to changes in the checkbox to activate/deactivate the wrapDateLine property, as in the following code:
function wrapDateLine(checked) {
wms.wrapDateLine = checked;
wms.redraw();
}Note that after changing the property value we need to redraw the layer so that it takes effect. This is done using the redraw() method inherited from the OpenLayers.Layer base class.
The wrapDateLine property is not a property of the map but a property of every layer; so if you want the whole map to have the same behavior, you need to set it to true in all layers.