Last year we were playing around with websockets and we:
“…figured that an interesting use-case would to have a multi-user GIS where you can actually see where the other guy is, what he is seeing and together edit the map; think google-docs for map editing.”
We showed a first version of our application ‘cow’ (concurrent online webgis). Since then we’ve been expanding the possibilities. An obvious one is being able to add, edit and delete objects on the map; symbols, lines and polygons. We created a version where you could mark where the nature fire started with a portable device, that location would be shared over websockets and the nature fire model would calculate the spread of the fire and return the resulting time-polygons to all connected devices.
Another important possibility we explored was connecting Phoenix with websockets. This way you can expand Phoenix’ ‘same place, same time’ multi-user capabilities with ‘different place, same time’ collaboration. This could mean that someone in the field can see the results of discussions around the table as they are drawn into Phoenix on his smartphone or that different groups of experts in different countries all can contribute on the same map using multiple instances of Phoenix. What you see below is a combination of Phoenix with cow’s webviewer on a Windows 8 all-in-one PC, an Android tablet and an Android smartphone.
HTML5 provides the geolocation api. This is commonly used to move the map to the position of the user. Quite a useful feature, but obviously it is not limited to this. I made a quick HTML5 site which will give the height of you location according to the AHN - the dutch height model.
It is very simple: the geolocation API will provide a coordinate and I use that coordinate to do a getfeatureinfo on the AHN-service of EduGIS. To make it slightly more interesting it will show a cow if you’re above sea level, a nice coral reef if below and a foggy picture if the app doesn’t know where you are, or doesn’t have a height for that location.
Obviously this only works for the Netherlands, since the AHN only provides heights for the Netherlands.
You can find your own height here: http://research.geodan.nl/sites/hoogte/
After someone saw my BAG building data movie he asked if it would be possible to create an interactive map of the entire Netherlands. This made me think, since creating the movie was a very time consuming action. The problem is that there are about 6 million buildings in the BAG database. This makes the data a bit unwieldy to use directly in the browser. The old fashioned way to do time series on maps involves creating a new layer for each time-moment (year in this case). This would mean that there would be over 150 layers to be loaded on the map and switching between those for the ‘time sliding’ effect. Apart from the hideous task to set up 150 almost the same layers, it would end up with too much images for a browser to handle.
However modern browsers have the <canvas> element. This element allows for the manipulation of single pixels within this element. So I figured if I could encode the building-dates in a PNG and use canvas to display only those pixels which represent a building older than the given date it should be possible to time-slide through the buildings. Fortunately the fancy new mapping library Leaflet.js has a canvas tile layer build in. The BAG data is already available through EduGIS, so I only needed it to encode the data differently in the PNGs.
The encoding is very simple: per pixel there are 4 values available: red, green, blue and alpha. Since I only needed to encode 200-odd values I used just the red value. The years before 1850 are encoded as groups, since the data is so sparse, after 1850 each year is individually encoded. This means that from 1850 onwards the red value increases with 1. The client retrieves the encoded PNGs as normal tiles and look like this:
The image appears grey because I kept the green and blue values of the PNG the same as the red. This image is loaded into canvas and the imageData is retrieved using ctx.getImageData(0, 0, 256, 256) and stored as a jQuery data object on the canvas. This is important, since for visual effect we will manipulate the imageData on the canvas and we want to keep track of the original values. Once the imageData is attached to the canvas the colors are being calculated. It will take the original values, compares them to the current year and will decide whether or not to show the pixel and in which color.
Since only the grey tile is needed, the actual sliding through time is really fast because it doesn’t need to retrieve more data. With 4 bands of 255 values each you can encode an insane amount of data into a PNG, readily available through canvas for direct manipulation. Apart from time sliding, is detailed representation of DEM data an obvious use case.
Scalable Vector Graphics – the concept has been around for a while (since 2001), but it did not become a popular web format because of lack of browser support. Now that web browsers are getting ready for supporting the host of new features that come along with HTML 5 and CSS 3 we see an increase in support for SVG. Perhaps SVG is now usable enough for geographical vector data? We have done a bit of testing, resulting in two self contained HTML files that a modern web browser can turn in to interactive maps. At the time of writing the examples only work properly in Google Chrome. Here are the files:
An interactive map of Africa: Shows country labels when the mouse pointer hovers over a country and blows up a country after a mouse click.
An interactive map of the World: Shows some country attributes when mouse pointer hovers over a country and allows for zooming and panning.
Both samples have a few things in common:
- The map is always fitted into the available space of the browser window.
- The web page is self contained. It does not make use of external data sources, scripts or libraries. Operating the map does not generate any network traffic.
- CSS is used for styling geometries and for alternative styles when the mouse pointer hovers over a geometry.
I have the feeling that these samples only scratch the surface of what is possible with SVG and CSS. It does seem that the old SVG format, in combination with new web standards like CSS 3 and HTML 5, could very well be used for web mapping. With more and more vector data becoming available on the web, SVG could yet play an important role.