Common pitfalls for users of OpenLayers

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 1

FOSS4G 2011, Denver, CO

Common pitfalls for users of OpenLayers

Or: “Why are my features at the equator

when they shouldn't“

Marc Jansen, terrestris GmbH & Co. KG

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 2

Table of contents

● Introduction● Methodology● Common pitfalls● Homework

or how to improveOpenLayers

[pitfall]

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 3

Introduction – about me

● Marc Jansen● Developer and project manager

@ terrestris● Frontend and

OpenSource-GIS-Stack● Co-Author „OpenLayers —

Webentwicklung mit dynami-schen Karten und Geodaten“ (ISBN 978-3-937514-92-5)

● Trunk committer OpenLayers

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 4

Introduction – about terrestris

● OpenSource WebGIS Technologies● Softwaredevelopment● Training & Consulting● OpenSource advocates

● Geoportals, Geodata, Standards...● Partner of OpenGeo● Sponsoring FOSS4G, FOSSGIS● Associate member of OGC

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 5

Introduction – this talk

● This talk will deal with OpenLayers...

● … a quick poll

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 6

Raise your hands, please

Who knows OpenLayers

?

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 7

Raise your hands, please

Who has developedusing OpenLayers

?

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 8

Raise your hands, please

Who knows theonline API-documentation

?

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 9

Raise your hands, please

Who thinks theonline API-documentation

totally rocks

?

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 10

Raise your hands, please

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 11

Methodology

● This is not a scientific talk● Sources:

● OpenLayers-User List [userlist]

● Stack Overflow [stackoverflow]

● Twitter [twitter]

● My experience

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 12

Vectors

● Many problems circle around vectors in OpenLayers● Styling● Performance● Custom Select-Tools● Get Features from services● use cases range from easy to complex

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 13

Styling Vectors

● You can set● style for a feature● style for a layer● stylemap for a layer

– render intents– attributive '${statusClass}'– rule based

● Complex styling options

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 14

Performance of Vectors

● Internet Explorerhas big issues renderingmany (> 250) features~

● Usual suggestion● Raster layer for display● Limit features● Cluster strategies● Drop support for IE

(often not an option)

[ie-logo]

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 15

Performance of Vectors

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 16

Custom Select-Tools for Vectors

● Select by a box● { box: true }

● Select by a polygon● { poly: true }● (currently not available!)

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 17

Getting Features from a service

    var kml = new OpenLayers.Layer.Vector("KML", {        strategies: [            new OpenLayers.Strategy.Fixed()        ],        protocol: new OpenLayers.Protocol.HTTP({            url: "kml/sundials.kml",            format: new OpenLayers.Format.KML({                extractStyles: true,                extractAttributes: true            })        })    });

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 18

Projections

● Projections in OpenLayers● Reprojection of data● WMS in different projection

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 19

Known Projections

● Projections in OpenLayers● 4326 and 900913

new OpenLayers.Map( {    projection : 'EPSG:31467',    maxResolution: 30000,    units: 'm',    maxExtent: new OpenLayers.Bounds(        3146150, 5223600, 4031150, 6108600    )} );

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 20

OpenLayers with another SRS

[ger

man

y-w

ms]

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 21

● Included: 4326 <=> 900913● Otherwise: Proj4 JS http://proj4js.org/

Reprojection of vectordata

<script type=“text/javascript“ src=“path/to/proj4.js“></script><script type=“text/javascript“>    Proj4js.defs["EPSG:31467"] = "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 …";</script><script type=“text/javascript“>    var geom = new OpenLayers.Geometry.Point(6.97, 50.95);    geom.transform(        new OpenLayers.Projection('EPSG:4326'),        new OpenLayers.Projection('EPSG:31467')    );</script>

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 22

Reprojection of vectordata

[ger

man

y-w

ms]

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 23

Projections

● My SRS URL-parameter is being ignored!● That's because

● The baselayer determines the projection that will end up in the URL

● or● The OpenLayers.Map-instance has a projection.

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 24

API

● Too complex for simple things● Popup, marker, tooltips, annotations● Compare to Leaflet (http://leaflet.cloudmade.com/)● http://crschmidt.net/blog/archives/497/demo-leafletopenlayers-translator/

● Silent failures● Debug mode● Swapping of base library

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 25

Documentation

● … or lack of documentation● … or in too many different places

● e.g. Vector styling

● Outdated examples● No inherited properties in API● Events / callback / arguments

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 26

Performance

● Vectors (see before)● Single file build / compressing

● build/build.py and build/README.txt● http://openlayerer.appspot.com/

● WMS tiling● Web Best practices

(gzip, cssmin, header etc)

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 27

What wasn't a problem?

● There were (surprisingly) very few questions related to● Same Origin Policy and proxy.cgi● Mobile● Browser X does Y instead of Z

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 28

Homework

● For OpenLayers● Better documentation (=> Codesprint Fr?)● Better API

● For you● Tell us what is annoying● Send patches / edit on github● Get involved!

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 29

Thanks

Thank youfor your attention.

Questions?

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 30

Sources● [userlist]: http://lists.osgeo.org/pipermail/openlayers-users/

● [stackoverflow]: http://stackoverflow.com/questions/tagged/openlayers

● [twitter]: http://twitter.com/#!/selectoid/status/99382702867877888

● [ie-logo]: http://paulirish.com/2010/high-res-browser-icons/

● [germany-wms]: http://wms1.ccgis.de/cgi-bin/mapserv?MAP=/data/umn/germany/germany.map&REQUEST=GetCapabilities&SERVICE=WMS&VERSION=1.1.1

● [pitfall]: http://www.flickr.com/photos/montage_man/394251850/ CC-BY 2.0 by joefoodie

2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 31

Imprint

● Author:Marc Jansen @selectoidterrestris GmbH & Co. KG http://terrestris.de/Irmintrudisstr. 17 [email protected] Bonn, GermanyTel. +49 228 – 962 899 53 Fax: +49 228 – 962 899 57

● Licence of the slides:Creative Commons (by-sa) 2.0-Licencehttp://creativecommons.org/licenses/by-sa/2.0/