Category Archives: OpenSource

GIS Visions 2045

Spatial Interactive

Stanislav Sumbera, GIS Vision 2024, 5.3. 2025,GIS Ostrava 2025

What happens here is more important than what happens now.
Space is naturally interactive, enabling collaboration and sharing.
The computer is not behind a 2D glass screen but understands 3D space and interactions within it.
People learn through observation, collaboration, and play.
Community Computer
Projective Augmented Reality (Projective AR)
Bret Victor – Dynamicland

image sources:https://gislab.utk.edu/tag/ar-sandbox/ , Dyamicland.org, Lightform

HMD / Head-Mounted Displays – Apple Vision Pro
Spatial Computing
Control through advanced gestures
“Super persistence” of objects – digital objects remain anchored as if truly part of the physical world
Pseudo-haptic feedback – realism in rendering creates the illusion of tactile response
Currently at the “UNIX Workstation” stage of the 1980s – showcasing possibilities that will later become accessible to everyone.
Also bloged here

2. Web, Open Source, and Technology Accessibility

From Google Maps → OpenLayers → Leaflet → MapBoxGL → MapLibreGL → ?
Each step represents greater availability, democratization, and accessibility of mapping technology, pushing development forward.
How difficult was it to render an image in 1993? How difficult was it to share that image with others? And today?
What is difficult, expensive, yet possible today that will become commonplace in 20+ years?

3. Lifespan of Data vs. Lifespan of Technology

WMS – Simple for visualization
Vector tiles – More complex to render (OGC API Tiles, MapBox Tiles, MapLibre Tiles – MLT)
3D tiles – OGC 3D Tiles, evolving standards for spatial data
More aesthetics, smoothness, and artistic expression in maps
Real-time rendering techniques, such as Gaussian Splat, for next-generation visualization

from Book: Eneterpise SOA by Krafzig, Banke, Slama

4. Scanning Spaces and Objects

3D scanning is accessible to everyone
Spatial Video, Spatial Photo
3D scanning is as simple as taking a photo
Photorealistic scanning

5.Precise Geolocation ~2-10 cm

VPS (Visual Positioning System) – accuracy < 10 cm
5G geolocation
Affordable high-precision GNSS + RTK/PPP (< 10 cm)
Accessible VPS from panoramic images, Mapy.cz?

6. AI – Welcome to the Jungle

NPCs have become “thinking machines” (are we, on other side, turning into NPCs ourselves? aka Jumanji 2 )

Image from Jumanji 2,driver – Mason Pike ?

The Chinese Room paradox – an English speaker perfectly assembles answers in Chinese following instructions without understanding the Chinese language and symbols meaning.
AI cannot create true originality but excels at combining and compiling existing inputs – a “super plagiarist” or “super puzzle resolver” ?
Might replace a significant amount of human (intellectual + routine) labor – in GIS (georeferencing, recognition/classification), programming/syntax, and more
“Hard work for machines, thinking for people” (Tomáš Baťa) is evolving into “(Pre)thinking* for machines, creativity/ideas for people” (in Czech Language : pre-mýšlení)
AI model marketplace – grow (cultivate) your unique “thought twin” that integrates into an open AI network.
Developer Twin: Blog post

Joy of Open Source

*** update IV/2017: from comment below, check this great raster plug-in from Victor Veralde Gutiérrez too: https://github.com/IHCantabria/Leaflet.CanvasLayer.Field/ ***

I have got great, absolutely amazing joy today from my own open source experiment. In 2014, nearly 2 years ago, I have published on GitHub (gist) L.CanvasOverlay a small class to handle generic drawing on top of Leaflet, I was thinking let’s try to contribute back to the open source with this little snippet – I thought would be useful so I have added little description. Original blog post here: http://blog.sumbera.com/2014/04/20/leaflet-canvas/

After few months later I found it is used on http://windyty.com one of the best 2015 geo-visualization with huge popularity. It is a small part of this great app, but makes me feel so good like I am part of it, I am looking on something where is my small piece, small share…meaning of the effort, sense of publishing and open sourcing.

And today I have got echo it is used also in Marine National Facility here: http://www.cmar.csiro.au/data/underway.test/

This makes me so happy … and just came across this quote : “Revenue is a lagging indicator, usage is a leading indicator,” can’t remember, who just said that ? 🙂

WMS overlay with MapBox-gl-js 0.5.2

Quick and dirty test of the WMS capabilities of the new MapBox-gl-js 0.5.2 API. First of all, yes ! it is possible to overlay (legacy) WMS over the vector WebGL rendered base map … however the way is not straightforward:

Needs some ‘hacks’ as current version of the API doesn’t have enough events to supply custom URL before it is loaded. But check latest version of mapbox, it might have better support for this.
Another issue is that WMS server has to provide HTTP header with Access-Control-Allow-Origin:* to avoid WebGL CORS failure when loading image (gl.texImage2D). Usually WMS servers don’t care about this, as for normal img tags CORS doesn’t apply. Here WebGL has access to raw image data so WMS provider has to explicitly agree with this.
Build process of mapbox-gl-js tend to be as many other large js projects complicated, slow, complex. And specifically on Windows platform it is more difficult to get mapbox-gl-js install and build running then on Mac.

Code is documented to guide you through the process, few highlights:


 // -- rutine originaly found in GlobalMercator.js, simplified
 // -- calculates spherical mercator coordinates from tile coordinates
 function tileBounds(tx, ty, zoom, tileSize) {
    function pixelsToMeters(px, py, zoom) {
     var res = (2 * Math.PI * 6378137 / 256) / Math.pow(2, zoom),
         originShift = 2 * Math.PI * 6378137 / 2,
         x = px * res - originShift,
         y = py * res - originShift;
     return [Math.abs(x), Math.abs(y)];
     };
   var min = pixelsToMeters(tx * tileSize, ty * tileSize, zoom),
         max = pixelsToMeters((tx + 1) * tileSize, (ty + 1) * tileSize, zoom);
return min.concat(max);
}

]

// -- save orig _loadTile function so we can call it later
 // -- there was no good pre-load event at mapbox API to get hooked and patch url
// -- we need to use undocumented _loadTile
 var origFunc = sourceObj._loadTile;
    // -- replace _loadTile with own implementation
 sourceObj._loadTile = function (id) {
    // -- we have to patch sourceObj.url, dirty !
    // -- we basically change url on the fly with correct BBOX coordinates
    // -- and leave rest on original _loadTile processing
     var origUrl =sourceObj.tiles[0]
                      .substring(0,sourceObj.tiles[0].indexOf('&amp;amp;amp;BBOX'));
     var origUrl = origUrl +&amp;quot;&amp;amp;amp;BBOX={mleft},{mbottom},{mright},{mtop}&amp;quot;;
     sourceObj.tiles[0] = patchUrl(id, [origUrl]);
     // -- call original method
     return  origFunc.call(sourceObj, id);
 }

gist available here

demo here (Chrome): https://www.sumbera.com/gist/js/mapbox/index.html

WebGL polyline tessellation with MapBox-GL-JS

update 07/2025: recovered demo here: Demo here: http://www.sumbera.com/gist/js/mapbox/path/index.html

recovered tesspathy demo here: https://www.sumbera.com/gist/js/tesspathy/tessPathyTest.html

update 09/2015 : test of tesspathy.js library here . Other sources to look:

*** original post ***

This post attempted to use pixi.js tessellation of the polyline, this time let’s look on how mapbox-gl-js can do this. In short much more better than pixi.js.

it took slightly more time to get the right routines from mapbox-gl-js and find-out where the tessellation is calculated and drawn. It is actually on two places – in LinBucket.js and in line shader. FireFox shader editor helped a lot to simplify and extract needed calculations and bring it into the JavaScript (for simplification, note however that shader based approach is the right one as you can influence dynamically thickness of lines, while having precaluclated mesh means each time you need to change thickness of line you have to recalculate whol e mesh and update buffers )

// — module require mockups so we can use orig files unmodified
 module = {};
 reqMap = {
‘./elementgroups.js’: ‘ElementGroups’,
‘./buffer.js’ : ‘Buffer’
};
require = function (jsFile) { return eval(reqMap[jsFile]); };

<!-- all mapbox dependency for tesselation of the polyline -->
<script src="http://www.sumbera.com/gist/js/mapbox/pointGeometry.js"></script>
<script src="http://www.sumbera.com/gist/js/mapbox/buffer.js"></script>
<script src="http://www.sumbera.com/gist/js/mapbox/linevertexbuffer.js"></script>
<script src="http://www.sumbera.com/gist/js/mapbox/lineelementbuffer.js"></script>
<script src="http://www.sumbera.com/gist/js/mapbox/elementgroups.js"></script>
<script src="http://www.sumbera.com/gist/js/mapbox/linebucket.js"></script>
<script src="http://www.sumbera.com/gist/data/route.js" charset="utf-8"></script>

 // -- we don't use these buffers, override them later, just set them for addLine func
 var bucket = new LineBucket({}, {
 lineVertex: (LineVertexBuffer.prototype.defaultLength = 16, new LineVertexBuffer()),
 lineElement: (LineElementBuffer.prototype.defaultLength = 16, new LineElementBuffer())
 });

var u_linewidth = { x: 0.00015 };
// override .add to get calculated points
LineVertexBuffer.prototype.add = function (point, extrude, tx, ty, linesofar) {
    point.x = point.x + (u_linewidth.x * LineVertexBuffer.extrudeScale * extrude.x * 0.015873);
    point.y = point.y + (u_linewidth.x * LineVertexBuffer.extrudeScale * extrude.y * 0.015873);
    verts.push( point.x, point.y);
    return this.index;
};

// — pass vertexes into the addLine func that will calculate points
bucket.addLine(rawVerts,“miter”,“butt”,2,1);

prototype code posted here

Data Visualisation with d3.js Cookbook

bought this great book on d3.js (Data-Driven documents), written by Nick Qi Zhu

D3 can plot map in various projections, however do not expect to get same set of (overlapping) functionality as Leaflet or OpenLayers. D3 can extend these mapping frameworks. For OL3 simple example is here for Leaflet, my favourite is hexbins or check my own experiment here.

While D3 is kind of ‘base’ charting library (lot of utility functions, helpers) , there is upper , high level library too that can provide lot of ‘boilerplate’ for common charts. Here comes great news:

Nick Qi Zhu is also author of the open source javascript lib dc.js (Dimensional Charting) library that is using crossfilter (Fast Multidimensional Filtering for Coordinated Views) . Part of the dc.js lib is set of most common charts and one of them is choropleth map .

Other resources:

D3 Animation : http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/

Design selections: http://www.awwwards.com/fresh-ui-inspiration-in-the-era-of-google-material-and-design-patterns.html

Leaflet, WebGL / Canvas tiled vectors

Update June 2014: Simple point WebGL sample is here:

Leaflet WebGL many points rendering

Cool WebGL and Canvas demo of vector drawing in Leaflet 0.8 !
WebGL: http://vector.io/vector-map/

leafletWebGL

Canvas : http://vector.io/vector-map/#canvas

GitHub project: https://github.com/bcamper/vector-map

Leaflet 0.7 vs. OpenLayers 3 beta 1 on iOS

Made quick test of these 2 +1 HTML5 renderers on iOS running inside iOS app in the WebView, that is without Nitro acceleration. All run on iPad Air

Leaflet 0.7 : great , works fine, everywhere, doesn’t load while dragging map (on mobile only) , runs on Microsoft Surface too.

OpenLayers 3 beta 1 : runs fine too, loads map during dragging, seems like smaller framerate, can over zoom OSM, doesn’t run in Microsoft Surface well.

Seznam Mapy Api v 4 – proprietary renderer from Seznam , bad rendering on iOS, missing tiles, nice map sources

Videos and original web pages used: – screencasted by AirPlay – that is directly from iPad Air:

A. Leaflet 0.7 web: http://www.spatialreader.com/lab/ol3vsleaf/leafkatastr.html

B. OpenLayers 3 beta1

web: http://www.spatialreader.com/lab/ol3vsleaf/index.html

C. Mapy Api v 4.8

web: http://www.ikatastr.cz/iKatastrS.htm

OpenLayers or GoogleMap v3 for mobile web app ?

[2014 January] UPDATE : new Openlayers 3 beta 1 works quite well on iPad as well as Laeflet 0.7, check post here http://blog.sumbera.com/2014/01/23/leaflet-0-7-vs-openlayers-3-beta-1-on-ios/

[2011 September] UPDATE : new Openlayers 2.11 works quite well on iPad/iPhone.

I have experimented with OpenLayers 2.9 using touch.js extension for capturing touch events from iPhone/iPad. Although stripped down version of OL is about 184KB, the performance is very bad. If you have iPhone/iPad check this experiment: http://www.sumbera.com/lab/iPhone/katastr.htm (note it will not work from desktop browser)

OL team is working on v3 of OL to be more lighter, faster even for mobile devices, see here: http://trac.osgeo.org/openlayers/wiki/three or here : http://openlayers.org/blog/2010/06/30/openlayers-3-on-github/

Meanwhile I have tested new GoogleMaps v3 how it works on iPhone/iPad. despite few problems (stability, problems with cached tiles or disconnected JavaScirpt to load new tiles -iPad) it works pretty well . Check yourself this page from your mobile touch device (iPhone.iPad,Android): https://ikatastr.cz

Conclusion : Google Maps v3 wins on mobile over the Openlayers 2.9

iKatastr / MapShake

Poznamka 2018: tohle je archivni blog o tom, z ceho vznikl iKatastr – byl to vlastne derivat (vygenerovana mapa) jinak neuspesneho projektu MapShake.cz Screen Shot 2018-10-02 at 6.09.41 PM

iKatastr enables to view cadastral information in Czech Republic and view the owner of the parcel/building. I would like to mention here few technical details – iKatastr is actually less programmed but more configured. iKatastr on mobile uses Universal Map Format that defines the data sources for map composition and the query request when tapping on-screen. iKatastr in web do the same thing, it uses JSON definition to read full map composition. Moreover web version is linked with MapShake where the configuration of the map can be authored, verified, shared with friends and even you can generate your own iKatastr map as HTML page. the map you see on www.ikatastr.cz is the same that is stored on Mapshake here : http://www.mapshake.cz/549-iKatastr . To generate map similar to www.ikatastr.cz you need to press the <html> button in the lower left corner to get this page: http://www.mapshake.cz/mapjs.aspx?i=549 from where you can copy/paste the full JavaScript stack to regenerate map on your side. In the generated map you can also find this linked JavaScript : http://www.mapshake.cz/mi/549.js that is used by www.ikatastr.cz.

So the bottom line is : do not programme, rather generate / configure your maps !

Overlay WMS on Google in OpenLayers

update 07/2025: regenerated broken WMS viewer using ChatGPT , demo here:

https://www.sumbera.com/lab/wms25/wms25.html

[Note: therea are related post: overlyaing tiled WMS over the new Google Map v3 http://blog.sumbera.com/2010/11/02/tiled-wms-overlay-on-google-map-v3/ ]

Is it possible to display WMS (EPSG:4326) over the Google (EPSG:900913) in Openlayers ? Yes ! thanks to the great img ‘feature’ that enables you to shrink/expand your return image based on defined image size. That means that if your map view is rectangular or you request WMS as tiles (rectangular too) you get proper overlay of EPSG:4326 on EPSG:900913) . Example of various image sizes follows (these are actually WMS GetMap requests):

Here is the way how to implement it in OpenLayers – very simplified:

1. read this post http://docs.openlayers.org/library/spherical_mercator.html and create your Google map:

var options = {
projection: new OpenLayers.Projection(“EPSG:900913”),
displayProjection: new OpenLayers.Projection(“EPSG:4326”),
units: “m”,
numZoomLevels: 22,
maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508.34)
};
map = new OpenLayers.Map(‘map’, options);
// create Google Mercator layers
var ghyb = new OpenLayers.Layer.Google(
“Google Hybrid”,
{ type: G_HYBRID_MAP, ‘sphericalMercator’: true }
);

2. add your WMS layer

var gwms = new OpenLayers.Layer.TMS(“SLP”, “http://mapserver-slp.mendelu.cz/cgi-bin/mapserv?map=/var/local/slp/krtinyWMS.map&”,
{
layers: ‘obrys,typologie,hm2003’,
type: ‘png’,
visibility: true,
getURL: get_wms_url,
format: “image/png”,
opacity: 1,
isBaseLayer: false,
deltaX: 0.0013,
deltaY: 0.00058
});

3. include support for reprojection before you include OpenLayers:

4. handle WMS as TMS tiles as this:

function get_wms_url(bounds) {

// recalculate bounds from Google to WGS
var proj = new OpenLayers.Projection(“EPSG:4326”);
bounds.transform(map.getProjectionObject(), proj);

// this is not necessary for most servers display overlay correctly,
//but in my case the WMS has been slightly shifted, so I had to correct this with this delta shift

bounds.left += this.deltaX;
bounds.right += this.deltaX;
bounds.top += this.deltaY;
bounds.bottom += this.deltaY;

//construct WMS request

var url = this.url;
url += “&REQUEST=GetMap”;
url += “&SERVICE=WMS”;
url += “&VERSION=1.1.1”;
url += “&LAYERS=” + this.layers;
url += “&FORMAT=” + this.format;
url += “&TRANSPARENT=TRUE”;
url += “&SRS=” + “EPSG:4326”;
url += “&BBOX=” + bounds.toBBOX();
url += “&WIDTH=” + this.tileSize.w;
url += “&HEIGHT=” + this.tileSize.h;
return url;

}

That is, live example you can see here :

updated 7/2025 here: https://www.sumbera.com/lab/wms25/wms25.html

or in MapShake here : http://www.mapshake.cz/mapfs.aspx?i=464