Thematic isolines with turf.js: Webmapping Playground part I

In the next weeks I plan to publish some past and recently made leaflet.js, mapbox.js and carto webmap examples, hosted on uberspace or my Vserver. The maps will show prototypes of different development stages made for test purposes.

As kick off, I show a map created with turf.js, a JavaScript library for „advanced geospatial analysis“.

The map shows isolines of equal rental prices (without service costs) in Berlin. The isolines are generated by a client side processing of approximately 3000 data points (from November 2016). The map legend is still work in progress, in my opinion the making of custom legends in Mapbox.js should be improved (adaptive legends would be great). Watch out, loading the map takes a while, as the size is 5.6 MB. The isolines are rendered from the data points.

The Isolineshave been generated by using the turf.js isoline function: http://turfjs.org/docs.html#isolines

I encountered two major problems in making this web map:

    1. The alignment of the legend was quite troublesome
    2. Processing a huge number of data points with JavaScript on a client can take quite a while

Consider this map as a prototype of what can be done with Turf.js; which in my eyes is a very interesting JavaScript library.

The full screen webmap also can be opened via: http://hatschit.alkaid.uberspace.de/Turf_tin_3000_isolines_colors.html

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.