ka-Map Workshop

Paul Spencer

DM Solutions Group

Lorenzo Becchi

Ominiverdi.org

Presentation Overview

  • Project Overview
  • Introduction
    • Installation and Configuration
    • Map File Configuration
    • Exploring ka-Explorer
  • Using the API in Your Own Interface
  • Mashups with ka-Map
  • ka-Map extras
    • Adding Objects
    • Tooltips
    • XML Overlay
    • WFS points
    • ka-Routing
    • GRASS integration (Embrio)
  • Q & A

Project Overview

Project Overview

Supported Browsers

Browser Windows Linux Mac OS X
Internet Explorer yes (6, 7) - -
Mozilla/Firefox yes (1.0+) yes (1.0+) yes (1.0+)
Netscape yes (7+) yes (7+) yes (7+)
Epiphany - yes -
Opera yes (7+) yes (7+) yes (7+)
Konqueror - no -
Safari ? - yes

Project Overview

Installation and Configuration

Main Configuration

/var/www/localhost/htdocs/ka-map/include/config.php

Adding Maps

Troubleshooting

Troubleshooting

Map File Configuration

Map File GROUPs

Edit gmap75 GROUPs

MAP level Metadata

LAYER level Metadata

LAYER level Metadata experiments

"tile_source" ["auto" | "cache" | "redraw" | "nocache"]

auto (default if not set)
let tile.php decide whether or not to render a new tile
cache
If you have pre-rendered all your tiles, you can specify "cache" to have tiles requested from the cache directly - this requires that you also specify a web accessible path to your cache in config.php
redraw
Causes tiles to be re-requested by the client based on redraw_interval. Currency of data is affected by refresh_interval

"tile_source" ["auto" | "cache" | "redraw" | "nocache"]

nocache
The "nocache" option has two effects: it redraws tiles without using the cache and without creating larger metatiles, and it uses MapServer CGI style replacement variables. To specify values for variable replacement on the client side, add a replacementVariables object to your JavaScript _layer object (e.g. myLayer.replacementVariables = {key1: 'value1', key2: 'value2'}). Variable replacement currently works for layer->data, layer->connection, layer->filter, and for class->expression.

"refresh_interval" and "redraw_interval"

redraw_interval
the interval, in seconds, at which the data in the cache is considered to be stale. When the ka-Map client requests tiles and the tile source is set to redraw, it will pass the current timestamp for the entire layer/group and the redraw interval.
refresh_interval
the interval at which the layer/group should be automatically refreshed by the client. If not specified or <=0, the layer/group will not be automatically refreshed. This is most effective when combined with tile_source "redraw" or tile_source "nocache" for periodically changing data.

Exploring ka-Explorer

Using the API

Getting Started ...

Add scripts ...

Add a map to the page

Mandatory and optional styles for the map

<style type="text/css">
#mapDiv {
    position: relative; //or absolute
    height: 200px;
    background-color:  white;
    border: 1px solid black;
}
</style>

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>

Try it out

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>

Try it out

Adding a Point

Add a canvas to draw the point on

<script type="text/javascript">
var myKaMap;
var myNav;
var myCanvas;

window.onload=function() {
    myKaMap = new kaMap('mapDiv');
    myKaMap.server = 'http://www.ominiverdi.org/ka-map/ka-map/htdocs/';
    myKaMap.initialize();
    
    myNav = new kaNavigator(myKaMap);
    myNav.activate();
    myCanvas = myKaMap.createDrawingCanvas(1000);
}
</script>

Add zoomToDMSG function

function zoomToDMSG() {
    var lon = -75.726061;//1509106.04; 
    var lat = 45.401306;//-172671.12;

    var img = document.createElement('img');
    img.src = 'http://www.ominiverdi.org/ka-map/ka-map/htdocs/images/kamap.gif';
    img.width = 36;
    img.height = 42;

    myKaMap.addObjectGeo(myCanvas, lon, lat, img);
    myKaMap.zoomTo(lon, lat, 10000000);
}

Try it out

Mashups with ka-Map

Extras

Adding Objects 1/2

An Object can be whatever HTML element we want to add to the map, ex: image, textbox, ecc.

Adding Objects 2/2

Tooltips 1/2

The tooltip is a common graphical user interface element. The user hovers the cursor over an item and a small box appears with supplementary information regarding the item being hovered over (extract from Wikipedia)

Tooltips 2/2

XML Overlays

XML Overlays drawing points

XML Overlays drawing lines

XML Overlays drawing polygons

WFS POINTS 1/2

WFS POINTS 2/2

ka-Routing

GRASS integration: PyWPS

GRASS integration: Embrio

Embrio is web interface to access GRASS commands. It uses php/mapscript to manage maps, data and WPS connections.

Q & A

Creative Commons License

Creative Commons Deed

Attribution-NonCommercial-ShareAlike 2.5

You are free:

  • to copy, distribute, display, and perform the work
  • to make derivative works

Under the following conditions:

by
Attribution. You must attribute the work in the manner specified by the author or licensor.
nc
Noncommercial. You may not use this work for commercial purposes.
sa
Share Alike. If you alter, transform, or build upon this work, you may distribute the resulting work only under a license identical to this one.
  • For any reuse or distribution, you must make clear to others the license terms of this work.
  • Any of these conditions can be waived if you get permission from the copyright holder.

Your fair use and other rights are in no way affected by the above.

This is a human-readable summary of the Legal Code (the full license).

 

Learn how to distribute your work using this license