The Heron Mapping Client - Overview, Functions, Concepts
-
Upload
just-van-den-broecke -
Category
Technology
-
view
3.810 -
download
6
description
Transcript of The Heron Mapping Client - Overview, Functions, Concepts
![Page 1: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/8.jpg)
Functions by Example
8Examples
![Page 9: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.fdocuments.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.fdocuments.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.fdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/11.jpg)
11
Theming
![Page 12: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/18.jpg)
18
Draw a Path
![Page 19: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.fdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/19.jpg)
19
Export as GPX
![Page 20: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.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.fdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/48.jpg)
48
![Page 49: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.fdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/49.jpg)
49
![Page 50: The Heron Mapping Client - Overview, Functions, Concepts](https://reader030.fdocuments.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.fdocuments.us/reader030/viewer/2022020718/554f51dbb4c905b9508b4e0f/html5/thumbnails/51.jpg)
Thank You
Q&A
51