OpenLayers Examples (see also more examples)Description
new

Map Projection Viewer 

The application allows to create a map for most projections defined in the PROJ4 epsg file (version 4.8.0).

  • MapServer to deliver reprojected world borders
  • dropdown lists of PROJ4 epsg items orderd by projection
  • proj4js to reproject world vector data
  • Proj4js.defs derived from PROJ4 epsg file
  • length distortion map

  • Object Browser
  • Debug Console

    		•
    1.

    Vector transformation and labels 

    The example shows the use of proj4js and feature labeling with OpenLayers popups.

  • add labels
  • toggle labels
  • delete labels

  • add vector layers from formats strings
  • delete layers

  • projections: EPSG:900913, EPSG:4326, EPSG:31466
    • 2.

    Vector transformation and labels 

    as above, but

    with a modified Layerswitcher control to set the active layer.
    3.

    Switching of the Feature Visibility, unique values 

    Use of style rules (addUniqueValueRules) to switch the visibility of features

  • toggle of feature visibility

  • selecting of a feature with radiobuttons

  • open new window with url from attribute "name" of the selected feature
    • 4.

    Switching of the Feature Visibility, group values 

    Use of style rules (addUniqueValueRules) to switch the visibility of a group of features or of a single feature

  • toggle visibility of a feature group
  • visibility of a single feature

  • toggle display of feature popups
  • choose of three different popups
  • popups for editing of feature attributes

  • feature selection by name
    • 5.

    Switching of the Feature Visibility, group values, with window control 
    Switching of the Feature Visibility, group values, with dragable control 

    as above, but

    with controlling the map from a new window or a dragable window.
    6.

    Switching of the Feature Visibility, group values, wfs layer 

    as 4. example, but

    added a wfs layer with different feature types

  • wfs request for one or more typenames
  • modified Layerswitcher control to set the active layer
  • SelectFeatureControl for active layer
    • 7.

    Distance between two points, Orthodrome and Great Circles 

    Calculation of the distance between two points, the orthodrome and the great circle.

  • calculation of the distance between two points

  • display of the orthodrome between the two points
  • display of the great circles through the two points

  • move the point to new locations
  • input for coordinates of the two points
  • projections: EPSG:900913, EPSG:4326
    • 8.

    Image Layer and KML GroundOverlay 

    Add KML GroundOverlay to map

  • image layer as overlay
  • parsing KML for GroundOverlay and adding as image layer to map

  • support for WMC
  • modified layer switcher
    • 9.

    Georeferencing of images using feature style 'externalGraphic' 

    Use of OpenLayers feature style 'externalGraphic' to georefence images

  • feature style 'externalGraphic' as image overlay

  • control for modifying the image parameters
  • control for dragging the image

  • use of StyleMap context to calculate the new image parameters for the zoomLevel

  • debug console to write wldfile and KML GroundOverlay for the georeferenced image

    The examples shows the use of the feature style 'externalGraphic' for image overlays. StyleMap context is used to calculate the right image position and extent for every zoomLevel. With the use of feature style 'externalGraphic' it is also possible to rotate images.
    • 10.

    intersection of features 

    Testing for intersection of point, line and polygon using the OpenLayers function intersects().

    11.

    shortest distance between a line and a point 

    Calculation of the shortest distance between a line (segment) and a point.

    Source : Minimum Distance between a Point and a Line by Paul Bourke

    12.

    Use SLD and SLD_BODY for styling WMS layers 

  • parameter SLD : use of an external SLD file
  • parameter SLD_BODY : use of url

    Create filter for styling the world layer (no support for IE)

    • see also

    MapServer SLD Demo with SLD Demo files from demo.mapserver.org

    MapServer SLD World with more SLD files

    MapServer WFS Demo and OpenLayers SLD

    13.

    Simple SLD Editor for Vector, WMS 
    and WFS. Use of OpenLayers.Filter 

    The application shows the possibilities of OpenLayers Format.SLD and OpenLayers.Filter (Logical and Comparison) for coloring and labeling vector, wms and wfs layer with SLD. One can create interactive a SLD file and apply it to the selected layer. It can also used as a simple SLD Editor to build a SLD file for own data.

  • same SLD to style Vector and WMS layers
  • feature labels (support for LabelPlacement)
  • one logical filter level
  • two rules and ElseFilter
  • SLD output
  • filter WFS features by their attributes
    • 14.

    Simple Vector Animation and drawing an arc 

    Moving the endpoints of the lines along the circle

  • setTimeout("Thales()",100)
  • use the calculated points on the circle to draw an arc
    • 15.

    Show WMS-C with fixed resolutions at different resolutions 

    The WMS-C tiles services supports only a set of fixed resolutions (i.e: 0.703125/2^zoom, with zoom from 0 to 19).
    In OpenLayers it's possible to show those services at different resolutions by stretching or shrinking the requested tiles.
    On layer level the maxextent is set to the maxextent of the tiles services and the image size of the tiles is set to a new one. The new size is calculated by
    newtileSize = tileSizeService * maxResolutionService / maxResolutionMap.
    The approach works also for TMS layers.

  • set maxExtent at layer level
  • set abitrary tileSize at layer level
    • 16.

    Switching of the Feature Visibility, group values 

    Use of style context to switch the visibility of a group of features

  • toggle requested typenames of a WFS layer

  • toggle visibility of a feature group

  • toggle display of feature popups
  • choose of three different popups
  • popups for editing of feature attributes

  • ESRI high-resolution World Imagery
  • MetaCarta vmap0 styled by SLD_BODY
    • 17.

    MapServer SLD Demo with SLD Demo files from demo.mapserver.org

    MapServer SLD World with more SLD files

    MapServer WFS Demo and OpenLayers SLD

    Three applications to test thematic mapping with MapServer WMS SLD, MapServer WFS and OpenLayers SLD support. One can edit the the SLD source and apply it to the layer.

    Test the difference between MapServer Version 4.9, 5.2, 5.6 and 6.0.0.
    18.

    WMS tiles access 

    Use of WMS tiles to show different SLD themes

  • access to WMS tiles

  • WMS layer with SLD

  • click handler to apply SLD
    • 19.

    complex features with OpenLayers.Geometry.Collection 

    Build complex features by use of OpenLayers.Geometry.Collection

  • line with direction arrow

  • editing tools

  • ESRI Basemap with OpenLayers.Layer.ArcGIS93Rest

  • WorldMapper Image with OpenLayers.Layer.Image
    • 20.

    Use of JSTS Topology Suite with OpenLayers 

    example to test some functions of JSTS Version 0.11.1

    Operations on one geometry
  • Boundary, Buffer, Centroid, Convexhull
    Operations on two geometries
  • Union, Intersection, SymDifference

    • other features

  • editing tools
  • debug console

    • JSTS Topology Suite is a JavaScript port by Björn Harrtel of the well established Java library JTS Topology Suite with a built in parser for OpenLayers geometries

    21.

    Influence of Styles on Select and ModifyFeature Control with OpenLayers 2.12 

    various settings for the feature style in select or modify mode

    Styles Modification
  • global style settings
  • styleMap with style["vertex"]
  • Select Control and selectStyle
  • ModifyFeature Control, style["vertex"] and virtualStyle
    other features
  • editing tools
  • patched ModifyFeature Control with keys p and k to delete a feature
  • XY Graticule Control
  • Javascript Object Browser
  • debug console

    • This example lets one test the different style settings and the effect on the Select and ModifyFeature Control.

    22.

    Geometry Manipulation and Affine Transformation with OpenLayers 2.12 

    various functions to manipulate the geometry of features

    Geometry Manipulation
  • Multi-Geometry Creation
  • n-part Polygon Creation
  • Geometry Explosion
  • Precision Modification
    Affine Transformation
  • Translation, Scale, Sheer, Rotation, Mirror
    other features
  • editing tools
  • patched ModifyFeature Control with keys p and k to delete a feature
  • XY Graticule Control
  • Javascript Object Browser
  • debug console
    • 23.

    OpenLayers 2.12, Rotation of Simple Vector Arrows 

    use ModifyFeatureControl to rotate a vector arrow

     OpenLayers ApplicationsDescription
    1.





    OLClient    -  Description 

    A web map client to explore the world wide gis web.

  • raster layer support for Google, WMS, Image
  • vector layer support for WFS, GML, KML, GEORSS, GEOJSON, WKT
  • projection support for EPSG:4326, EPSG:900913, EPSG:31466 (Germany)
  • editing control for drawing points, lines, polygons, regular polygons
  • select, modify and move control
  • import and export of GML, KML, GEORSS, GEOJSON, WKT
  • simple import support for KML GroundOverlay
  • geocoder for geonames.org
  • nearby search for Panoramio, FactBook, Wikipedia
  • feature labels, popups for display or editing of attributes
  • feature style modification
  • layer control for adding and removing layers, changing opacity, toggle feature visibility, ...
  • debug window for exploring, manipulating and extending map objects

    Some examples to view

  • WMS and SLD to show left-righthand traffic on world map
  • Image layer total population from worldmapper
  • GML layer "Capitols" styled by attribute and labeled by zoom
  • externalGraphic and labels to style features
  • change the feature visibility by rules
  • two mandelbrot fractal layers
  • Projections EPSG:54008
  • Projections EPSG:54021
  • Projections EPSG:54027
  • Projections EPSG:54028
  • Projections EPSG:54030

    • 2.

    Online CGI Mandelbrot Fractal Explorer 

    Explore the mandelbrot fractal with this simple but fast online explorer.

  • selectable color maps
  • selectable iteration deep
  • Introduction at YouTube 
  • www.programmableweb.com/mashup/mandelbrot-fractal-explorer 


    Others
  • qrcode:mandelbrot for mobile devices, CGI
  • dunkelraum.com, OpenLayers API
  • randomibis.com, Google API
  • hewgill.com, jQuery
  • www.subblue.com, Flash
  • mandelbrot.collettivamente.com, CGI
    • 3.

    ClickPoint 

    A little game with OpenLayers on top of Google Maps

    Find the place shown on the small maps on the large map. When a click on the large map is near the searched place, the map zooms automatically one ore more zoomlevels up.

  • Web Services from geonames.org, search places
  • Web Services from geonames.org, search places in Wikipedia
  • Web Services from geonames.org, findNearby in Wikipedia
  • Web Service Panoramio

  • Introduction at YouTube 
    • 4.

    Pentomino Puzzle 

    A little game to show some of OpenLayers vector features capabilities.

  • moving, rotating, reflection of features
  • snapping

  • animation
    • 5.

    Astropfad Wuppertal 

    Der Astropfad in Wuppertal. Ein Projekt des Städtischen Gymnasiums Sedanstraße

    Der Astropfad vermittelt auf eine einfache aber anschauliche und erfahrbare Art und Weise die Größenverhältnisse in unserem Sonnensystem. In maßstäblicher Entfernung von der Sonne (Brunnen Am Werth) sind an den Schnittpunkten der Planetenbahnen mit einer gedachten Gerade in Richtung Schwebebahnstation Vohwinkel Bronzeztafeln mit Informationen zu dem jeweiligen Planeten im Boden eingelassen. Die Anwendung zeigt die Standorte und Fotos der Tafeln.

  • Planeten als Image Layer
  • Tafeln als externalGraphic
  • Labels
    • 6.

    bubbles 

    bubbles. Ein weiteres Spiel mit OpenLayers

    In einem quadratischen Ausschnitt erscheint an zufälliger Stelle für kurze Zeit ein farbiges Symbol. Die Aufgabe des Spiels besteht darin, das Symbol durch Klick mit der Maus zu fangen.

    7.

    Landtagswahl NRW 2010 

    Darstellung der Ergebnisse der Landtagswahl in Nordrhein-Westfalen 2010

  • Stimmenverteilung mittel MapServer Layer CHART
  • Hervorhebung des selektierten Wahlkreises mittels WFS und OpenLayers GetFeature Control
  • Stimmenverteilung des selektierten Wahlkreises mittels OpenLayers externalGraphic
  • Image Layer zur Darstellung verschiedener Themen

    • 8.

    Stahlrohr 

    ExternalGraphic Puzzle - tiled image layer
    Usage of ExternalGraphic to display tiled images

  • move the tiles to the right place or click the solve button
  • click the explode button to move the tiles

    • The application shows a solution of the problem with ExternalGraphic at the edge of the map. If the anchorpoint of the images is outside the view, then they normally vanish. With a patch of OpenLayers.Renderer.drawFeature the images don't disappear, if the anchorpoint is outside the viewport.

    9.

    Map Projection Viewer 

    The application allows to create a map for most projections defined in the PROJ4 epsg file (version 4.8.0).

  • MapServer to deliver reprojected world borders
  • dropdown lists of PROJ4 epsg items orderd by projection
  • proj4js to reproject world vector data
  • Proj4js.defs derived from PROJ4 epsg file
  • length distortion map

  • Object Browser
  • Debug Console

    		•
     Wikipedia POIDescription
    1.Wikipedia POI

    The points are extracted from wikipedia articles. Wikipedia offers many lists of topographic objects like cathedreals, pyramids, tall buildings. I have parsed these lists to get the articles and the coordinates of these objects. Below are some KML files for different themes.

    ägyptische pyramiden (59).kml · Atomkraftwerke (262).kml · Bismarcktürme Deutschland (66).kml · cathedrals (167).kml · diff. structures.kml · Fernsehtürme (84).kml · Formel-1-Rennstrecken (54).kml · Fussballstadien - 10 größten der Welt.kml · Fussballstadien.kml · Fussballstadien WM 2010 in Südafrika.kml · large dams (15).kml · large doms (43).kml · mosques in asia (65).kml · NASCAR race tracks (97).kml · tall buildings (220).kml · tall dams (79).kml · tall structures (145).kml · tall towers (264).kml · tensile structures (15).kml · thin shell structures (35).kml · tombs and mausoleums (40).kml · Wonders of the World (85).kml · Deutsche Fussballstadien.kml · Heightest Statues of the World · Talsperren in Deutschland · Hochschulen in Deutschland

    View Wikipedia POI with a little application to jump from POI to POI on Google Satellite.

    View Wikipedia POI with OLClient

    Rennstrecken - Circuits · Different Themes · Ägyptische Pyramiden - Pyramids of Egypt · Atomkraftwerke - Nuclear Power Stations

     Startseitegis.ibbeck.de
    1.

    Startseite gis.ibbeck.de 

     Enjoy OpenLayers webbasiertes GIS des Ingenieurbüro Reinhard Beck GmbH & Co. KG