the heron mapping client - overview, functions, concepts
DESCRIPTION
High-level introduction to the Heron Mapping Client (Heron MC). Heron is an Open Source JavaScript framework for creating web mapping (client) apps for the browser. Heron builds on/wraps standard mapping libs like OpenLayers and GeoExt. The unique feature of Heron is that a complete app is created with just a (JSON) configuration. Heron has a minimal backend, relying mainly on OGC standards like WMS, WFS and the like. This presentation was first given on behalf of the OpenGeoGroep at the OGG Customer Day on sept, 5, 2013 at Geofort, The Netherlands.TRANSCRIPT
![Page 1: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/1.jpg)
Heron Mapping ClientAn Overview
Coöperatieve Vereniging OpenGeoGroep U.A. - www.opengeogroep.nl
Just van den Broecke - www.justobjects.nl
Sept 9, 2013
![Page 2: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/2.jpg)
Agenda
•Nutshell •Examples•Concepts•Q&A
2Nutshell
![Page 3: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/3.jpg)
What is Heron?
JavaScript framework to quickly develop
geo-apps for the browser
3Nutshell
![Page 4: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/4.jpg)
What Heron is not
not a viewer appnot even an app
not a client/server suite
4Nutshell
![Page 5: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/5.jpg)
Heron Embraces Standardsand Code Reuse
server: OGC services ==> WMS, WFS, OpenLS, WPS, CSW
data: standard formats ==> GML, GeoJSON, CSV, Shape,...
code: existing libraries ==> GeoExt, OpenLayers, ExtJS
5Nutshell
![Page 6: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/6.jpg)
And more
Free and Open Source ==> GNU GPL v3 License
In The Cloud ==> public repository, no barriers
Community ==> small but growing, customers and devs
6Nutshell
![Page 8: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/8.jpg)
Functions by Example
8Examples
![Page 9: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/9.jpg)
Examples, Examples
9Examples
Customizable Layer TreesWMS, WFS, WMTS, TMS,
Vector,..Multitabbed
“Identify” (WMS, WFS)
Autofill Gazetteer Search:PDOK Geocoder
(OpenLS), Geonames.org,Your
Geocoder
![Page 10: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/10.jpg)
10
LightweightCMS/Portal
Flexible Layer Stacking with
Transparency Sliders
![Page 11: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/11.jpg)
11
Theming
![Page 12: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/12.jpg)
12
Layer Stacking with Transparency Sliding
Customizable Feature Grid (e.g. hyperlinks)
![Page 13: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/13.jpg)
13
Form-based WFS-Search
![Page 14: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/14.jpg)
14
WFS Search by Drawing Shapes
![Page 15: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/15.jpg)
15
Spatial WFS Search:Draw Shapes to find Geometries in source Layerand use these for search in target Layer!
![Page 16: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/16.jpg)
16
All Searches use flexible Feature GridDownload in any standard format
![Page 17: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/17.jpg)
17
Sparetime: making hiking GPX routes
Redlining/drawing tool
Up/Download, anystandard format
![Page 18: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/18.jpg)
18
Draw a Path
![Page 19: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/19.jpg)
19
Export as GPX
![Page 20: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/20.jpg)
20
Make a Print (PDF)
![Page 21: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/21.jpg)
21
Copyright 2013. By Holder
Garda Meer 12
Mooie wandeling etc.
2013-09-03
400m2000
MapFish Print Serverat Kadaster GEORZ Lab
www.kademo.nlYAML core Warwickshire CC
YAML by Heron DevsCustomizable Print Output
![Page 22: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/22.jpg)
22
Use GPX on any other Device
![Page 23: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/23.jpg)
23
Be surprised how it looks in real!
![Page 24: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/24.jpg)
24
What’s in a Name - I
![Page 25: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/25.jpg)
25
What’s in a Name - II
![Page 26: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/26.jpg)
26
What’s in a Name - II
![Page 28: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/28.jpg)
http://geotux.tuxfamily.org/index.php/en/geo-blogs/item/291-comparacion-clientes-web-v6
2012
28
![Page 29: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/29.jpg)
Do we need yet another
web mapping client ?
29
![Page 30: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/30.jpg)
Heron - Goals
•Make web mapping easy• Not just a map: provide for a complete web app• Reuse the power of existing web mapping libs• Reusable widgets and components • Server back-end: • Minimal weight• Open Standards: OGC (W*S, CSW), TMS etc
• Focus on “The Data behind the Map”
30
![Page 31: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/31.jpg)
Heron - Concepts
• Declarative Programming • “what” not “how” • via config• “look ma, no programming!”
• Component Based• Complete Webapp• Build on GeoExt
(=ExtJS+OpenLayers) and others like GXP
31
![Page 32: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/32.jpg)
Heron - Slogan
the configuration is the app the app is the configuration
32
![Page 33: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/33.jpg)
Hello World
http://lib.heron-mc.org/heron/latest/examples/minimal
33
![Page 34: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/34.jpg)
Hello World
Heron.layout = { xtype: 'hr_mappanel', hropts: { layers: [ new OpenLayers.Layer.WMS("World Map", "http://www2.demis.nl/WMS/wms.asp?WMS=WorldMap", {layers: 'Coastlines', format: 'image/png’} ) ] }};
http://lib.heron-mc.org/heron/latest/examples/minimal
34
![Page 35: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/35.jpg)
Architecture - That’s a Wrap
GeoExt
Heron Framework
Heron Apps
35
![Page 36: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/36.jpg)
Architecture - Two-pillared GeoExt
ExtJS OpenLayers
GeoExt
Heron Framework
Heron Apps
36
![Page 37: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/37.jpg)
Architecture - Plugins and User Extensions (UX)
ExtJS OpenLayers
GeoExt
Heron Framework
Heron Apps
37
GXPUX
UX
![Page 38: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/38.jpg)
Architecture - Heron in SDI
38
Source: http://sdi08.rosa.ro/
- Heron -Pure HTML/
JavScript/CSS
![Page 39: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/39.jpg)
Architecture - Client/Server with mainly Open OGC Standards
Heron
39
PyWPS
WMS WFS WMTS TMS WPS CSWCustom
Proxy
Heron.cgiYour Scripts...
Client
API
Server
= Planned
![Page 40: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/40.jpg)
What is a Heron App
• Heron App === Configuration • defined as JSON/JavaScript object in config .js files• determines overall GUI-layout• includes components (widgets) and their properties• components from Heron, GeoExt, GXP and/or ExtJS• plus your own custom components• “Builder” Design Pattern (based on ExtJS ‘xtype’)
40
![Page 41: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/41.jpg)
Example - Heron Config Snippet
Heron.layout = {! xtype: 'panel', layout: 'border', items: [! ! {! ! ! xtype: 'panel',! ! ! layout: 'accordion',! ! ! region: "west",! ! ! width: 240,! ! ! collapsible: true,! ! ! split: true,! ! ! border: false,! ! ! items: [! ! ! ! {! ! ! ! ! xtype: 'hr_layertreepanel'
. . .
! ! {! ! ! xtype: 'hr_mappanel',! ! ! layout: 'border',! ! ! region: 'center',! ! ! width: '100%',! ! ! items: [
. . .
41
![Page 42: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/42.jpg)
42
MapPanel(Center)
LayerTreePanelin Accordion Layout
(West)
Toolbar Itemsin
MapPanel
![Page 43: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/43.jpg)
The App: index.html with No Body
<html><head>! <title>Kadaster GEORZ Lab & INSPIRE Data with FOSS</title>! <!-- External lib: ExtJS -->! <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.1/resources/css/ext-all.css"/>! <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.1/adapter/ext/ext-base.js"></script>! <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.1/ext-all.js"></script>
! <!-- External lib: OpenLayers -->! <script type="text/javascript" src="http://lib.heron-mc.org/openlayers/2.11/OpenLayers-min.js"></script>
! <!-- External lib: GeoExt -->! <script type="text/javascript" src="http://lib.heron-mc.org/geoext/1.1/GeoExt-min.js"></script>
! <!-- External lib: Heron Mapping Client -->! <link rel="stylesheet" type="text/css" href="http://lib.heron-mc.org/heron/latest/resources/css/default.css"/>! <script type="text/javascript" src="http://lib.heron-mc.org/heron/latest/script/Heron.js"></script>
! <!-- Specific JS/CSS for this site -->! <link rel="stylesheet" type="text/css" href="resources/css/site.css"/>! <script type="text/javascript" src="resources/js/options.js"></script>! <script type="text/javascript" src="resources/js/layout.js"></script>
</head><body></body></html>
the configuration is the app the app is the configuration
43
YourConfig
SupportingLibs
![Page 44: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/44.jpg)
Development
• Founding fathersDutch Kadaster (Kademo Lab) and RVOB
• Initially developed with GeodanESDIN INSPIRE Project
• Contributors from OpenGeoGroep.nl and internationally• OGG: Eddy Scheper, Anke Keuren, Milo van der Linden, Raymond
Nijssen, Just van den Broecke e.v.a.
• Google Code project (GPLv3)• http://code.google.com/p/geoext-viewer - project• http://groups.google.com/group/geoext-viewer-devel -
mailing list
44
![Page 45: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/45.jpg)
Positioning Heron
• Desktop GIS Replacement• migration from proprietary desktop apps (Arc*, MapInfo,..)• traditional (toolbar!) but productive (viz. spreadsheet)• many intranet/internal deployments
• “Users as Developers” • assembly (config) by customers’ GIS-specialists
• “Geospatial Asset Management” • see Cases next
• Not:• mobile apps (not now, but planned)
45
![Page 46: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/46.jpg)
Heron Cases with Assets Managed
• RVOB: Government-owned Properties• PDOK: PreviewApp: testing PDOK services• Kadaster: Cadastral Parcels and related assets• Kadaster Kademo Lab: many prototyping apps• Gasunie: Gas Pipelines and -Installations• Deutsche Bundesbahn: Railways and related• Warwickshire (UK): county properties
46
![Page 47: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/47.jpg)
Customer Development Model
47
• Co-development with Customers within Community• jointly determine new features; select which to add to Heron core• new features added to Heron public Tracker and Roadmap• communication on issues via public Heron tracker/mailing list
• Customer Benefits• maintain only a Heron configuration (=application!)• influence roadmap• simple online progress tracking• help from the community• long-term OGG-support contracts• minimal maintenance costs• new functions for free with Heron upgrades!
• Future: joint funding ?!
![Page 48: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/48.jpg)
48
![Page 49: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/49.jpg)
49
![Page 50: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/50.jpg)
Links
www.heron-mc.org
http://lib.heron-mc.org - hosted libs (also on CDNJS)http://apps.heron-mc.org - ready apps
50
![Page 51: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.vdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/51.jpg)
Thank You
Q&A
51