web based gis and domain model integration 3 10 2008 pieter de graef n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Web based GIS and domain model integration 3/10/2008, Pieter De Graef PowerPoint Presentation
Download Presentation
Web based GIS and domain model integration 3/10/2008, Pieter De Graef

Loading in 2 Seconds...

play fullscreen
1 / 64

Web based GIS and domain model integration 3/10/2008, Pieter De Graef - PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on

Web based GIS and domain model integration 3/10/2008, Pieter De Graef. What is GeoMajas ?. GeoMajas is: a Web Mapping framework based on a Java server and an AJAX/SVG/VML client that supports editing of complex domain objects and geometries and much more…of course. Where to find GeoMajas ?.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Web based GIS and domain model integration 3/10/2008, Pieter De Graef' - archer


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
what is geomajas
What is GeoMajas ?
  • GeoMajas is:
    • a Web Mapping framework
    • based on a Java server
    • and an AJAX/SVG/VML client
    • that supports editing of complex domain objects and geometries
    • and much more…of course
where to find geomajas
Where to find GeoMajas ?
  • http://www.geomajas.org/
    • Check out the source code
    • Build using Maven
    • Import projects into Eclipse
    • Run on your favorite servlet engine
getting started
Getting started
  • Start up eclipse
  • Open the project majas-foss4g
  • Open the folder:majas-foss4g/src/main/webapp/applications/workshop
  • The Ant build file build.xml contains targets for the 5 exercises of this workshop
  • Run the target exercise1:dojo
  • Refresh the project majas-foss4g and start the server
  • Open your Web browser and enter the following URL:http://localhost:8180/majas-foss4g/applications/dojo/html/index.html
exercise 1 the dojo widget system
Exercise 1: the Dojo widget system
  • The following layout appears:
exercise 1 the dojo widget system1
Exercise 1: the Dojo widget system
  • The Dojo widget system offers the following functionality:
    • Different types of layout containers: ContentPane, SplitContainer, AccordeonContainer, TabContainer
    • Different types of widgets: textfield, checkbox, combobox, colorpalette, spinner, calendar, radionbutton, tree,…
    • General event handling mechanism:dojo.connect(source,event,target,function);
    • Widget hierarchy:dojo.declare("myWidget", [dijit._Widget, dijit._Templated, dijit._Container], { templatePath : "path/to/HTML/template"   postCreate : function () {…}}(widgets use HTML templates for their definition)
exercise 1 todos
Exercise 1: todos
  • Open the page html/index.html
  • There are 2 TODOs indicated in the page:
    • Log the id in the closure function by using the built-in log facility:log.info(id);
    • Highlight the widget by changing a style attribute:dijit.byId(id).domNode.style.backgroundColor="blue";
  • Reopen the page in the browser and click on each widget to see the result
exercise 2 helloworld map
Exercise 2: Helloworld map
  • The purpose of this exercise is to demonstrate elementary Majas configuration concepts
  • Serious warning: after running a target for an exercise, your own writings for the previous exercises will be replaced with the solution of those exercises!
  • Select the file applications/workshop/build.xml again, and run the target: exercise2:helloworld
  • Then refresh the majas-foss4g project.
exercise 2 configuration basics
Exercise 2: configuration basics
  • All configuration is done via XML files
  • Full schema validation, schemas are available at …
  • Uses JAXB for generating configuration code
  • Uses XInclude to split up the configuration over multiple files
  • Configuration changes require a restart !
exercise 2 application xml
Exercise 2 : application.xml
  • Contains factory classes for raster and vector layers
  • Refers to the other configuration files:
    • layerTree.xml : configuration of layer tree widget
    • maps.xml : configuration of map widgets
    • toolbar.xml : configuration of toolbar widgets
    • tools.xml : configuration of available tools and actions
exercise 2 adding a raster layer factory
Exercise 2 : adding a raster layer factory
  • Go to directory applications/helloworld
  • Open the file application.xml
  • Insert the following snippet:

<rasterLayerFactory id="osm">

<factoryClass>OSMLayerFactory</factoryClass>

<parameterMap />

</rasterLayerFactory>

  • factoryClass: java class name, must implement LayerFactory interface and create RasterLayer implementation
  • parameterMap: a list of parameters to be passed to the factory constructor (none in this case)
exercise 2 overview of available raster layer factories
Exercise 2 : overview of available raster layer factories
  • GoogleLayerFactory :
    • Google Maps API layer
    • type (normal, satellite,…) determined by layer name (see further)
    • Needs the google maps script and key !
    • Spherical Mercator projection (EPSG:900913)
  • OSMLayerFactory :
    • OpenStreetMap tile layer
    • http://tile.openstreetmap.org/<level>/<x>/<y>.png
    • Spherical Mercator projection (EPSG:900913)
  • WMSLayerFactory :
    • Generic OGC WMS layer
    • <parameter name="baseWMSurl" value="<URL of the WMS server>" />
    • <parameter name="format" value="<format parameter>" />
    • <parameter name="version" value ="<version parameter>" />
    • <parameter name="srs" value ="<SRS parameter>" />
exercise 2 maps xml
Exercise 2: maps.xml
  • Contains the configuration of each map used by this application (usually a main and an overview map)
  • Configurable parts:
    • Layers of the map
    • Layer z-order in the map
    • Layer order in the layer tree
    • Background-color, pan-buttons, scale widget
    • Selection styles for each geometry type (vector layers)
    • Coordinate Reference System (may be different from layer’s CRS !)
    • Maximum scale
    • Initial bounds
    • Discrete map resolutions (optional)
    • Overview map reference (optional, if overview map)
exercise 2 adding a map
Exercise 2 : adding a map
  • Open the file applications/helloworld/maps.xml
  • Perform the following steps:
    • Choose a background color
    • Choose whether you want pan buttons and/or a scalebar
    • Pick your initial bounds, see next slide !
    • Have a look at the layer configuration
exercise 2 adding a map1
Exercise 2 : adding a map

y

(0,20 037 508.34)

Spherical Mercator coordinates (m)

x

(0,0)

(-20 037 508.34, 0)

(20 037 508.34, 0)

(0,-20 037 508.34)

exercise 2 adding a raster layer
Exercise 2: adding a raster layer
  • Open the file layers/osm.xml
  • Perform the following steps:
    • Choose a display name
    • Add the id of the correct raster layer factory
    • Pick an opacity level (opacity is inverse of transparency)
  • How are the resolutions calculated?
    • Resolution (m/pixel) is inverse of scale (pixel/m)
    • Tile is 256 by 256 pixels
    • There are 2n tiles per level, level 0 has 1 tile: the world
    • <distance>/<number of pixels> = (2*20037508.34)/(256*2n)for n=0 to 17
exercise 2 making the first html page ready
Exercise 2: making the first HTML page ready
  • Open the page helloworld/html/index.html
  • Uncomment the load code:
    • By using dojo.addOnLoad() one can execute some custom JavaScript after the dojo widgets are loaded
    • In GeoMajas, we use this to load the map configuration from the server
  • Add the correct Dojo type to the map
    • dojoType="geomajas.widget.MapWidget"
    • This turns the <div> into a GeoMajas map widget
exercise 2 have a look at your map
Exercise 2: have a look at your map!
  • Restart your server, open your browser and go to:
  • http://localhost:8180/majas-foss4g/applications/helloworld/html/
exercise 2 tips and tricks
Exercise 2: tips and tricks
  • You can drag the map to pan (slippy map)
  • You can use the mouse scroller to zoom in and out
  • Optional: If you uncomment the <resolutions> tag in maps.xml and restart the server:
    • the zoom function will now snap to the resolutions in the list, which are these of the tiles
    • The tile images will not be resized, so they should be crystal clear!
exercise 2 adding a toolbar
Exercise 2: adding a toolbar
  • GeoMajas has 2 styles of toolbar buttons:
    • Tools:
      • Can be selected/deselected by clicking
      • Selection will normally put the map in a certain mode by adding a specific controller to the map, deselection will remove it
      • A controller interprets mouse operations in a specific way by e.g. drawing a rectangle and zooming on release
    • Actions:
      • Can be invoked by clicking
      • An action can be almost anything, but usually also involves sending a command to the server
    • Each action or tool has an image and a tooltip
exercise 2 adding a toolbar1
Exercise 2: adding a toolbar
  • Open the file helloworld/toolbar.xml
  • Add one or more toolRef tags after the toolbar separator, one for each tool
  • Open helloworld/html/index.html, and set the dojoType for the toolbar: "geomajas.widget.DynamicToolbar"
  • Restart the server and navigate to http://localhost:8180/majas-foss4g/applications/helloworld/html/
  • Play around with the tools and actions
exercise 2 adding an overview map
Exercise 2: adding an overview map
  • Open the file helloworld/maps.xml
  • Copy the map declaration and:
    • Rename the id to helloOverviewMap
    • Put the id of the main map inside the overview tag:<overview>helloMap</overview>
    • Choose a large enough initial bounds area
  • Restart the server and navigate to http://localhost:8180/majas-foss4g/applications/helloworld/html/
  • See how the main map follows if you drag the blue rectangle!
exercise 3 simple vector map
Exercise 3: Simple vector map
  • The purpose of this exercise is to demonstrate the vector layer capabilities of GeoMajas
  • We will also demonstrate some extra widgets:
    • LayerTree widget
    • Legend widget
    • FeatureListTable widget
    • SearchTable widget
    • Style widgets
  • Open the file applications/workshop/build.xml
  • First we run the target exercise3:simplevectors
  • Refresh the majas-foss4g project!
  • Go to applications/simplevectors
exercise 3 adding a vector layer model factory
Exercise 3 : adding a vector layer model factory
  • Open the file simplevectors/application.xml
  • Insert the following snippet:

<layerModelFactory id="worldShape">

<factoryClass>ShapeInMemLayerModelFactory</factoryClass>

<parameterMap>

<parameter name="url" value="file:shapes/countries_world/world_adm0.shp" />

</parameterMap>

</layerModelFactory>

  • factoryClass: java class name, must implement LayerFactory interface and create VectorLayer implementation
  • parameterMap: a list of parameters to be passed to the factory constructor (none in this case)
exercise 3 overview of available layer model factories
Exercise 3: overview of available layer model factories
  • GeotoolsLayerModelFactory:
    • wraps a Geotools datastore
    • parameters are the same as for the datastore (see geotools doc)
  • HibernateLayerModelFactory:
    • uses hibernate to map a layer of POJO objects to a geodatabase
    • no parameters, configuration read from standard hibernate.cfg.xml
  • ShapeInMemLayerModelFactory:
    • an in-memory layer model, initially based on a shape file
    • <parameter name="url" value="file:shapes/world/world.shp" />
    • (the url path is relative to application.xml folder in this case)
  • WKTLayerModelFactory:
    • layer model based on a WKT (Well-known-Text) text file
    • no parameters
  • MaxCoordSimplifierLayerModelFactory:
    • wraps an existing factory and simplifies its geometries
    • <parameter name="delegate-factory" value="ShapeInMemLayerModelFactory" />
    • <parameter name="url" value="file:shapes/world/world.shp" />
    • <parameter name="distance-tolerance" value="0.01" />
    • <parameter name="maximum-coordinates" value="1000" />
exercise 3 adding a layer tree
Exercise 3: adding a layer tree
  • Now open simplevectors/maps.xml
  • What we have to do here, is to add the new world shapefile to the layerconfiguration.
    • Include the layers/countries_world.xml (layer config)
    • Include the layer in the mapOrder
    • Include the layer in the LayerTree order
  • To find the ID of the world layer, open it’s XML configuration file: layers/countries_world.xml
exercise 3 adding a layer tree1
Exercise 3: adding a layer tree
  • Open the file simplevectors/html/index.html
    • Add the layer tree to the page by adding the correct dojoType ("geomajas.widget.LayerTree")
  • Restart the server and navigate to: http://localhost:8180/majas-foss4g/applications/simplevectors/html/index.html
exercise 3
Exercise 3:

visibility

zoom to South-Africa to see some featuresand test new toolbar buttons !

labeling

exercise 3 adding a legend
Exercise 3: adding a legend
  • The legend widget will show a symbol for all the styles of all the visible vectorlayers
  • Open the file simplevectors/html/index.html
    • Add the legend underneath the layer tree with the indicated width and heigth
    • Put the following code snippet in the postConfiguration() function to connect the legend to its map:

var legend = dijit.byId("mainLegend");

var mapWidget = dijit.byId("mainMap");

legend.setMapModel(mapWidget.getMapModel());

    • Remark: the postConfiguration() can be used to execute some JavaScript after the GeoMajas configuration!
  • Refresh the browser page: http://localhost:8180/majas-foss4g/applications/simplevectors/html/index.html
exercise 3 styles and filtering
Exercise 3: styles and filtering
  • Open the file layers/countries_world.xml
  • The styles are defined at the bottom, in the <styleDef> tag
  • For each style, there is:
    • The name that will appear in the legend
    • The filter formula to determine on which features the style should be applied
    • The style parameters: fill color, fill opacity, stroke color, stroke opacity and stroke width
  • Change the style definition for south africa, restart the server and see how it looks !
exercise 3 styles and tables
Exercise 3: styles and tables
  • Navigate to: http://localhost:8180/majas-foss4g/applications/simplevectors/html/more.html
  • Notice the layout has changed completely
  • At the bottom you will see 2 tabs. One empty and one containing a FontStyleWidget.
    • The font style widget can be used to change the style of the labeling
    • Turn on the labels for Africa, and fool around with the style.
exercise 3 adjusting layer tree
Exercise 3: Adjusting layer tree
  • What still needs to be done, is to determine the tools and actions for the selected layer that are shown at the top:
exercise 3 predefined actions tools for the layer tree
Exercise 3: predefined actions/tools for the layer tree
  • Actions
    • ShowTableAction : shows a featurelist table
    • RefreshLayerAction : refreshes the layer
  • Tools
    • LayerVisibleTool : makes the layer visible/invisible
    • LayerLabeledTool : shows/hides labels of features
    • LayerSnappableTool : makes features snappable or not
exercise 3 predefined actions tools for the layer tree1
Exercise 3: predefined actions/tools for the layer tree
  • Open the simplevectors/layertree.xml
  • Add a tool action to the list:
    • ShowTableAction
exercise 3 adding a feature list table
Exercise 3: adding a feature list table
  • Open the file simplevectors/html/more.html
  • Add the feature list table by inserting the following piece of xml:

<div id="mainTable" dojoType="geomajas.widget.FeatureListTable" supportEditing=false style="width: 100%; height: 100%; border: 0px solid #888;"></div>

  • Restart the server and navigate to http://localhost:8180/majas-foss4g/applications/simplevectors/html/more.html
exercise 4 openstreetmap and complex domain modeling
Exercise 4: OpenStreetMap and complex domain modeling
  • The purpose of this exercise is to demonstrate complex domain modelling with GeoMajas
  • An OpenStreetMap dataset has been copied to your local PostGIS database to serve as a simple domain model
  • In this exercise you will work on the Java mapping via HibernateSpatial to set up an editable map
  • First we run the target exercise4:osm
  • Refresh the majas-foss4g project.
exercise 4 geomajas complex domain modeling
Exercise 4: GeoMajas complex domain modeling
  • Starts from annotated Java classes and database schema
  • Uses Hibernate(Spatial) to manage the O/R mapping
  • Has support for many-to-one, one-to-many, many-to-many relationships
  • Uses metadata FeatureModel for feature access, e.g. translating back-and-forth to JSON
    • Primitive attributes
    • Association attributes
exercise 4 open streetmap data model subset
Exercise 4: Open StreetMap data model (subset)

k="oneway" v="yes“

k="created_by" v="Potlatch 0.8c“

Node =

+ set of tags

+ set of tags

or

Way =

exercise 4 osm database schema
Exercise 4: OSM database schema

many-to-one

one-to-many

exercise 4 osm java classes
Exercise 4: OSM Java classes
  • Many-to-One association:

@ManyToOne(cascade = { CascadeType.PERSIST, CascadeType.MERGE })

@JoinColumn(name = "user_id")

private User user;

    • @join-column: refers to foreign key column
    • cascade: determines what happens if the many-side is persisted: in this case the user will be added too if he/she is new (PERSIST) or updated if he/she already existed but has some properties changed, e.g. the name (MERGE)
exercise 4 osm java classes1
Exercise 4: OSM Java classes
  • One-to-Many association:

@OneToMany(mappedBy = "way", fetch = FetchType.EAGER, cascade={CascadeType.ALL})

@org.hibernate.annotations.Cascade(value = {

org.hibernate.annotations.CascadeType.ALL,

org.hibernate.annotations.CascadeType.DELETE_ORPHAN })

private List<WayTag> tags = new ArrayList<WayTag>();

  • mappedBy : makes the many-side responsible for mapping the relationship
  • fetch : determines fetch type, EAGER means fetch immediately
  • cascade : determines what happens if the one-side is persisted: in this case new tags will be added, updated tags will be updated (ALL) and missing (orphaned) tags will be deleted (DELETE_ORPHAN)
exercise 4 add an attribute
Exercise 4: Add an attribute
  • Open osm/layers/ways.xml
  • Add the timestamp attribute to the list:

<attribute>

<label>Creation Date</label>

<name>timestamp</name>

<editable>true</editable>

<identifying>true</identifying>

<type>date</type>

</attribute>

exercise 4 osm editing
Exercise 4: OSM editing
  • Restart the server and navigate to http://localhost:8180/majas-foss4g/applications/osm/html/index.html
  • Open the featurelist table by selecting the Ways layer and clicking on the table icon
  • Double-click on a row of the table to open the editing dialog
  • Edit different types of data:
    • Timestamp property : date primitive
    • User property : many-to-one
    • Tags property : one-to-many
exercise 4 add constraints
Exercise 4: Add constraints
  • Open osm/layers/ways.xml
  • Find the timestamp attribute in the attribute list, and add a validator after the <type>-tag:

<validator>

<constraints>{min:'2004-01-01', max:'2008-12-31'}</constraints>

<required>true</required>

<promptMessage>Creation date.</promptMessage>

<invalidMessage>The required date format is "dd/MM/yyyy".</invalidMessage>

<rangeMessage>Range: between 01/01/2004 and 31/12/2008.</rangeMessage>

</validator>

exercise 4 constraint test
Exercise 4: Constraint test
  • Restart the server and navigate to http://localhost:8180/majas-foss4g/applications/osm/html/index.html
  • Open the featurelist table by selecting the Ways layer and clicking on the table icon
  • Double-click on a row of the table to open the editing dialog
  • Try to fool around with the date
exercise 5 creating buffers
Exercise 5: Creating buffers
  • How to create and display a buffer around a selection of lines.
  • This problem can be subdivided into many smaller problems:
      • How to get the selected features, and more importantly, their geometries?
      • Since buffer calculation is very heavy, how can we let the server do this for us?
      • How can we show the resulting geometry on the map?
exercise 5 creating buffers1
Exercise 5: Creating buffers
  • Starting point: a layer with lines:
  • Line-layer: Streets of Washington
  • layerType = 3 (LineString)
  • Run target exercise5: advanced
  • Refresh the majas-foss4g project.
  • Location:

http://localhost:8080/majas-foss4g/applications/advanced/html/index.html

exercise 5 creating buffers2
Exercise 5: Creating buffers
  • Todo:
    • Look for selection. If there is no selection in the linelayer, return an error message.
    • If there are streets selected, calculate a buffer around them.
    • Problem: calculating a buffer around multiple lines, will require us to make a union first and then calculate the buffer. This is too heavy a calculation to be done in Javascript. We must let the server calculate this!
    • So we need communication between client and server.
    • Last but not least the result must be rendered. Problem: the streets were stored in lonlat. So we receive a lonlat geometry as buffer on the client => we must first transform this to screenspace!
exercise 5 creating buffers3
Exercise 5: Creating buffers
  • When the exercise starts, you can see 2 buttons and a textbox at the bottom:
  • Press the « Create Buffer » button and see what happens.
  • A rectangle is drawn! This has nothing to do with current selection.
exercise 5 creating buffers4
Exercise 5: Creating buffers
  • Open advanced/html/index.html
  • When looking at the code, we see:

// Execute the command for buffer calculation:

var command = new JsonCommand("org.geomajas.foss4g.command.CreateBufferCommand", null, false);

command.addParam("distance", distance);

command.addParam("streets", selStreets);

var deferred = majasConfig["dispatcher"].execute(command);

deferred.addCallback(bufferCallback);

  • This executes the CreateBufferCommand
exercise 5 creating buffers5
Exercise 5: Creating buffers
  • How a command works:
  • We must fill in the exact Java classname!
  • Add params, with names for which setters can be found in the Javaclass. Example:
  • addParam(‘distance’) results on the server in the setter ‘setDistance’.
  • Last line connects a callback function that will handle the command’s result.
exercise 5 creating buffers6
Exercise 5: Creating buffers
  • Open the CreateBufferCommand in Java Resources (src/main/java) ("org.geomajas.foss4g.command.CreateBufferCommand")
  • Look at the required fields:

private LineString[] streets;

privatefloat distance;

  • Apparently we need to pass the buffer distance as a float, and an array of LineString objects. (the selected streets)
  • Next take a look at the «execute» function.
exercise 5 creating buffers7
Exercise 5: Creating buffers
  • We see the part that writes out the rectangle:

// TODO: Temporary buffer, a rectangle - Remove this:

GeometryFactory factory = new GeometryFactory();

LinearRing shell = factory.createLinearRing(new Coordinate[] {

new Coordinate(100, 100), new Coordinate(400, 100),

new Coordinate(400, 300), new Coordinate(100, 300),

new Coordinate(100, 100) });

temp = factory.createPolygon(shell, null);

// Remove until here.

  • Since this is not correct, we should replace it with the loop above it:
exercise 5 creating buffers8
Exercise 5: Creating buffers

for (int i = 0; i < streets.length; i++) {

LineString street = streets[i];

if (temp == null) {

temp = street;

} else {

temp = temp.union(street);

}

}

  • What this does, is create the union of all the LineStrings that have reached the server.
  • Restart the server, and check again.

http://localhost:8080/majas-foss4g/applications/advanced/html/index.html

exercise 5 creating buffers9
Exercise 5: Creating buffers
  • We create a buffer again:
  • An empty array? Let’s see the Javascript again! An empty array?
  • Indeed command.addParam("streets", selStreets);sends an empty array. We need to find the selection!
exercise 5 creating buffers10
Exercise 5: Creating buffers
  • Check if there actually is a selection:
  • Find this line:

// TODO: check if there actualy is a selection!

  • And replace it with:

var streetLayer = mapWidget.getMapModel().getLayerById("mainMap.streets");

if (streetLayer.getSelectionStore().getElementCount() == 0) {

alert("There are no streets selected!");

return;

}

exercise 5 creating buffers11
Exercise 5: Creating buffers
  • Now fill the array with the geometries belonging to the selected features:
  • Find this line:

// TODO: fill the "selStreets" array with LineStrings.

  • And replace it with:

var selected = streetLayer.getSelectionStore().getElements();

var keys = selected.getKeyList();

for (var i=0; i<keys.length; i++) {

var street = selected.item(keys[i]);

selStreets.push(street.getGeometry());

}

  • Selected is a dictionary, with the feature’s ID as key.
exercise 5 creating buffers12
Exercise 5: Creating buffers
  • If we now check again, we should see the buffer right?
  • Wrong! Something is still missing. What?
exercise 5 creating buffers13
Exercise 5: Creating buffers
  • Transformation from world to view!
  • Find the following line:

// TODO: Something is missing here!

  • And replace it with:

var transformer = new WorldViewTransformation(mapWidget.getMapView());

geometry = transformer.worldGeometryToView(geometry);

  • Let’s try again!

http://localhost:8080/majas-foss4g/applications/advanced/html/index.html

the end
The end!
  • Thank you for your attention!
  • Visit us at http://www.geomajas.org/