Common pitfalls for users of OpenLayers by Marc Jansen of Terestris

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“ 1

2. Table of contents
● Introduction
● Methodology
● Common pitfalls
● Homework
or how to improve
OpenLayers
[pitfall]
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 2

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“ 3

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“ 4

5. Introduction – this talk
● This talk will deal with OpenLayers...
● … a quick poll
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 5

6. Raise your hands, please
Who knows OpenLayers
?
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 6

7. Raise your hands, please
Who has developed
using OpenLayers
?
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 7

8. Raise your hands, please
Who knows the
online API-documentation
?
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 8

9. Raise your hands, please
Who thinks the
online API-documentation
totally rocks
?
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 9

10. Raise your hands, please
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 10

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“ 11

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“ 12

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“ 13

14. Performance of Vectors
● Internet Explorer
has big issues rendering
many (> ~250) features
● Usual suggestion
● Raster layer for display
● Limit features
● Cluster strategies [ie-logo]
● Drop support for IE
(often not an option)
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 14

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

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“ 16

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“ 17

18. Projections
● Projections in OpenLayers
● Reprojection of data
● WMS in different projection
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 18

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“ 19

20. OpenLayers with another SRS
[germany-wms]
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 20

21. Reprojection of vectordata
● Included: 4326 <=> 900913
● Otherwise: Proj4 JS http://proj4js.org/
<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“ 21

22. Reprojection of vectordata
[germany-wms]
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 22

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“ 23

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“ 24

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“ 25

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“ 26

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“ 27

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“ 28

29. Thanks
Thank you
for your attention.
Questions?
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 29

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“ 30

31. Imprint
● Author:
Marc Jansen @selectoid
terrestris GmbH & Co. KG http://terrestris.de/
Irmintrudisstr. 17 jansen@terrestris.de
53111 Bonn, Germany
Tel. +49 228 – 962 899 53 Fax: +49 228 – 962 899 57
● Licence of the slides:
Creative Commons (by-sa) 2.0-Licence
http://creativecommons.org/licenses/by-sa/2.0/
2011-09-14 | FOSS4G 2011 | M. Jansen: „Common OpenLayers pitfalls“ 31