Recent Developments in
FOSS Web Mapping Applications
Schuyler Erle
Lorenzo Becchi
Presentation Overview
- Brief History of "modern" Web Mapping APIs
- Focus on:
- WPS Web Interfaces
Brief History of "modern" Web Mapping APIs
2005 Feb -> Google Maps
Brief History of "modern" Web Mapping APIs
2005 May -> ka-Map!
Brief History of "modern" Web Mapping APIs
2006 june -> OpenLayers
Brief History of "modern" Web Mapping APIs
Licenses
- Google Maps -> Proprietary license
- Means:
- usage restriction
- change & copy restriction
- re-distribution restriction
- ka-Map! (1)
and OpenLayers (2) -> BSD alike Licenses
- Means:
- no use restriction
- no change & copy restriction
- no re-distribution restriction
- that's Free Software!
ka-Map! - Project Overview 1/2
ka-Map! - Project Overview 2/2
- ka-Map is ...
- a javascript API for rendering fast, tiled maps
- a set of tools for navigating and basic application needs
- a dynamically generated tile caching server
- Its good for ...
- Static base map data with dynamic point overlays
- fixed set of scales
- large maps (full screen)
- dynamically resizeable maps
- Its not good for ...
- dynamically changing base data
- Many separately controllable layers
ka-Map! - Installation and Configuration
- Prerequisites
- web server with PHP support
- functional MapServer installation with PHP/MapScript
- Basic Installation
- extract archive
- configure web server to access htdocs directory
- MS4W installation is simple!
ka-Map! - Using the API
- embed your map in any web page
- can be very simple or very complex
ka-Map! - Using the API: Add scripts ...
ka-Map! - Add a map to the page
- Place a div somewhere in the page:
<div id="mapDiv"></div>
- The id is used to tell ka-Map where to put the map
Mandatory and optional styles
<style type="text/css">
#mapDiv {
position: relative; //or absolute
height: 200px;
background-color: white;
border: 1px solid black;
}
</style>
ka-Map! - Initialize the map
<script type="text/javascript">
var myKaMap;
window.onload=function() {
myKaMap = new kaMap('mapDiv');
myKaMap.server = 'http://localhost/ka-map/htdocs/';
myKaMap.initialize();
}
</script>
ka-Map! - Try it out
ka-Map! - Add navigation controls ...
<script type="text/javascript">
var myKaMap;
var myNav;
window.onload=function() {
myKaMap = new kaMap('mapDiv');
myKaMap.server = 'http://localhost/ka-map/htdocs/';
myKaMap.initialize();
myNav = new kaNavigator(myKaMap);
myNav.activate();
}
</script>
ka-Map! - Try it out
ka-Map! - Interfaces: ka-Explorer
- An advanced pre-cooked interface to use ka-Map API out of the box.
- features:
- Windows application look and feel
- Integrated tools for Query, Search, Print and Permalink
- Basic customization just editing a CSS file:
ka-map/htdocs/tools/kaExplorer/screen.css
- Developed for a FAO project
- example
ka-Map! - Samples: ka-Routing
- Just a prototype:
Features:
- Implements A-star (A*) algorithm
- It's developed over the Orkney's pgRouting module for Postgres
- No node list output yet implemented
- Requires:
- Postgres-PostGis
- the pgRouting (sample) dataset from Orkney PostLBS site
- Read carefully the HOWTO
OpenLayers - Project Overview 1/2
OpenLayers - Project Overview 2/2
- OpenLayers ...
- a javascript API for rendering fast, tiled and untiled maps using external map servers.
- a set of tools for navigating and basic application needs
- an extended javascript API for advanced features as Vector Drawings
- Its good for ...
- fixed set of scales - When connecting to TileServer of ka-Map tile cache servers.
- large maps (full screen)
- dynamically resizeable maps
- Its not good for ...
- huge ammount of layers in different levels.
Installation and Configuration
- Easier then ever:
- no installation, no configuration needed
OpenLayers - Using the API
- embed your map in any web page
- can be very simple or very complex
Using the API: Add scripts ...
OpenLayers - Add a map to the page
- Place a div somewhere in the page:
<div id="map"></div>
- The id is used to tell OpenLayers where to put the map
- Place onload command on body tag
<body onload="init()">
Mandatory and optional styles
<style type="text/css">
#map {
height: 200px;
border: 1px solid white;
}
</style>
OpenLayers - Initialize the map
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
map = new OpenLayers.Map( 'map' );
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.addControl(
new OpenLayers.Control.LayerSwitcher()
);
}
</script>
OpenLayers - Try it out
OpenLayers - Extras
listed here some of the extra features available in OpenLayers code
- Supported layer types:
- Vector drawing library:
OGC: Open Standards and Web Mapping
- International voluntar y consensus standards organization
- Development and implementation of standards for geospatial content and services
- Active Members: 350 (Sep 2007) -> University of Minnesota, US National Oceanic and Atmospheric Administration (NOAA)
Coastal Service Center, ESRI, Autodesk Inc., MIT, . . .
- http://www.opengeospatial.org/
Focus on WPS
Web Processing Service
- Web Service: Software system designed to support interoperable machine-to-machine
interaction over a network (Wikipedia)
- Document OGC 05-007r4, version 0.4.0
- Not yet OGC standard, "Discussion Paper", Draft
- To offer any sort of GIS functionality to clients across a network
XML-based communication protocol
pyWPS
- Implementation OGC's WPS standard (90-95 %)
- CGI Application
- Python programming language
- PyWPS starts as dedicated connector to GRASS
CLI
- GRASS Functionality can be via PyWPS offered in
Internet
- User does not need Desktop-GIS (GRASS, ESRI,
Idrisi, ... ) Ð Web browser becomes GIS
- You can use other CLI-oriented programs
(PROJ.4, GDAL, R, ... )
Web Interfaces for WPS: Embrio and Wuiw
- Embrio
- Technologies: DHTML + AJAX + PHP/Mapscript
- Scope: an interface based on UMN Mapserver Mapscript to access GRASS functions (Mapserver and WPS on the same
server).
- Dev state: beta
- Wuiw
- Tecnologie: DHTML + AJAX
- Scope: an interface as man in the middle between a WPS server and other OWS servers (WCS, WFS) joining remote
resources for data and processing.
- Dev state: alpha
Conclusions
What's next?
- Development, Develoment and Development!
suggestions?
- Join OSGeo community and stay tuned!
Contact
Lorenzo Becchi
- lorenzo@ominiverdi.org
- http://www.ominiverdi.org
- http://blog.ominiverdi.org