Scribd
Upload
63 views1 page

Adding The Necessary Script References

The document provides instructions for adding layers to an OpenLayers map. It discusses including necessary script references, such as the OpenLayers library and any third party mapping services being used. It demonstrates how to create a map object and add it to a div of a specified size on the page. Code is shown for adding layers like a VirtualEarth base layer and WMS layers from external sources. Some notes explain details like specifying tile sizes to prevent excessive tile requests. The summary concludes with code to center the map on Boston and add a layer switcher control.

Uploaded by

srini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views1 page

Adding The Necessary Script References

The document provides instructions for adding layers to an OpenLayers map. It discusses including necessary script references, such as the OpenLayers library and any third party mapping services being used. It demonstrates how to create a map object and add it to a div of a specified size on the page. Code is shown for adding layers like a VirtualEarth base layer and WMS layers from external sources. Some notes explain details like specifying tile sizes to prevent excessive tile requests. The summary concludes with code to center the map on Boston and add a layer switcher control.

Uploaded by

srini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Using OpenLayers: Part 1

Page 1 of 1

Adding the necessary script references


First for any 3rd party mapping services you will be using, you need to include the libraries in addition to the OpenLayers library file and these
should be included before your OpenLayers include. The code to do that is on line 11 and 12 of the htm file and look like this.
1:
12:

<script src='http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js'></script>
<script src="ol22/OpenLayers.js"></script>

Alternatively, you can use the latest release OpenLayers.js directly from the OpenLayers site by replace line 12 with
12:

<script src="http://openlayers.org/api/OpenLayers.js"></script>

Creating the Open Layers map Object and adding layers


Next we create a blank div with id=map that has the dimensions we want and position that where we want on the page. Our map will
live there.
16:

<div id="map" style="width: 400px; height: 400px"></div>

Next we write the javascript code to create the map and load into our div and add the layers
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:

var map = new OpenLayers.Map(document.getElementById("map"));


var dndwmsurl = "http://dndmaps.cityofboston.gov/mapserv/scripts/mapserv410/mapserv410.exe?map=\\mapserv\\dndwms\\dndbasepg.map&
map.addLayer(new OpenLayers.Layer.VirtualEarth("VE"));
/**Note we don't have to specify an SRS, Service or Request for WMS layers below.
OpenLayer will ask for projection based on base our base layer, EPSG:4326, Service: WMS, Request: GetMap.
We chose image/gif because IE6 and below doesn't natively support transparency for png without a hack. **/
wmstaxi = new OpenLayers.Layer.WMS("MASSGIS Boston Taxi Stops", "http://giswebservices.massgis.state.ma.us/geoserver/wms",
{layers: "massgis:GISDATA.WATERTAXISTOPS_PT", transparent: "true", format: "image/gif"},
{tileSize: new OpenLayers.Size(400,400), buffer: 1 })
map.addLayer(wmstaxi)
var wmsbos = new OpenLayers.Layer.WMS("Boston Neigborhoods and Mainstreets",dndwmsurl,
{layers: "neighborhoods,mainstreets", transparent:"true",format: "image/gif"},
{tileSize: new OpenLayers.Size(400,400), buffer: 1 });
map.addLayer(wmsbos);

A couple of notes about the above code that may not be entirely obvious

In the UMN MapServer WMS we have extra slashes for the map file because our map location has \. E.g its \\dndwms instead of just \. This is to escape out the \. Future versions of Open
Layers will do this automatically.

For the WMS layers we specified a tileSize and buffer. This is to prevent Open Layers from slicing up the tiles on the server too granulary - otherwise it will ask for a lot more tiles per call. The
layers we are overlaying are fairly light so don't need many calls.

Centering the map and adding the layer switcher


The layer switcher is the little + sign on the right side that shows you the layers active and allows you to deactivate a layer or
reactivate a layer.
37:
38:
39:

var boston = new OpenLayers.LonLat(-71.0891380310059,42.3123226165771);


map.setCenter(boston, 10);
map.addControl(new OpenLayers.Control.LayerSwitcher());

http://www.bostongis.com/?content_name=openlayers_tut_01

6/29/2013

You might also like