-
This project was created by GeoSpinn, a team of MSc (International) Geomatics students
at the Karlsruhe University of Applied Sciences. The task was to create an extension
of the existing turf.js spatial analysis library with additional functionalities that
make it possible to describe a spatial analysis model using a combination of more than
one turf-algorithm, in one step. The application does this by having one button to
run a specific model as though it was a core algorithm of the turf.js library.
The application is based on openlayers 3 and implements the model functionality using
a combination of the following functions: buffer, intersect, union, difference, combine
of turf.js. The web application makes use of a dataset consisting of two layers:
administrative areas of Baden-Wurttemberg and points with radiation.
- 1. Chaitanya Krishna Chirumamilla
- 2. Keneuoe Anne Maliehe
- 3. Shahab Ahmed
- 4. Belayet Mohammad Fuad Amin
Developer of Model Builder Extension for Turf.JS, the Team Members are:
- A series of radiation measurements obtained from different stations distributed all over Germany. Data has been downloaded from the website as (CSV-file). Then this file was added to QGIS (add Delimited text layer) and setting the geographic reference to WGS84. In order to extract one time slice a selection by exrpression was uesd by selecting the radiation measurements at this date (10.12.2015) and time (00:00:00), then the selected data point has been exported as GeoJson.
- Administrative areas of Germany as a shape-file downloaded from BKG. The areas are of the type “MultiPolygons”. QGIS was used to convert the areas to the type “Polygon” then exported to a GeoJson afterwards. Regarding the use of the data, please refer to BKG . © GeoBasis-DE / BKG 2017.
- Administrative areas of Baden-Wurttemberg. Administrative areas of the whole of Germany in the form of a shape-file were downloaded from DIVA-GIS. The areas were of the type “Polygons” and were processed in QGIS. A select by attribute statement was used to isolate only the areas of Baden-Wurttemberg from the dataset. The resultant polygons were then exported as ."geojson. The application uses data of type ".geojson" Regarding the use of the data, please refer to DIVA-GIS.
-
Download the code, then insert it under a localhost / hosted server environment. Make sure
that you have internet connection when you use localhost, because the base layer tiles are
requested from the OpenStreetMap server.
The website used Angular.js routing,
so make sure that you change the base href value to match with your environment's base url.
The default .geojson layers are inside the Data folder. You can add additional layers using the drag and drop functionality.
In case of: localhost/projectname/
<head>
<base href="/projectname/">
</head>
In case of: www.yourdomain.xyz/
<head>
<base href="/">
</head>- 1. Map window: contains the base map and the vector layers
- 2. Layer switcher: helps you to keep track of your layers ( layer-tree )
- 3. Toolbox: contains the available tools
- 5. Modals
<ul>
<li>2.1. Remove layers</li>
<li>2.2. Set visibility</li>
<li>2.3. Layer sorting</li>
<li>2.4. Layer-group sorting</li>
<li>2.5. Downloading the vector layer's source as .geojson</li>
<li>2.6. Set the layers to editable/non-editable</li> <br>
</ul>
<ul>
<li>3.1. Buffer ( point, line, polygon, multipolygon, multilinestring, featurecollection )</li>
<li>3.2. Union ( two or more polygons )</li>
<li>3.3. Within ( finds the points of a seelcted point layer within a polygon/multipolygon )</li>
<li>3.4. Nearest ( finds the nearest point to the selected point )</li>
<li>3.5. Voronoi ( generates voronoi polygons on three or more points )</li>
<li>3.6. Model ( adds the above operations to a toolbox and executes them in one function )</li> <br>
</ul>
<li>4. Model dialogue box</li> <br>
<ul>
<li>4.1. Model title: assign a name for the model</li>
<li>4.2. Model selection: Possibility to choose the model (json format)</li>
<li>4.3 Help tab: user guidelines pertaining to how to create own model and add new layers</li>
<li>4.4. A JSON example tab: user guidelines on how to create a model</li>
<li>4.5. Create: visualise/build the selected model</li>
<li>4.6. Close: close the model dialogue box </li> <br>
</ul>
<ul>
<li>Form validation</li>
<li>Styling</li>
<li>Help box</li>
</ul>
- Angular.js for: routing, template management (directives)
- JQuery for: template management
- JQuery UI for: event based user interface functionalities, for example: draggables, sortables, dialogs
- nestedSortable plugin for jQueryUI for: Tree sorting
- Require.js for: .js codebase management.
- OpenLayers 3 for: layer rendering, core map functionality
- Voronoi
- Turf.js for: geospatial tools
- Spectrum.js for: color picker
- Bootstrap 3 for: layout
-
The buffer polygons created by turf.js are rendered with distortion when the application's
default rendering projection is set to
EPSG:3857,
known as Web Mercartor.
This happens, because the turf.js library calculates only with EPSG:4326 coordinates and does not consider the Earth's curvature when generating the buffer geometry. This results in distorted geometries. The distortion increases with distances from the equator.
Because of that we decided to set the application's default projection to EPSG:4326. In this case the base OSM raster tiles are slightly distorted, but the generated geometries are correct. We made this decision because the aim of the project was the implementation of turf.js for creating correct geometries, and achieving that was more important than the baselayer.
-
Loading of big layers from a folder may take long time, depending on your internet connection.
It happens because that way the page must download the layers from the webserver every time
when you load the page. Please use smaller .geojson files in order to avoid the slow pageloads.
It is possible to fix this effect by implementing a layer loading strategy for the given
map extent. You can do this with for example with WMS services using GeoServer / MapServer
or with direct ajax get requests using GEOPHP + PGSQL. Using them, you have the ability to
create a layer request strategy for the current extent.
-
MIT license: Permission is
hereby granted, free of charge, to any person obtaining a copy of this software and
associated documentation files (the "Software"), to deal in the Software without restriction,
including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.