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!

TODO: We could put these into a logical order. Simplistic examples first, and then feature-by-feature perhaps.

TODO: Also some description of each of the examples... although the HTML files themselves should really have some description added.

• 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
• accessible.html - use the KeyboardDefaults option parameter for panning and zooming types
• attribution.html - shows the use of the attribution layer option on a number of layer types
• baseLayers.html -
• boxes.html - demonstrate marker and box type annotations on a map.
• buffer.html - shows the use of the buffer layer option for any layer that inherits from OpenLayers.Layer.Grid
• click.html - shows the use of the register and getLonLatFromViewPortPx functions to trigger events on mouse click
• 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
• custom-style.html - demonstrate changing CSS styles on controls in the OpenLayers window.
• debug.html - demonstrate console calls to a Firebug console. Requires Firefox. Mostly for developers
• doubleSetCenter.html - demonstrate the behavior of two calls to set the center after instatiating the layer object.
• 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.
• editingtoolbar-outside.html - EditingToolbar Outside Viewport
• editingtoolbar.html - demonstrate polygon, polyline and point creation and editing tools.
• example.html - demonstrate a simple map with an overlay that includes layer switching controls
• fullScreen.html - demonstrate a map that fill the entire browser window.
• 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.
• georss.xml -
• getfeatureinfo.html - demonstrates sending a GetFeatureInfo query to an OWS
• 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.
• line.xml -
• gml/multipoint.xml -
• gml/multipolygon.xml -
• gml/owls.xml -
• gml/point.xml -
• gml/polygon.xml -
• google.html - demonstrate a Google basemap used with boundary and marker overlay layers.
• gutter.html - demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
• image-layer.html - demonstrate a single non-tiled image as a selectable base layer.
• 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
• kml-layer.html - demonstrates loading and displaying a KML file on top of a basemap.
• kml/lines.kml -
• layer-opacity.html - demonstrate a change in the opacity for an overlay layer.
• layerLoadMonitoring.html - demonstrate a method for monitoring tile loading performance.
• layerswitcher.html - demonstrates the use of the LayerSwitcher outside of the OpenLayers window.
• lite.html - a very simple layout with minimal controls. This example uses a single WMS base layer
• 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
• 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.
• mm.html - an example of using the Layer.MultiMap class.
• modify-feature.html - a demonstration of the ModifyFeature control for editing vector features.
• mouse-position.html - the MousePosition Control to displays the coordinates of the cursor inside or outside the map div.
• multimap-mercator.html - the multimap layer does not fully support the sphericalMercator projection at this time
• multiserver.html - load your tiles faster by pointing to the same server, but with different urls
• mvs.html -
• 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
• notile.html - create an untiled WMS layer using the singleTile: true, option or the deprecated WMS.Untiled layer
• openmnnd.html -
• outOfRangeMarkers.html -
• outOfRangeMarkers.txt -
• 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.
• projected-map.html - use different (not default) projections with your map
• 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.
• restricted-extent.html - don't let users drag outside the map extent
• rotate-features.html - details on how to create and rotate vector features programmatically
• 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.
• 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
• supports-vector.html -
• textfile.txt -
• tilecache.html - demonstrates a TileCache layer that loads tiles from from a web accessible disk-based cache only.
• tms.html - demonstrate the initialization and modification of a Tiled Map Service layer.
• urban.html -
• ve.html - demonstrates the use of a Virtual Earth base layer.
• 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-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.
• wfs.html - take in XML data from a WFS class and display it any way you like.
• wkt.html - shows the use of WKT (Well known text) to draw features in openlayers
• wms-untiled.html - shows an example of the Untiled wms layer, which requests a single image for the entire map view.
• wms.html - shows the basic use of openlayers using a WMS layer
• wmst.html - shows the use of the layer WMS-T (time) layer
• worldwind.html - shows the use of the Tiled WorldWind layers.
• wrapDateLine.html - shows how to work around dateline issues, by wrapping the dateline on a number of layer types.
• xhtml.html - shows openlayers runnig in a XHTML 1.0 Strict Doctype
• xml.html - shows the use of the OpenLayers XML format class
• xml/features.xml -
• yahoo.html - shows how to add a Yahoo layer and LayerSwitcher control
• yelp-georss.xml -
• zoomLevels.html - shows the use of the resolutions layer option on a number of layer types.