Recent Developments in
FOSS Web Mapping Applications

Schuyler Erle

OpenLayers.org

Lorenzo Becchi

Ominiverdi.org

Presentation Overview

Brief History of "modern" Web Mapping APIs

2005 Feb -> Google Maps

Google Maps picture

Brief History of "modern" Web Mapping APIs

2005 May -> ka-Map!

ka-Map picture

Brief History of "modern" Web Mapping APIs

2006 june -> OpenLayers

OpenLayers picture

Brief History of "modern" Web Mapping APIs

Licenses

ka-Map! - Project Overview 1/2

ka-Map! - Project Overview 2/2

ka-Map! - Installation and Configuration

ka-Map! - Using the API

ka-Map! - Using the API: Add scripts ...

ka-Map! - Add a map to the page

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

ka-Map! - Samples: ka-Routing

OpenLayers - Project Overview 1/2

OpenLayers - Project Overview 2/2

Installation and Configuration

OpenLayers - Using the API

Using the API: Add scripts ...

OpenLayers - Add a map to the page

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

OGC: Open Standards and Web Mapping

Focus on WPS

Web Processing Service

pyWPS

Web Interfaces for WPS: Embrio and Wuiw

Embrio in action

Wuiw in action

Conclusions

What's next?

suggestions?

Contact

Lorenzo Becchi
  • lorenzo@ominiverdi.org
  • http://www.ominiverdi.org
  • http://blog.ominiverdi.org