GeoExt3

Universal WebGIS Applications
with OpenLayers 3 and ExtJS 6

Christian Mayer & Marc Jansen

FOSS4G 2016, Bonn, Germany, 2016-08-25

Outline

• Intro & meta
• GeoExt status
• Universal applications…
• … with GeoExt
• Examples
• Conclusion

Marc Jansen

jansen@terrestris.de
@marcjansen
@selectoid

• Since 2007 developer and project lead @ terrestris
• Core developer / PSC member GeoExt
• Core developer OpenLayers
• Author "OpenLayers" (German)
• Speaker & workshop instructor
  national & international
• OSGeo Foundation Charter Member

terrestris

@terrestris
@terrestrisde

• terrestris.de
• Top-notch OpenSource GIS from Bonn, Germany
• Development, projects, support & teaching
• Consulting, implementation, planing & maintenance

Christian Mayer

chris@meggsimum.de
@chrismayer
@geofootballer

• Geoinformatics engineer
• Software developer & -architect
• Core developer and PSC member GeoExt
• Speaker & trainer
  national & international
• OSGeo Foundation Charter Member

meggsimum

@meggsimum
@meggsimum

• meggsimum.de
• Services around Open Source GIS, Webmapping & SDI
• Tailored WebGIS solutions
• Software concepts and development
• Geodata
• Consulting and trainings

GeoExt

Current status

GeoExt

• JavaScript framework for "Rich WebMapping Applications"
• Based on OpenLayers und ExtJS
• Extends ExtJS with spatial components
• Graphical components and data packages
• Open Source, © OSGeo
• Since March 2009 (>7.5 years)

Versions

Innovations OpenLayers

A high-performance, feature-packed library for all your mapping needs.

• Complete rewrite after v2.x
• Mobile from start
• Independent from …
  • … device
  • … browser
  • … libraries

…universal.

Innovations ExtJS 6

Merging ExtJS / Sencha Touch

• Toolkits classic & modern
• Build profiles
• Improved theming (fashion)
• Model-View-Controller & Model-View-ViewModel
• Ext.Widget (e. g. Ext.list.Tree)

…universal.

Universal
applications

Goal

• One code base => multiple builds
• Less frictional losses
• Re-use of code
• UI (more or less) dependent from device

Ideally, the Universal aspect of the your application will contain data, models, viewmodels, etc. You can also share controllers, though, developers may need to be creative in order to produce logic that can span toolkits.

app.json & sencha

"builds": {
    "classic": {
        "toolkit": "classic",
        "theme": "theme-triton"
    },

    "modern": {
        "toolkit": "modern",
        "theme": "theme-triton"
    }
}
          

$ sencha app build modern
          

Profile detection in index.html

Ext.beforeLoad = function (tags) {
    var s = location.search,  // the query string (ex "?foo=1&bar")
        profile;
    // For testing look for "?classic" or "?modern" in the URL
    // to override device detection default.
    if (s.match(/\bclassic\b/)) {
        profile = 'classic';
    } else if (s.match(/\bmodern\b/)) {
        profile = 'modern';
    } else {
        profile = tags.desktop ? 'classic' : 'modern';
        // tag.phone, tags.cordova …
    }

    Ext.manifest = profile; // must match a build profile name
};
          

Universal applications

…with GeoExt

What does this mean for GeoExt?

• Correct inheritance of own classes
• Example: GeoExt.component.Map
• Reutilization: all except GeoExt.grid.column.Symbolizer
• Components, data package (models and stores), utilities & mixins
• Tree structures via models

(currently)

Not usable as package

"classpath": [
    "app",
    "${toolkit.name}/src",
    "packages/remote/GeoExt/src/component",
    "packages/remote/GeoExt/src/data",
    "packages/remote/GeoExt/src/mixin",
    "packages/remote/GeoExt/src/util"
]
          

Remove global "requires": [ "GeoExt" ] !!!

Examples

Conclusion

Conclusion

• Huge potential
• Sophisticated detail development (framework / app)
• Some unexpected pitfalls
• Attractive outcome
• Currently some improvements are financed (BfS)
  
• More collaboration desired
• Lot of ideas / little time
• Sponsors? Developers?

Thank you

Questions & comments?

Imprint

Imprint

Authors

License

The slides of this talk are licensed under CC BY-SA.
They are based on this German GeoExt3 talk of the same authors.

Slides, PDF version, git repository