1. OpenLayers Prof. Wenwen Li School of Geographical Sciences and Urban Planning 5644 Coor Hall wenwen@asu.edu

2. Outline 1. Overview & Installation 2. Basic Terms 3. Getting Started 4. Layers 5. Controls 6. Styling 7. Deploying 8. Conclusion

3. Overview & Installation Create a Workspace OpenLayers is an open source JavaScript library for displaying map data in web browsers*. Google's Closure Tools and Closure Library based Public API Custom Builds Renderers and Browser Support

4. Overview & Installation http://openlayers.org/download/

5. Basic Terms Map Core component of OpenLayers 3 Function: ol.Map Render: a target container Configuration: View Configures the level of zoom, projection, and so on Function: ol.View Sub-functions: projection, zoom, … Source Accesses the remote data Function: ol.source.Source

6. Basic Terms Layer Provides visual representation for the data derived from source. Three types of layer: ol.layer.Tile ol.layer.Image ol.layer.Vector An example combining all concepts*: * http://openlayers.org/en/v3.5.0/doc/tutorials/concepts.htmlhttp://openlayers.org/en/v3.5.0/doc/tutorials/concepts.html

7. Getting Started Crafting HTML You can put a map in almost any HTML element on your page. OpenLayers Example Creating the Map Viewer Creating a map Creating a layer var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://mapindex.***/wms/mapindex", {'layers':'basic'} ); map.addLayer(wms);

8. Getting Started Adding WMS var dm_wms = new OpenLayers.Layer.WMS( “*** Data", "http://www.***", { layers: “layer1, layer2, layer3, …", transparent: "true", format: "image/png" }, {isBaseLayer: false} ); map.addLayer(dm_wms); Adding a Vector Marker var vectorLayer = new OpenLayers.Layer.Vector("Overlay"); var feature = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(**, **), {some:'data'}, {externalGraphic: 'img/marker.png', graphicHeight: **, graphicWidth: **}); vectorLayer.addFeatures(feature); map.addLayer(vectorLayer);

9. Layers http://dev.openlayers.org/apidocs/files/OpenLayers/Layer-js.html Base & Non-base Layer Rater Layer Google Image KaMap TMS (Tile Map Service) VirtualEarth WMS TileCache …

10. Layers Overlay Layer Boxes GML GeoRSS Markers Text Vector WFS …

11. Controls Panels Puts all controls together. Styling panels: by CSS Panels for Controls: OpenLayers.Control.TYPE_TOOL (the default) OpenLayers.Control.TYPE_BUTTON OpenLayers.Control.TYPE_TOGGLEVector Customizing panels: setting the ultilization of controls used in a panel

12. Controls Map Controls NavToolbar: Navigation NavigationHistory OverviewMap PanPanel PanZoom PanZoomBar Permalink Scale: ScaleLine SelectFeature Snapping Split ZoomBox ZoomPanel

13. Overlays Vector Overlays Tool: OpenLayers.Feature.Vectors Point / MultiPoint Line / MultiLine Polygon / MultiPolygon Interaction: SelectFeatureControl Layer Types: Vector (Base Class) GML PointTrack WFS

14. Overlays Marker Overlays Tool: OpenLayers.Icon class Interaction Layer Types: Markers GeoRSS Text Boxes

15. Overlays Transitioning from Text Layer or GeoRSS Layer to Vectors Loading Data: GML Layer Vector Layer Styling Data: Tool: OpenLayers.StyleMap Displaying Popups: define the functions for popup define the event handlers

16. Styling Loading Data: GML Layer Vector Layer Styling Data: Tool: OpenLayers.StyleMap Displaying Popups: define the functions for popup define the event handlers

17. Styling Style Classes A symbolizer hash for specific feature layer.style layer.styleMap Attribute Replacement Syntax StyleMap OpenLayers.Style OpenLayers.StyleMap Styling objects Rule Based Styling addUniqueValueRules Custom rules: sets a value (string) is greater than, or euqals to, or less than another one.

18. Styling Style properties: fillColor: Default is #ee9900. This is the color used for polygons, and the center of marks for points. fillOpacity: Default is 0.4. This is the opacity used for polygons, and the center of marks for points. strokeColor: Default is #ee9900. This is the color used for polylines, and outline to the feature. strokeOpacity: Default is 1. This is the opacity used for polylines, and outline to the feature. strokeWidth: Default is 1 This is the width for polylines, and outline to the feature.

19. Styling Style properties: strokeLinecap: Default is round. Options are butt, round, square. strokeDashstyle: Default is solid. Options are: dot, dash, dashdot, longdash, longdashdot, and solid pointRadius: Default is 6. pointerEvents: Default is visiblePainted. Only used by the SVG Renderer. Cursor: Default is an empty string, this is used when mouse is over the feature. externalGraphic graphicWidth, graphicHeight: define the height and width of an externalGraphic.

20. Styling Style properties: graphicOpacity graphicXOffset, graphicYOffset: defines the ‘center’ of an externalGraphic. rotation graphicName display

21. Deploying Single File Build Directory: img/panning-hand-off.png theme/default/style.css lib/OpenLayers.js lib/OpenLayers/Map.js... Command: cd openlayers/build./build.py

22. Deploying Custom Build Profiles full: fully builds all files. lite: integrates another application. Deploying Files OpenLayers.js: the library to offer JavaScript code. theme directory: provides CSS and image files for newer controls img directory: provides images to be used for some controls

23. Deploying Minimizing Build Size Control Images: should be compressed with png compression tools. CSS: csstidy is a library which removes whitespace from CSS stylesheets. Javascript: closure: requires a closure-compiler.jar in directory. closure_ws: uses the closure compiler webservice, and only works for Javascript files which are under 1MB. jsmin: the default compiler based on the Python-based jsmin script. minimize: a simple whitespace removing Python script. none: uncompressed.

24. Conclusion Overview & Installation Basic Terms Getting Started Layers Controls Styling Deploying