Introduction to OpenLayers Programming
Introduction to OpenLayers Programming
Copyright 2011: GeoSpatial Training Services, LLC
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?
WMS
WFS
Google
OpenLayers
OpenStreetMap
Bing
ESRI
6
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
OpenLayers Syntax •
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. http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html
• 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.
WORKING WITH THE MAP CLASS
10
Creating a Map • Create a new Map instance through a constructor
• Notice that we pass in an argument to the Map constructor
• This argument references a tag in the HTML code • Serves as a container for the 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/OpenLayers2.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 Base Layer
Overlay Layer
WMS
Vector
ESRI
Raster
Google
Bing
19
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 Layers
20
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 Code Example • Complete sample:
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 Layers v2 •
Google v2: • Layer class designed to be used only as base layer. • It is projected in web mercator or spherical mercator.
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/enus/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 41 zoom in
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
Geometry
Feature
Vector Layer
47
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 1
2 3
• Create Geometry • Create Feature • Uses Geometry
• Add Feature to Layer
50
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)
Features
Layer
58
removeAllFeatures(options)
Features
Layer
59
destroyFeatures([features], options)
Features
Layer
60
eraseFeatures([features])
Features
Layer
61
Adding Multiple Layers •
Overlay Layer: we can add more data on top of the map, overlaying the background layer.
•
Overlay layer, vector layer: 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);
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
Event Occurs
• Mouse click • Keyboard interaction
Listener
Connects an event to a handler
Handler
Runs in response to the event
66
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
Format • Data type • KML, GeoRSS, etc
• 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. 85 – display: can be set to „none‟ to hide features from rendering.
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 Controls ArgParser •
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 Controls Attribution •
Attribution. – Displays attribution properties on any layer in the map, in the lower right corner by default.
93
Map Controls DrawFeature, DragFeature, DragPan •
DrawFeature. – Draws point, line or polygon features on a vector layer when active.
•
DragFeature. – Moves a feature with a drag of the mouse. – Need a feature to be present on the map.
•
DragPan. – Pans the map with a drag of the mouse. 94
Map Controls Editing 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 Controls KeyboardDefaults •
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 Controls Layer Switcher •
Displays a TOC (Table of Contents) for the map. map.addControl(new OpenLayers.Control.LayerSwitcher());
98
Map Controls Measure •
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 Controls ModifyFeature •
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 Controls ModifyFeature •
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 Controls MousePosition •
MousePosition. – Displays geographic coordinates of the mouse pointer, as it moves on the map. new OpenLayers.Control.MousePosition()
102
Map Controls NavToolbar •
NavToolbar. – Alternative to the Navigation control.Shows icons for navigation.
103
Map Controls Navigation •
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 Controls OverviewMap •
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 Controls PanPanel •
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 Controls PanZoom •
PanZoom. – Is a Visible control composed of PanPanel and ZoomPanel. map = new OpenLayers.Map("map", { controls: [ new OpenLayers.Control.PanZoom() ] });
107
Map Controls PanZoomBar •
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 Controls Permalink •
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 Controls Scale •
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 Controls SelectFeature •
Select Feature. – Selects vector features from a given layer on click or hover.
111
Map Controls Snapping •
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 Controls Split •
Split. – Acts as a split feature agent while editing vector features.
113
Map Controls ZoomPanel •
ZoomPanel. – Is a compact collection of ZoomIn, ZoomOut and ZoomToMaxExtent. new OpenLayers.Control.ZoomPanel()
114
Map Controls Buttons 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
Copyright 2011: GeoSpatial Training Services, LLC
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?
WMS
WFS
OpenLayers
OpenStreetMap
Bing
ESRI
6
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
OpenLayers Syntax •
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. http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html
• 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.
WORKING WITH THE MAP CLASS
10
Creating a Map • Create a new Map instance through a constructor
• Notice that we pass in an argument to the Map constructor
• This argument references a tag in the HTML code • Serves as a container for the 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/OpenLayers2.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 Base Layer
Overlay Layer
WMS
Vector
ESRI
Raster
Bing
19
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 Layers
20
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 Code Example • Complete sample:
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 Layers v2 •
Google v2: • Layer class designed to be used only as base layer. • It is projected in web mercator or spherical mercator.
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/enus/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 41 zoom in
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
Geometry
Feature
Vector Layer
47
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 1
2 3
• Create Geometry • Create Feature • Uses Geometry
• Add Feature to Layer
50
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)
Features
Layer
58
removeAllFeatures(options)
Features
Layer
59
destroyFeatures([features], options)
Features
Layer
60
eraseFeatures([features])
Features
Layer
61
Adding Multiple Layers •
Overlay Layer: we can add more data on top of the map, overlaying the background layer.
•
Overlay layer, vector layer: 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);
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
Event Occurs
• Mouse click • Keyboard interaction
Listener
Connects an event to a handler
Handler
Runs in response to the event
66
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
Format • Data type • KML, GeoRSS, etc
• 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. 85 – display: can be set to „none‟ to hide features from rendering.
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 Controls ArgParser •
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 Controls Attribution •
Attribution. – Displays attribution properties on any layer in the map, in the lower right corner by default.
93
Map Controls DrawFeature, DragFeature, DragPan •
DrawFeature. – Draws point, line or polygon features on a vector layer when active.
•
DragFeature. – Moves a feature with a drag of the mouse. – Need a feature to be present on the map.
•
DragPan. – Pans the map with a drag of the mouse. 94
Map Controls Editing 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 Controls KeyboardDefaults •
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 Controls Layer Switcher •
Displays a TOC (Table of Contents) for the map. map.addControl(new OpenLayers.Control.LayerSwitcher());
98
Map Controls Measure •
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 Controls ModifyFeature •
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 Controls ModifyFeature •
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 Controls MousePosition •
MousePosition. – Displays geographic coordinates of the mouse pointer, as it moves on the map. new OpenLayers.Control.MousePosition()
102
Map Controls NavToolbar •
NavToolbar. – Alternative to the Navigation control.Shows icons for navigation.
103
Map Controls Navigation •
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 Controls OverviewMap •
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 Controls PanPanel •
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 Controls PanZoom •
PanZoom. – Is a Visible control composed of PanPanel and ZoomPanel. map = new OpenLayers.Map("map", { controls: [ new OpenLayers.Control.PanZoom() ] });
107
Map Controls PanZoomBar •
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 Controls Permalink •
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 Controls Scale •
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 Controls SelectFeature •
Select Feature. – Selects vector features from a given layer on click or hover.
111
Map Controls Snapping •
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 Controls Split •
Split. – Acts as a split feature agent while editing vector features.
113
Map Controls ZoomPanel •
ZoomPanel. – Is a compact collection of ZoomIn, ZoomOut and ZoomToMaxExtent. new OpenLayers.Control.ZoomPanel()
114
Map Controls Buttons 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
