SlideShare a Scribd company logo

GeoExt Foss4G 2009

•
•
Moullet
Moullet

This document discusses building web mapping applications using GeoExt, which combines the rich user interface capabilities of ExtJS with the mapping capabilities of OpenLayers. It provides examples of creating a map panel with controls, loading layers and data, and integrating tree views, grids, and popups. GeoExt allows building full-featured web mapping applications with synchronized views of layers, features, and scales between components.

Related slideshows

Xbase - Implementing Domain-Specific Languages for Java
Xbase - Implementing Domain-Specific Languages for JavaXbase - Implementing Domain-Specific Languages for Java
Xbase - Implementing Domain-Specific Languages for Java
 
Data Types/Structures in DivConq
Data Types/Structures in DivConqData Types/Structures in DivConq
Data Types/Structures in DivConq
 
Redis to the Rescue?
Redis to the Rescue?Redis to the Rescue?
Redis to the Rescue?
 
1 of 19
Download to read offline
Building a web mapping application with GeoExt Andreas Hocevar & Cédric Moullet
Why GeoExt ?
From web pages to web applications
Rich UI Toolbars Window Menu AJAX Tree Combo Tab Grid Layout Panel
ExtJS + OpenLayers = GeoExt ... not a revolutionary idea: MapFish, OpenGeo, MapGears, ExtMap, others...
PSC • Bart van den Eijnden • Tim Schaub • Eric Lemoine • Andreas Hocevar • Cédric Moullet
Committers • Andreas Hocevar • Bart van den Eijnden • Eric Lemoine • Frédéric Junod • Patrick Valsecchi • Pierre Giraud • Tim Coulter • Tim Schaub • * Sebastian Benthall • * Bruno Binet
Timeline July 2009 October 2009 GeoExt 0.5 GeoExt 0.6 ExtJS 2.2.1 ExtJS 2.x, 3.0 OL 2.8 OL 2.8+
Licenses and Copyrights • BSD License • Copyrights to OSGEO • Ext JS Dual Licensing (GPL3 or commercial)
Latest News ? • Release 0.6 – More WMS and WFS readers – Synchronized grid & layer selection of features – More Layer Tree options (incl. drag-n-drop) – LegendPanel – Sliders • Roadmap in discussion • .... www.geoext.org
The Concept • Ext JS is great for rich web applications, but lacks mapping • OpenLayers is great for maps, but lacks a rich UI • Put the OpenLayers map in an Ext panel • Wrap OpenLayers objects in Ext data components
12 lines of code Create and show a window with a GeoExt.MapPanel
About and Around The MapPanel • Content is an OpenLayers.Map • Access layers through a LayerStore • Add button controls through Actions • Add anchored Popup windows • Panel populates a ScaleStore • Panel's items interact with the map (e.g. ZoomSlider)
24 lines of code Add 3 controls to the bottom bar using GeoExt.Action 7+6 lines of code 7 lines of code Pimp the ZoomBar with a Create and show an anchored GeoExt.ZoomSlider GeoExt.Popup window 27 lines of code Show/set scale in a drop-down using GeoExt.ScaleStore
Tree View For Layers • Synchronized with map • Control visibility and order of layers (drag & drop) • Group layers with LayerContainers • LayerParamNode for sub-layers (e.g. &LAYERS=sub1,sub2,sub3) • Flexible configuration with Nodes and Loaders, mixable with other content
[{ [{ [{ [{ nodeType: „gx_layercontainer“ nodeType: „gx_overlaylayercontainer“ nodeType: „gx_overlaylayercontainer“, "nodeType": "async", }] }, { loader: { "text": "Human", nodeType: „gx_baselayercontainer“ baseAttrs: {radioGroup: "active"} "children": [{ }] } "nodeType": "gx_layer", }, { "layer": "Tasmania Roads" nodeType: „gx_baselayercontainer“ }, { }] "nodeType": "gx_layer", "layer": "Cities" }] With radio buttons }, { "nodeType": "async", "text": "Natural", "children": [{ "nodeType": "gx_layer", GeoExt.tree.OverlayLayerContainer }, { "layer": "Water" GeoExt.tree.BaseLayerContainer "nodeType": "gx_layer", "layer": "Tasmania State Boundaries", "text": "Tasmania Coastline" }] }] Custom groups Custom node text GeoExt.tree.LayerContainer Map with „allOverlays: true“
Data Access Components • Treat OpenLayers Formats and objects like Ext JS remote data, using Readers and Stores • The ProtocolProxy wraps OpenLayers Protocols as input for Readers • 2-way synchronization between Stores and OpenLayers objects
4 lines of code Load remote WMS Capabilities into a GeoExt.data.WMSCapabilitiesStore 1 line of code GeoExt.data.LayerStore shared between map and tree node 11 lines of code Copy layer to the map's GeoExt.data.LayerStore
5 lines of code 8 lines of code Get remote features (GeoJSON) GeoExt.data.FeatureStore shared using GeoExt.data.ProtocolProxy between vector layer and grid 1 line of code Selection synchronized between layer and grid using GeoExt.grid.FeatureSelectionModel

More Related Content

GeoExt Foss4G 2009

  • 1. Building a web mapping application with GeoExt Andreas Hocevar & Cédric Moullet
  • 3. From web pages to web applications
  • 4. Rich UI Toolbars Window Menu AJAX Tree Combo Tab Grid Layout Panel
  • 5. ExtJS + OpenLayers = GeoExt ... not a revolutionary idea: MapFish, OpenGeo, MapGears, ExtMap, others...
  • 6. PSC • Bart van den Eijnden • Tim Schaub • Eric Lemoine • Andreas Hocevar • Cédric Moullet
  • 7. Committers • Andreas Hocevar • Bart van den Eijnden • Eric Lemoine • Frédéric Junod • Patrick Valsecchi • Pierre Giraud • Tim Coulter • Tim Schaub • * Sebastian Benthall • * Bruno Binet
  • 8. Timeline July 2009 October 2009 GeoExt 0.5 GeoExt 0.6 ExtJS 2.2.1 ExtJS 2.x, 3.0 OL 2.8 OL 2.8+
  • 9. Licenses and Copyrights • BSD License • Copyrights to OSGEO • Ext JS Dual Licensing (GPL3 or commercial)
  • 10. Latest News ? • Release 0.6 – More WMS and WFS readers – Synchronized grid & layer selection of features – More Layer Tree options (incl. drag-n-drop) – LegendPanel – Sliders • Roadmap in discussion • .... www.geoext.org
  • 11. The Concept • Ext JS is great for rich web applications, but lacks mapping • OpenLayers is great for maps, but lacks a rich UI • Put the OpenLayers map in an Ext panel • Wrap OpenLayers objects in Ext data components
  • 12. 12 lines of code Create and show a window with a GeoExt.MapPanel
  • 13. About and Around The MapPanel • Content is an OpenLayers.Map • Access layers through a LayerStore • Add button controls through Actions • Add anchored Popup windows • Panel populates a ScaleStore • Panel's items interact with the map (e.g. ZoomSlider)
  • 14. 24 lines of code Add 3 controls to the bottom bar using GeoExt.Action 7+6 lines of code 7 lines of code Pimp the ZoomBar with a Create and show an anchored GeoExt.ZoomSlider GeoExt.Popup window 27 lines of code Show/set scale in a drop-down using GeoExt.ScaleStore
  • 15. Tree View For Layers • Synchronized with map • Control visibility and order of layers (drag & drop) • Group layers with LayerContainers • LayerParamNode for sub-layers (e.g. &LAYERS=sub1,sub2,sub3) • Flexible configuration with Nodes and Loaders, mixable with other content
  • 16. [{ [{ [{ [{ nodeType: „gx_layercontainer“ nodeType: „gx_overlaylayercontainer“ nodeType: „gx_overlaylayercontainer“, "nodeType": "async", }] }, { loader: { "text": "Human", nodeType: „gx_baselayercontainer“ baseAttrs: {radioGroup: "active"} "children": [{ }] } "nodeType": "gx_layer", }, { "layer": "Tasmania Roads" nodeType: „gx_baselayercontainer“ }, { }] "nodeType": "gx_layer", "layer": "Cities" }] With radio buttons }, { "nodeType": "async", "text": "Natural", "children": [{ "nodeType": "gx_layer", GeoExt.tree.OverlayLayerContainer }, { "layer": "Water" GeoExt.tree.BaseLayerContainer "nodeType": "gx_layer", "layer": "Tasmania State Boundaries", "text": "Tasmania Coastline" }] }] Custom groups Custom node text GeoExt.tree.LayerContainer Map with „allOverlays: true“
  • 17. Data Access Components • Treat OpenLayers Formats and objects like Ext JS remote data, using Readers and Stores • The ProtocolProxy wraps OpenLayers Protocols as input for Readers • 2-way synchronization between Stores and OpenLayers objects
  • 18. 4 lines of code Load remote WMS Capabilities into a GeoExt.data.WMSCapabilitiesStore 1 line of code GeoExt.data.LayerStore shared between map and tree node 11 lines of code Copy layer to the map's GeoExt.data.LayerStore
  • 19. 5 lines of code 8 lines of code Get remote features (GeoJSON) GeoExt.data.FeatureStore shared using GeoExt.data.ProtocolProxy between vector layer and grid 1 line of code Selection synchronized between layer and grid using GeoExt.grid.FeatureSelectionModel