The Heron Mapping Client - Overview, Functions, Concepts
Upcoming SlideShare
Loading in...5
×
 

The Heron Mapping Client - Overview, Functions, Concepts

on

  • 3,138 views

High-level introduction to the Heron Mapping Client (Heron MC). ...

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.

Statistics

Views

Total Views
3,138
Views on SlideShare
3,138
Embed Views
0

Actions

Likes
1
Downloads
42
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    The Heron Mapping Client - Overview, Functions, Concepts The Heron Mapping Client - Overview, Functions, Concepts Presentation Transcript

    • Heron Mapping Client An Overview Coöperatieve Vereniging OpenGeoGroep U.A. - www.opengeogroep.nl Just van den Broecke - www.justobjects.nl Sept 9, 2013
    • Agenda •Nutshell •Examples •Concepts •Q&A 2Nutshell
    • What is Heron? JavaScript framework to quickly develop geo-apps for the browser 3Nutshell
    • What Heron is not not a viewer app not even an app not a client/server suite 4Nutshell
    • Heron Embraces Standards and Code Reuse server: OGC services ==> WMS, WFS, OpenLS, WPS, CSW data: standard formats ==> GML, GeoJSON, CSV, Shape,... code: existing libraries ==> GeoExt, OpenLayers, ExtJS 5Nutshell
    • 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
    • www.heron-mc.org 7Nutshell Main entry
    • Functions by Example 8Examples
    • Examples, Examples 9Examples Customizable Layer Trees WMS, WFS, WMTS, TMS, Vector,.. Multitabbed “Identify” (WMS, WFS) Autofill Gazetteer Search: PDOK Geocoder (OpenLS), Geonames.org,Your Geocoder
    • 10 Lightweight CMS/Portal Flexible Layer Stacking with Transparency Sliders
    • 11 Theming
    • 12 Layer Stacking with Transparency Sliding Customizable Feature Grid (e.g. hyperlinks)
    • 13 Form-based WFS-Search
    • 14 WFS Search by Drawing Shapes
    • 15 Spatial WFS Search: Draw Shapes to find Geometries in source Layer and use these for search in target Layer!
    • 16 All Searches use flexible Feature Grid Download in any standard format
    • 17 Sparetime: making hiking GPX routes Redlining/ drawing tool Up/ Download, any standard format
    • 18 Draw a Path
    • 19 Export as GPX
    • 20 Make a Print (PDF)
    • 21 Copyright 2013. By Holder Garda Meer 12 Mooie wandeling etc. 2013-09-03 400m2000 MapFish Print Server at Kadaster GEORZ Lab www.kademo.nl YAML core Warwickshire CC YAML by Heron Devs Customizable Print Output
    • 22 Use GPX on any other Device
    • 23 Be surprised how it looks in real!
    • 24 What’s in a Name - I
    • 25 What’s in a Name - II
    • 26 What’s in a Name - II
    • Web Mapping Clients OpenLayers MapQuery 27
    • http://geotux.tuxfamily.org/index.php/en/geo-blogs/item/291-comparacion-clientes-web-v6 2012 28
    • Do we need yet another web mapping client ? 29
    • 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
    • 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
    • Heron - Slogan the configuration is the app the app is the configuration 32
    • Hello World http://lib.heron-mc.org/heron/latest/examples/minimal 33
    • 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
    • Architecture - That’s a Wrap GeoExt Heron Framework Heron Apps 35
    • Architecture - Two-pillared GeoExt ExtJS Open Layers GeoExt Heron Framework Heron Apps 36
    • Architecture - Plugins and User Extensions (UX) ExtJS Open Layers GeoExt Heron Framework Heron Apps 37 GXP UX UX
    • Architecture - Heron in SDI 38 Source: http://sdi08.rosa.ro/ - Heron - Pure HTML/ JavScript/CSS
    • Architecture - Client/Server with mainly Open OGC Standards Heron 39 PyWPS WMS WFS WMTS TMS WPS CSWCustom Proxy Heron.cgi Your Scripts... Client API Server = Planned
    • 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
    • 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
    • 42 MapPanel (Center) LayerTreePanel in Accordion Layout (West) Toolbar Items in MapPanel
    • The App: index.html with No Body <html> <head> ! <title>Kadaster GEORZ Lab &amp; 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 Your Config Supporting Libs
    • Development • Founding fathers Dutch Kadaster (Kademo Lab) and RVOB • Initially developed with Geodan ESDIN 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
    • 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
    • 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
    • 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 ?!
    • 48
    • 49
    • Links www.heron-mc.org http://lib.heron-mc.org - hosted libs (also on CDNJS) http://apps.heron-mc.org - ready apps 50
    • Thank You Q&A 51