UserRecipes

Lots of examples of using OpenLayers in different ways

WMS

• GetFeatureInfo - get information about a feature
• DebugTileServer - serve tiles containing debug information
• SimpleAjax - A Simple AJAX example using OpenLayers.loadURL

Examples files:

The example files can all be seen at: http://openlayers.org/dev/examples/

These are examples of OpenLayers functionality. Through these files, you can probably figure out almost all of what OpenLayers can do at the surface level: there are over 90 examples here, and they demonstrate many of the layers, controls, etc. It is usually best to start with an example, and work your way forward from there. If you have never used OpenLayers before: Start Here!

The examples were improved since this wiki page was first created. The examples themselves now include descriptions. This page is more or less just providing the list of examples again in a different order.

Basic

• xhtml.html - shows openlayers runnig in a XHTML 1.0 Strict Doctype.
• baseLayers.html - shows the use base layers from multiple commercial map image providers.
• doubleSetCenter.html - demonstrate the behavior of two calls to set the center after instatiating the layer object.
• fullScreen.html - demonstrate a map that fill the entire browser window.
• layer-opacity.html - demonstrate a change in the opacity for an overlay layer.
• lite.html - a very simple layout with minimal controls. This example uses a single WMS base layer.
• image-layer.html - demonstrate a single non-tiled image as a selectable base layer.
• zoomLevels.html - shows the use of the resolutions layer option on a number of layer types.
• getfeatureinfo.html - demonstrates sending a GetFeatureInfo query to an OWS.

Control

• accessible.html - use the KeyboardDefaults option parameter for panning and zooming types.
• http://openlayers.org/dev/examples/animated_panning.html - shows animated panning effects in the map
• controls.html - attach zooming, panning, layer switcher, overview map, and permalink map controls to an OpenLayers window.
• custom-control-point.html - demonstrate the addition of a point reporting control to the OpenLayers window.
• custom-control.html - demonstrate the addition of a draggable rectangle to the OpenLayers window.
• editingtoolbar-outside.html - EditingToolbar Outside Viewport.
• example.html - demonstrate a simple map with an overlay that includes layer switching controls.
• layerswitcher.html - demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
• mouse-position.html - the MousePosition Control to displays the coordinates of the cursor inside or outside the map div.
• navtoolbar-outsidemap.html - show how to the place navigation toolbar outside the map.
• navtoolbar.html - demo the NavToolbar, a subclass of Control.Panel which shows icons for navigation.
• overviewmap.html - enable a small Overview Map that moves/interacts with your main map.
• panel.html - create a custom control.panel, styled entirely with CSS, and add your own controls to it.
• popups.html - all kinds of ways to create and interact with Popups.
• custom-style.html - demonstrate changing CSS styles on controls in the OpenLayers window.

Event

• click.html - shows the use of the register and getLonLatFromViewPortPx functions to trigger events on mouse click.
• select-feature-openpopup.html - using a Control.SelectFeature, open a popup on click.
• select-feature.html - select a feature on hover or click with the Control.SelectFeature on a vector layer.
• events.html - demonstrating various styles of event handling in OpenLayers.

Editing

• drag-feature.html - demonstrates point, line and polygon creation and editing.
• draw-feature.html - demonstrates on-screen digitizing tools for point, line, and polygon creation.
• modify-feature.html - a demonstration of the ModifyFeature control for editing vector features.
• editingtoolbar.html - demonstrate polygon, polyline and point creation and editing tools.
• rotate-features.html - details on how to create and rotate vector features programmatically
• regular-polygons.html - shows how to use the RegularPolygon handler to draw features with different numbers of sides.
• resize-features.html - use the geometry resize methods to change feature sizes programatically.

Raster provider

WMS

• wms.html - shows the basic use of openlayers using a WMS layer.
• wms-untiled.html - shows an example of the Untiled wms layer, which requests a single image for the entire map view.
• wmst.html - shows the use of the layer WMS-T (time) layer.

MapServer

• mapserver.html - a MapServer Layer with a gutter parameter which is used to try to limit the edge effects between tiles.
• mapserver_untiled.html - shows single tile MapServer Layer.

Commercial provider

• google.html - demonstrate a Google basemap used with boundary and marker overlay layers.
• yahoo.html - shows how to add a Yahoo layer and LayerSwitcher control
• worldwind.html - shows the use of the Tiled WorldWind layers.
• urban.html - demonstrate the use of a NASA WorldWind base layer.
• ve.html - demonstrates the use of a Virtual Earth base layer.
• mm.html - an example of using the Layer.MultiMap class.
• multimap-mercator.html - the multimap layer does not fully support the sphericalMercator projection at this time.

Tiling

• tilecache.html - demonstrates a TileCache layer that loads tiles from from a web accessible disk-based cache only.
• multiserver.html - load your tiles faster by pointing to the same server, but with different urls.
• notile.html - create an untiled WMS layer using the singleTile: true, option or the deprecated WMS.Untiled layer.
• buffer.html - shows the use of the buffer layer option for any layer that inherits from OpenLayers.Layer.Grid.
• gutter.html - demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
• tms.html - demonstrate the initialization and modification of a Tiled Map Service layer.

Vector provider

• vector-features.html - shows drawing simple vector features, in different styles.
• vector-formats.html - shows the wide variety of vector formats that open layers supports.

WFS

• wfs-scribble.html - shows how you can draw features and save to GeoServer.
• wfs-states.html - shows the use of the WFS United States (GeoServer).
• wfs-t.html - shows the use of the WFS layer type.
• openmnnd.html - shows rendering a WFS service using OpenLayer vectors in the browser.
• wfs.html - take in XML data from a WFS class and display it any way you like.

GML

• gml-layer.html - loads locally stored GML vector data on a basemap.
• gml-serialize.html - demonstrate the serialization of features drawn in the OpenLayers window.

files:

• xml/features.xml - GML file.
• gml/multipoint.xml - GML file.
• gml/multipolygon.xml - GML file.
• gml/owls.xml - GML file.
• gml/point.xml - GML file.
• gml/polygon.xml - GML file.

KML

• kml-layer.html - demonstrates loading and displaying a KML file on top of a basemap.
• kml/lines.kml - KML file.

WKT

•  wkt.html (dev sandbox) - shows the use of WKT (Well known text) to draw features in openlayers.

GeoRSS

• georss-markers.html - demonstrate loading a GeoRSS feed using the GeoRSS parser.
• georss-serialize.html - demonstrate serialization of features in a Vector layer to GeoRSS.
• georss.html - display a couple of locally cached georss feeds on an a basemap.

files:

• georss.xml - GeoRSS file.
• yelp-georss.xml - GeoRSS file.

Marker

• markerResize.html - dynamically resize a marker.
• markers.html - show markers layer with different markers.
• markersTextLayer.html - reads a Tab seperated values file and displays it as markers on the map.
• outOfRangeMarkers.html - displays marker if it's in the range.
• boxes.html - demonstrate marker and box type annotations on a map.

files:

• outOfRangeMarkers.txt - tsv (tab separated value) file.
• textfile.txt - tsv (tab separated value) file.

Style

• sld.html - parsing SLD and applying styles to a vector layer.
• http://openlayers.org/dev/examples/styles-context.html - shows how to create a feature styles.
• http://openlayers.org/dev/examples/styles-rotation.html - vector point feature symbolizers can have a rotation property. The center of the rotation is the point of the image specified by graphicXOffset and graphicYOffset.
• [http://openlayers.org/dev/examples/styles-unique.html) - hows how to create a style based on unique feature attribute values (markers) and feature state values (circles).

Parser

• GMLParser.html - reads data from a GML file and parses out the coordinates.
• KMLParser.html - reads data from a KML file and parses out the coordinates.
• xml.html - shows the use of the OpenLayers XML format class.

Other

• debug.html - demonstrate console calls to a Firebug console. Requires Firefox. Mostly for developers.
• wrapDateLine.html - shows how to work around dateline issues, by wrapping the dateline on a number of layer types.
• projected-map.html - use different (not default) projections with your map.

• attribution.html - shows the use of the attribution layer option on a number of layer types.
• kamap.html - demonstrate a tiled kamap layer as the base map, which can be pre-cached for higher performance.
• kamap.txt - php file for generating tiles from KaMaps.
• layerLoadMonitoring.html - demonstrate a method for monitoring tile loading performance.
• mvs.html - TODO.
• restricted-extent.html - don't let users drag outside the map extent.
• setextent.html - use a boxes layer to visually display the area of interest indicated by a user.
• spherical-mercator.html - shows the use of the Spherical Mercator Layers.
•  LineAnimator.html - Shows 3 different ways to animate a polyline for simulating flow in a pipeline.
• GreatCircleAlgorithms - How to calculate great circle distance, bearings and waypoints.
• EmbedInTikiWiki - How to embed in a TikiWiki page.