Copyright 2011: GeoSpatial Training Services, LLC

Introduction to OpenLayers Programming

1

Module Outline

• Intro to OpenLayers

• Maps

• Events

• Layers

• Controls

• Formats, Protocols, Strategy

• Styling

• Requesting Remote Data

• Application Deployment

2

INTRODUCTION TO OPENLAYERS

3

Getting Started

• OpenLayers: “Free Maps for the Web”

– OpenLayers is a free JavaScript intended for displaying dynamic maps on a web

page. It can display background maps and overlay information from any source. It is

completely free.

– It´s been released on a BSD-style. license (known as Clear BSD). This means

redistribution and use in source and binary forms, with or without modification, are

permitted.

• Developer‟s view:

– OpenLayers is a JavaScript library, with no server-side dependencies.

– Implements a still-developing API for building rich web-based geographic

applications.

– Implements OGC (OpenGIS Consortium) WMS (Web Map Service) & WFS (Web

Feature Service).

– Written in Object Oriented Javascript, using components from Prototype.js and the

Rico library.

4

Getting Started

• OpenLayers Framework:

– The Framework is intended to separate the map tools from the map data.

– Interoperability, Flexibility.

• Using the API:

– Including in your applications the live API;

• http://www.openlayers.org/api/OpenLayers.js

– Download it, and put it on your server;

• http://openlayers.org/download/

• Documentation:

– Wiki: http://trac.osgeo.org/openlayers/wiki/Documentation

– Documentation: http://docs.openlayers.org/

– Samples: http://openlayers.org/dev/examples/

– API Docs: http://openlayers.org/dev/examples/

– Developer Docs: http://dev.openlayers.org/docs/files/OpenLayers-js.html

5

What is OpenLayers?

6

OpenLayers

WMS

Google

Bing

ESRI

OpenStreetMap

WFS

Referencing the API

• Can download the API or reference hosted version

7

Referencing the API

• Map is a “Layer” container. Stores information about projection, extent,

units.

• Layer is a data source.

• Referencing OpenLayers from HTML page

8

http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html

• OpenLayers Classes: the library provides functions (OpenLayers.Map)

to be used with the 'new' keyword that returns Objects. Those objects

implements all the properties of the function's prototype (documented in

the API Documentation). Implements Constants, Properties, Functions

and a Constructor.

• The 'options' argument: Most OpenLayers object constructors take an

options object as one of their arguments. In general, you can set the

value of any API property in a constructor‟s options argument.

OpenLayers Syntax

WORKING WITH THE MAP CLASS

10

• Create a new Map instance through a constructor

• Notice that we pass in an argument to the Map constructor

• This argument references a <div> tag in the HTML code

• Serves as a container for the map

Creating a Map

Map Class

• Map class drives everything in your application

– Adding layers, adding controls, panning, zooming

• Create a basic map by referencing an HTML

element

– Map placed inside HTML element

• Can also add options (properties)

– Set of key:value pairs

12

Map Class Properties

• Properties can be

– Passed into the constructor for the Map on creation

– Accessed through dot notation after the Map is created

13

Common Map Properties

• Many properties are best set through the options parameter

of a constructor

• Commonly used properties

– allOverlays – no basemap used

– controls – array of controls to display

– displayProjection – used by controls that display coordinates

– layers – array of Layer objects associated with the map

– minExtent and maxExtent –sets the min and max extent of the map

– restrictedExtent – restricts the bounds the user can navigate in

based on the center point of the map

– numZoomLevels – specifies the amount of zoom levels available

• Full list of properties

http://dev.openlayers.org/releases/OpenLayers-

2.8/doc/apidocs/files/OpenLayers/Map-js.html 14

Map Functions

• Map class can perform various functions

• Control functions

– Add and remove controls

• Map.addControl(), Map.removeControl()

• Zoom, Pan, Extent functions

– Map.getExtent, Map.getMaxExtent

– Map.pan, Map.moveTo, Map.panTo

– Map.getCenter

– Map.zoom, Map.zoomTo

• Layer functions

– Map.addLayer, Map.addLayers, Map.removeLayer,

Map.getNumLayers

15

Exercise

• Please complete the following exercise:

Steps for Creating a Basic Map

16

WORKING WITH BASEMAP AND

OVERLAY LAYERS

17

Map Layers

• A map without layers is

meaningless

• Layers add information

to the map

18

Types of Layers

19

Base Layer

WMS

ESRI

Google

Bing

Overlay Layer

Vector

Raster

Data Layer Information

• Datasources in OpenLayers.

1. Base Layers:

• Only one can be enabled at a time.

• The currently active Base Layer determines the available projection (CRS) and

zoom levels for the map.

• Determined by isBaseLayer property.

• Always display below overlay layers.

2. Overlay Layers:

• Can be enabled many at a time.

• Can be enabled depending on the scale (min & max scale/resolution

parameters).

• Some types support reprojection to the base layer CRS at layer load time.

• Display above base layers.

– Vector Layers

– Raster Layers:

• Imagery Layers20

Creating a Layer

• Layers reference a data source

• WMS for example

• Constructor takes 4 arguments

• Layer Name (in yellow)

• URL of WMS server (in green)

• Parameters (in blue)

• Options (in lavender)

• Use Map.addLayer to add the layer to the Map container

Layer Params

• Server side settings that affect the map image

• Set of key:value pairs

– layers:‟census_tracts‟

– transparent:true

• Present in most Layer classes

• Parameters vary depending upon layer type

22

Layer Options

• Specifies layer object settings

• Properties for client side layer object

• Not a required parameter

• Client side settings so server doesn‟t know about

them

• Properties include „isBaseLayer‟, „opacity‟,

„visibility‟, „displayInLayerSwitcher‟, „minScale‟

23

• Complete sample:

Complete Code Example

Base Layers

• WMS Layers

• ESRI Layers

• Google v2/v3 Layers

• OpenStreetMap

• Bing Layers/Virtual Earth Layers

• Yahoo Layers

WMS Layers

• WMS:

– OpenLayers.Layer.WMS

Used to display data from OGC Web Mapping Services.

26

ESRI Layers

• ESRI:

– OpenLayers.Layer.ArcGIS93Rest

– Creates a new ArcGIS Server layer.

– Accesses the ArcGIS Server 9.3 REST Services.

– Is compatible with ArcGIS Server 9.3, 9.3.1 and 10 REST Services.

– OpenLayers.Layer. ArcIMS

Creates a new ArcIMS layer.

27

• Google v2:

• Layer class designed to be used only as base layer.

• It is projected in web mercator or spherical mercator.

Google Layers v2

Google Layers v3

• Google API v3

– OpenLayers.Layer.Google.

29

Exercise

• Please complete the following exercise:

Creating a Google Maps API Basemap with

OpenLayers

30

OpenStreetMap

• Free base map of the world

driven by user contributed

content

• Very easy to create an

instance of OpenStreetMap

31

Bing Layers

• Bing:

– OpenLayers.Layer.Bing

Creates a new Bing layer. Accessed through

the Bing Maps REST Services.

• key{String} Bing Maps API key for your application. Get one at

http://bingmapsportal.com/.

• type{String} The layer identifier. Any non-birdseye

imageryType from http://msdn.microsoft.com/en-

us/library/ff701716.aspx can be used.

• Any other documented layer properties can be provided in the

config object. Aerial, AerialWithLabels, Road.

32

Virtual Earth Layers

– OpenLayers.Layer.VirtualEarth

Creates a new Bing layer. Accessing by the Bing Maps AJAX Control.

Requires a restrictedExtent property on the map.

var map = new OpenLayers.Map( 'map', { // other map options restrictedExtent : OpenLayers.Bounds(-20037508, -20037508, 20037508,

20037508)} );

var veLayer = new OpenLayers.Layer.VirtualEarth ( "Virtual Earth Layer"

);

map.addLayer( veLayer );

33

Yahoo Layers

• Yahoo:

– OpenLayers.Layer.Yahoo

Creates a new Yahoo base layer.

34

Spherical Mercator Projection

• What is the Spherical Mercator Projection?

Is the projection used by Google Maps, Bing Maps and other commercial API‟s.

This particular projection defines the earth as a sphere, returns coordinates in meters.

Its official code is EPSG:3785, also has an unofficial EPSG:900913.

EPSG is European Petroleum Survey Group, is a standard on projections and CRS

(Coordinate Reference systems).

35

Spherical Mercator Projection

• Working with projected coordinates.

In order to display your data over an Spherical Mercator base layer, you will need to

reproject it.

Points

Geometries

Vector Data

36

Overlay Layers

• Overlay Layers

– Marker Layers

– Vector Layers

• Raster Layers

37

Overlay Layers

• Overlay layers are vector data. Divided in two

different subclasses; Markers (backward

compatibility, only points) and Vector (polygon, line

and point layers) Layers.

– Markers• Boxes

• GeoRSS

• Text

– Vector• GML

• WFS

• PointTrack

38

Marker Overlays

• Marker Overlays.

– Only display point geometries.

– Styled only using Openlayers.Icon class.

– Interaction: registering events on the individual marker event property.

– Implemented on Markers, GeoRSS, Text, Boxes Layers.

var marker = new OpenLayers.Marker(lonlat);marker.id = "1";marker.events.register("mousedown", marker, function() {

alert(this.id);});

39

Markers Class

• Markers:

Simple layer, only supports points. Used for backwards compatibility.

– OpenLayers.Layer.Markers

Creates a new Markers Layer.

40

Vector Layers

• Very powerful feature of OpenLayers

• Draw points, lines, polygons on the map

– Style them

• Display KML and GeoRSS files

• Vector layers use

– Protocols (Http)

– Formats (KML)

– Strategies (Clustering)

• Quality of display does not degrade when you

zoom in41

Vector Layer Functionality

• Display any type of shape

– Points, lines, polygons, squares

• Calculate distance between geometries

• Export the features to various geodata formats

• Select features

• Attach attribute information to features

42

Vector Layers are Client Side

• Data for Vector layers reside on the client side

• Display very quickly

• No trips to the server to retrieve data

• Can degrade performance if too many features

– Generally don‟t want more than a couple hundred

features

43

Creating a Basic Vector Layer

• Use OpenLayers.Layer.Vector class

44

Rendering Vector Layers

• Vector layers rendered in 3 ways

1. SVG (Scalable Vector Graphics)

• Default

• <svg> tag

• Not supported by Internet Explorer

2. Canvas

• Slightly slower than SVG

• Vector converted to a raster with canvas tag

• Not supported by Internet Explorer

3. VML

• Fallback for Internet Explorer

45

Rendering Vector Layers

• Use „renderers‟ property to define how a Layer is

rendered

– Array containing the names of the renderers

– Should be ordered based on how a browser should

attempt to render the Layer

– Default order below

46

Vector Class

• Vector class uses Feature and Geometry classes

– Uses Feature class to show objects on the layer

– Feature class needs a Geometry class to create the

shape of the feature

47

Geometry FeatureVector Layer

Vector Layer Properties

• Common Vector layer properties

– features

– filter

– isBaseLayer

– protocol

– renderers

– selectedFeatures

– strategies

– style

48

Vector Layer Methods

• Commonly used methods

– clone()

– getDataExtent()

– refresh()

– assignRenderer()

– displayError()

• Feature specific methods

49

Creating Features for a Vector Layer

50

1• Create Geometry

2

• Create Feature

• Uses Geometry

3• Add Feature to Layer

Exercise

• Please complete the following exercise

Adding a GeoRSS Layer with OpenLayers

51

Geometry Class

• Foundation for Features

• Store geographic information about features

• Subclasses

– Point

– Collection

– MultiPoint

– Curve

– LineString

– MultiLineString

– LinearRing

– Polygon

– MultiPolygon

52

Creating Geometries

• Points

• Lines

• Polygons

53

The Feature Class

• Features define the visible geometries in a Vector

layer

• Composed of

– Geometry objects

– Attributes

• Subclass

– Feature.Vector

• Style property for symbolizing the feature

54

Feature Methods

• Methods

– destroy()

– clone()

– getVisibility()

– move(location)

– onScreen(boundOnly)

55

Adding Features to a Vector Layer

• Use Layer.Vector.addFeatures(features, options)

– „features‟ parameter is an array of feature objects

– „options‟ parameter is optional

map.layers[i].addFeatures([arrayFeatures]);

56

Other Vector Layer Methods

• removeFeatures(features, options)

• removeAllFeatures(options)

• destroyFeatures(features, options)

• drawFeature(feature, style)

• eraseFeatures(features)

• getFeatureById(featureId)

57

removeFeatures([features], options)

58

Layer

Features

removeAllFeatures(options)

59

Layer

Features

destroyFeatures([features], options)

60

Layer

Features

eraseFeatures([features])

61

Layer

Features

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");var feature = new OpenLayers.Feature.Vector(

new OpenLayers.Geometry.Point(-71, 42),{some:'data'},{externalGraphic: 'img/marker.png', graphicHeight: 21, graphicWidth: 16});

vectorLayer.addFeatures(feature);map.addLayer(vectorLayer);

• Overlay Layer: we can add more data on top of the map, overlaying the

background layer.

• Overlay layer, vector layer:

Adding Multiple Layers

GML Layers

• GML:

The GML layer is a vector layer subclass designed to read data from a file once and

display it. It is ideal for working with many formats, not just GML, and can be

configured to read other formats via the „format‟ option on the layer.

OpenLayers.Layer.GML

To be removed in 3.0. Instead use OpenLayers.Layer.Vector with Protocol.HTTP and

Strategy.Fixed.

63

WFS Layers

• WFS:

The vector layer is the basis of the advanced geometry support in OpenLayers.

– OpenLayers.Layer.WFS

To be removed in 3.0. Instead use OpenLayers.Layer.Vector with a Protocol.WFS and

one or more Strategies.

64

OPENLAYERS EVENTS

65

Events

• Events are actions that take place within an application

– Map clicks, mouse drags (panning), keyboard actions, component

modification (resizing), network traffic (sending, receiving data), and

others

• OpenLayers connectc an event with a handler

• Event handlers respond to the events

– JavaScript function executes

66

• Mouse click

• Keyboard interaction

Event Occurs

Connects an event to a handler

ListenerRuns in

response to the event

Handler

Map Events

• Number of supported map events

• Some event types return an event object to the listener

• Common events

– addlayer – triggered after a layer is added

– removelayer – triggered after a layer is removed

– changelayer – triggered after a layer‟s properties are changed

– mousemove – triggered when mouse is moved inside the map

– mouseover – triggered when mouse first enters map div

– move – triggered on any drag, pan, or zoom of the map

– changebaselayer – triggered after the base layer changes

67

Event Object

• Provides information about the event that occurred

• Have different properties depending upon the event that

occurred

• All have „object‟ and „element‟ properties which refers to the

map object and HTML element map is located in

• Some event objects have more information

• Properties of event accessed by

– Event.property

– Example: event.layer.name

68

Registering Map Events

• Map events registered in constructor

– Map.eventListeners property

• Map events can also be registered after creation

– Map.events.register(type, obj, listener)

69

The Listener Function

• The listener function executes when an event is

triggered

70

Exercise

• Please complete the following exercise

Handling Events in OpenLayers

71

FORMAT, PROTOCOL, AND

STRATEGY

72

Format, Protocol, Strategy

• Provides additional functionality for Vector Layers

– Loading of data from other sources

• KML, GeoJSON, WFS services

– Save features to geodata file formats

• KML and others

– Perform clustering of points

73

Protocol Class

• Control communication between Vector layer and

data sources

• Subclasses

– Protocol.HTTP

• Allows communication between layer and source of vector

data

– KML files for example

– Protocol.WFS

• Allows communication between layer and WFS service

74

Format Class

• Formats in OpenLayers.Formats are classes that parse different sources of data into

OpenLayers features

Mainly defined on reading an XML or String and converting them to

OpenLayers.Feature.Vector Objects.

Formats are a way of transforming data from a server to objects that

OpenLayers can interact with.

– XML.

– KML.

– Well Known Text.

– GeoRSS.

– GML.

– Atom.

– More…75

KML Format

• OpenLayers.Format.Is the base class for reading/writing a variety of formats.

All the subclasses are expected to have read and write methods.

• KML

76

Strategy Class

• Controls

– How requests are made to the server

– What to do with returned data

• Subclasses

– Strategy.BBOX

• Used to filter returned data by extent

– Strategy.CLUSTER

• Clusters returned data

• Can use multiple strategies at same

time

77

Combining Protocol, Format and Strategy

• Communication

• To and From Server

Protocol

• Data type

• KML, GeoRSS, etc

Format• Request

• Response

Strategy

78

Combining Protocol, Format and Strategy

79

STYLING

80

Styling

The Styling framework is the way to control the way the vector layers are

symbolized in OpenLayers.

• Style Classes: when a feature is added to a map, its style information

can come from;

– A symbolizer hash set directly on the feature.

– A symbolizer hash attached to a layer as layer.style.

– A Style or StyleMap object attached to the layer as layer.styleMap.

A symbolizer hash is a javascript object with key/value pairs describing the values to be

used.

{'strokeWidth': 5,'strokeColor': '#ff0000'

}

81

Styling

A StyleMap allows the use of advanced feature-based styling.

– Uses the OpenLayers.Style and OpenLayers.StyleMap objects.

– Implements three different render intents:

• „default‟

• „select‟ when a feature is selected.

• „temporary‟ while sketching a feature.

OpenLayers Style objects are descriptions of the way features should be rendered.

– The most common way of accessing attributes of the feature when creating a style is

through the attribute replacement syntax. This can be done using variables.

– For example, if you had a GeoJSON file where each feature had a thumbnail property

describing an image to use, you might use something like

82

Style Map

• StyleMap.

Instantiates passing a symbolizer hash to the constructor, the style can be passed to a

StyleMap constructor.

Or

Or

83

Style Map

• The StyleMap object should be passed as the layer‟s „styleMap‟ option.

• Adding unique value rules

• To use this class, first create a StyleMap. Then create a mapping between the feature

attribute value and symbolizer value. Then add rules to the symbolizer that check for the

attribute (size) and apply the symbolizer for that value.

84

Styling

• Style Properties: default in ().

– fillColor: (#ee9900) the color used for filling in Polygons, center of marks for points,

interior color of circles and other shapes.

– fillOpacity: (0.4) is the opacity used for filling with fillColor.

– strokeColor: (#ee9900) the color of the lines on features. On polygons and point

marks is the outline. On lines is the representation of the feature.

– strokeOpacity: (1) opacity of the lines on features.

– strokeWith: (1) with of the line on the features.

– strokeLinecap: (round) determines how the end of the lines are. Options are round,

butt, square.

– strokeDashstyle: (solid) defines the style of dahs lines. Options are dot, dash,

dashdot, longdash, longdashdot, solid.

– pointRadius: (6) defines the size of the points.

– pointerEvents: (visiblePainted) used for SVG Renderer.

– cursor: () used when the mouse s over a feature.

– Rotation: rotation angle in degrees clockwise for a point symbolizer.

– graphicName: name of a type of symbol to be used for a point mark.

– display: can be set to „none‟ to hide features from rendering. 85

Styling

– externalGraphic: an external image to represent a point.

– graphicWidth, graphicHeight: define the height and width of an externalGraphic. This

is an alternative to the pointRadius symbolizer property to be used when your graphic

has different sizes in the X and Y direction.

– graphicOpacity: opacity of an external graphic.

– graphicXOffset, graphicYOffset: where the „center‟ of an externalGraphic should be.

86

MAP CONTROLS

87

Controls

• Controls in OpenLayers.

Controls are OpenLayers classes which affect the state of the map, or display additional

information to the user. Controls are the primary interface for map interactions.

– Panels.

– Map Controls.

– Button Classes.

– Generic Base Classes.

88

Control Panel

• Panels.

– Openlayers.Control.Panel

The panel control is a container for other controls.

They are styled by css. See the NavToolbar Panel example below:

89

Default Controls

• Several controls added to map by default

– Navigation

– PanZoom

– ArgParser

– Attribution

90

Map Controls

• Map Controls.

– ArgParser

– Attribution

– DragFeature

– DragPan

– DrawFeature

– EditingToolbar

– KeyboardDefaults

– LayerSwitcher

– Measure

– ModifyFeature

– MousePosition

– NavToolbar

– Navigation

– NavigationHistory

– OverviewMap

– PanPanel

– PanZoom

– PanZoomBar

– Permalink

– Scale

– ScaleLine

– SelectFeature

– Snapping

– Split

– ZoomBox

– ZoomPanel

91

Map ControlsArgParser

• ArgParser.

– Takes URL arguments, and updates the map.

– The control is enabled by default.

– On a page load/refresh the map will take the href string and parse it for lon, lat, zoom

and layer information.

In order for the ArgParser control to work, you must check that „getCenter()‟

returns null before centering your map for the first time. Most applications

use a setCenter or zoomToMaxExtent call: this call should be avoided if the

center is already set.92

Map ControlsAttribution

• Attribution.

– Displays attribution properties on any layer in the map, in the lower right corner by

default.

93

Map ControlsDrawFeature, DragFeature, DragPan

• DragFeature.

– Moves a feature with a drag of the mouse.

– Need a feature to be present on the map.

• DrawFeature.

– Draws point, line or polygon features on a vector layer when active.

• DragPan.

– Pans the map with a drag of the mouse.

94

Map ControlsEditing Toolbar

• EditingToolbar.

– Panel of 4 controls to draw polygons, lines, points or to navigate panning.

95

Exercise

• Please complete the following exercise

Adding Features to a Vector Layer with

EditingToolbar

96

Map ControlsKeyboardDefaults

• KeyboardDefaults.

– Adds panning and zooming functions, controlled by the keyboard.

– By default: arrow keys pan, +/- zoom, and Page up/down/home/end scroll.

97

Map ControlsLayer Switcher

• Displays a TOC (Table of Contents) for the map.

98

map.addControl(new OpenLayers.Control.LayerSwitcher());

Map ControlsMeasure

• Measure.

– Allows drawing of features for measurements. Return planar measures.

– You can set the "geodesic" property of the control to true to calculate geodesic

measures instead of planar measures.

99

Map ControlsModifyFeature

• ModifyFeature.

– Modify an existing vector object.

– There are several different modes that the ModifyFeature control can work with.

These can be combined to work together.

• RESHAPE – The default. Allows changing the vertices of a feature by dragging

existing vertices, creating new vertices by dragging „virtual vertices‟, or deleting

vertices by hovering over a vertice and pressing the delete key.

• RESIZE – Allows changing the size of a geometry.

• ROTATE – change the orientation of the geometry

• DRAG – change the position of the geometry.

100

Map ControlsModifyFeature

• Various events are fired on the layer when using this control

– beforefeaturemodified - triggered when a user selects the feature to begin editing.

– featuremodified - triggered when a user changes something about the feature.

– afterfeaturemodified - triggered after the user unselects the feature.

• To register for one of these events, register the event on the layer

101

Map ControlsMousePosition

• MousePosition.

– Displays geographic coordinates of the mouse pointer, as it moves on the map.

new OpenLayers.Control.MousePosition()

102

Map ControlsNavToolbar

• NavToolbar.

– Alternative to the Navigation control.Shows icons for navigation.

103

Map ControlsNavigation

• Navigation

– Handles map browsing with mouse events like drawing, double click and wheel

scrolling.

– It is added to the map by default if no control array is sent in the options of the map.

• NavigationHistory

– Is an array that stores the behaviors that the navigation control makes

– Creates 2 dependent controls, previous and next, that can be called using the trigger

method on the controls.

104

Map ControlsOverviewMap

• Overview Map.

– Creates a second map, in order to let the user view the extent of the main map on this

second one, providing a geographic context to the main map.

105

Map ControlsPanPanel

• PanPanel.

– Is the visible control to pan North, South, East or West in small steps.

– Can be customized styling via css.

– It is added by default to the map.

map = new OpenLayers.Map("map", {controls: [

new OpenLayers.Control.PanPanel()]

});

106

Map ControlsPanZoom

• PanZoom.

– Is a Visible control composed of PanPanel and ZoomPanel.

map = new OpenLayers.Map("map", {controls: [

new OpenLayers.Control.PanZoom()]

});

107

Map ControlsPanZoomBar

• PanZoomBar.

– Is a Visible control composed by PanPanel and ZoomBar. Presents a Pan control and

a zoom slider composed by the levels of zoom of the map.

map = new OpenLayers.Map('map', {controls: [new OpenLayers.Control.Navigation(),

new OpenLayers.Control.PanZoomBar()], numZoomLevels: 10 });

108

Map ControlsPermalink

• Permalink.

– Is an hyperlink that returns the user to the current map view.

– Is updated when re map is zoomed, panned and layer switched.

– Creates an hyperlink to the page of the map, adding a string like this to the url:

“?zoom=4&lat=-9.66797&lon=154.16016&layers=B0F”

new OpenLayers.Control.Permalink()

109

Map ControlsScale

• Scale.

– Displays the current map scale as a ratio.

new OpenLayers.Control.Scale()

• ScaleLine.

– Displays a small line indicator representing the current map scale.

new OpenLayers.Control.ScaleLine()

110

Map ControlsSelectFeature

• Select Feature.

– Selects vector features from a given layer on click or hover.

111

Map ControlsSnapping

• Snapping.

– Acts as a snapping agent while editing vector features.

– Snap features from one layer to features within the same layer, non default

configuration.

112

Map ControlsSplit

• Split.

– Acts as a split feature agent while editing vector features.

113

Map ControlsZoomPanel

• ZoomPanel.

– Is a compact collection of ZoomIn, ZoomOut and ZoomToMaxExtent.

new OpenLayers.Control.ZoomPanel()

114

Map ControlsButtons and Base Classes

• Button Classes.

– Classes without user interface on their own. Designed to be used inside a control

panel.

– Pan: (PanPanel). Causes the map to pan in a specific direction.

– ZoomIn: (PanPanel). Causes the map to zoom in.

– ZoomOut: (PanPanel). Causes the map to zoom out.

– ZoomToMaxExtent: (PanPanel). Causes the map to zoom to the maximum extent of

the map.

• Generic Base Classes:

– Button: to be used inside Panel Controls.

– Panel: used as base for Toolbars.

115

Exercise

• Please complete the following exercise

Using OpenLayers Map Controls

116

USING REMOTE DATA

117

Requesting Remote Data

• OpenLayers.Request

– Namespace that contains convenience methods for working with XMLHttpRequest

This methods work with a cross-browser W3C compliant class.

– Is used to make asynchronous or synchronous request of data.

– Implements GET, POST, PUT, DELETE, HEAD and OPTIONS methods.

GET Example

118

Requesting Remote Data

POST

PUT, DELETE, HEAD and OPTIONS

119

APPLICATION DEPLOYMENT

120

Application Deployment

• In order to deploy your application you will want:

– Small file size to speed loading time

• OpenLayers has a Single File deploy

– Used for production environments

– JavaScript code compiled in single file called OpenLayers.js

• Compressed with jsmin compression library.

• This Openlayers.js file must be generated by Python, executing the build.py file

from OpenLayers distribution.

• Can also deploy a Custom Build Profile.

– Add only the libraries needed for your code.

– Less size and less time to start the application.

121

Application Deployment

• Deploying Files.

– OpenLayers.js: The library deploying the JavaScript code for your application.

– Theme folder: contains css and image files for newer controls whose styling and

position is controlled by css.

– Img folder: for controls which do not use css.

• Minimizing Build Size.

– Minimizing the size of all downloads (whitespace removal for example).

– Deliver compressed data to clients which support it.

– Compressing data:

– Control images in compressed PNG.

– CSS with no whitespaces.

– Javascript compression.

122