Category Archives: HTML5

GPU accelerated visual analytics

Recent months I had lot of fun working   on WebGL component called “mGL” for visualizing and filtering large amount of data in the browser. It has been used  for Incident Analyzer and Area Analyzer Smart M.Apps. Here are  2 … Continue reading

Posted in HTML5, UserInterface, WebGL | Tagged , | Leave a comment

SVG fast scaled overlay on Leaflet 1.0 and 0.7

 SVG can be drawn on map in much more faster way than traditional approaches, at least for points. Traditional approach re-position each element to fit into the view of the map, however SVG is “scalable” so we can use it … Continue reading

Posted in Code, D3, Data Visualization, Leaflet, SVG | Tagged , , | 1 Comment

Smart M.App

  Recent months I have been authoring  “Green Space Analyzer” web app that shows modern  approach to visualize and  query   multi temporal geospatial data.  User see information in a form he can interact with and discover new patterns, phenomena or information just by … Continue reading

Posted in D3, Data Visualization, JavaScript, SVG, UserInterface | Tagged , , , | Leave a comment

geojson-vt on leaflet

update Sept 2015: nice explanation of how geojson-vt works here Mapbox technologies used in their webgl and opengl libraries are being extracted into standalone pieces. Vladimir Agafonkin,creator of leaflet.js, earcut.js provided slicing and polygon simplification library for geojson called Goejson-vt.Geojson-vt can … Continue reading

Posted in Canvas, JavaScript, Leaflet | Tagged , , , , | 9 Comments

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: … Continue reading

Posted in Code, JavaScript, MapBox, WebGL | Tagged , , , | 1 Comment

WebGL polyline tessellation with MapBox-GL-JS

update 09/20015 : test of tesspathy.js library here . Other sources to look:  http://mattdesl.svbtle.com/drawing-lines-is-hard  https://github.com/mattdesl/extrude-polyline https://forum.libcinder.org/topic/smooth-thick-lines-using-geometry-shader *** 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 … Continue reading

Posted in Code, MapBox, OpenSource, Uncategorized, WebGL | Tagged , , , , | 2 Comments

WebGL polyline tessellation with pixi.js

update 09/2015  : another triangulation methods (mapbox, tesspathy) mentioned here pixi.js is a 2D open source library for gaming that includes WebGL support for primitives rendering. Why not to utilize it for polyline renderings on map ? It turned out, however, that … Continue reading

Posted in Code, Leaflet, WebGL | Tagged , , , , | Leave a comment

WebGL polygons fill with libtess.js

Update 1.6.2015: geojson-vt seems to do great job in tiling and simplifying polygons. Check this post. Update 18.1.2015: Vladimir Agafonkin from MapBox released earcut.js – very fast and reliable triangulation library. Worth to check. Video available here:     Original … Continue reading

Posted in Code, Data Visualization, Leaflet, WebGL | Tagged , , | 13 Comments

Modern data visualization on map

 For this year HxGN14  conference  I have prepared a web app  of modern data vizualisation, I have got  inspired by great ideas from Victor Bret and his research and talks for general concept (high interactivity, visualization ) of this app. It is … Continue reading

Posted in Canvas, D3, Data Visualization, HTML5, JavaScript, Leaflet, SVG, WebGL | Tagged , , , , | 1 Comment

Leaflet WebGL many points rendering

WebGL is funny – programming in very low level style in JavaScript. This sample plots 86T points using this technology.  .       The code is very straightforward, the only thing is to how points are initially loaded and … Continue reading

Posted in Canvas, Code, HTML5, Leaflet, WebGL | Tagged , , | 10 Comments