We are introducing an upcoming set of features that enable Grasshopper users to work with geospatial data and export the project in the GeoJSON format that can be used to generate web maps and other interactive web content. 

In the first part of this introduction / tutorial I will give a brief overview of the new components. In the second part I will present the Mapbox platform, which offers web maps creation trough user-friendly editing interface without the requirement of prior web developement experience.

Research Team: Ondřej Veselý, Martin Bielik, Dr. Reinhard Koenig

You can download an early test release of components used in this article here.

Spatial Reference components|   

Give access to WKT (Well-known-text) definition for any spatial reference system (SRS) your data could use.

EPSG:4326 component provides you with WGS84. This is basicaly the default SRS that you should use for exporting your data as GeoJSON.

Get UTM component gives you UTM system used at the given location. This is the SRS your data were probably reprojected to, if you used plugins like Gismo or Elk2.

Get WKT component queries spatialreference.org for any other arbitrary SRS and gives you the WKT definition.

Reprojection components |   

Use ProjNET and GeoAPI libraries to reproject a set of points / coordinates from one SRS to another.

Transformation component generates a transformation guide that you can use to reproject points from one SRS to another.

Reprojection component transforms coordinates to target SRS using guide from Transformation component.

Source Offset component helps with cases, when your source dataset was translated from it’s original position in it’s respective SRS to Rhino origin point (or any other).

(Both most popuplar plugins for getting geospatial data into Grasshopper – Gismo and Elk2 – are guilty of doing this).

Decompose Extrusion component |  

Helps you preserve 3D geometry, since GeoJSON doesn’t have native support for extrusions or meshes.

Decompose Extrusion takes any breps or meshes and gives you their footprint and z-axis minimums and maximums. You can then export them as polygons with height informaton included as property.

GeoJSON components |  

Convert Rhino Geometry to GeoJSON Features. Each branch of Grasshopper data will becomes single Feature.

Points component converts Points to GeoJSON Point, or MultiPoint if it recieves mutliple objects.

Lines component converts Lines or Curves to GeoJSON LineString, or MultiLineString if it recieves multiple objects.

Polygons component converts Curves to GeoJSON Polygon, or MultiPolygon if it recieves multiple objects. Will create only simple polygons without holes!

Complex Polygons component converts Curves to GeoJSON Polygons. It supports inner holes. First curve in the list will be the exterior curve, the rest will be interior.

GeoJSON Export components |  

Creates a GeoJSON file from your geometry features.

Merge GeoJSON component takes GeoJSON Features or complete FeatureCollections and merges them into single FeatureCollection (always do this before exporting).

Write File component saves a list of strings (texts) into text file on your computer (Therefore it’s use is limited not only to saving GeoJSON).

Uploading to Mapbox

With your geospatial data exported from Grasshopper, next thing you could want is to bring it to the web. Currently there are multiple open projects focused on the issue of Web Mapping (see Leaflet, OpenLayers, Mapnik) that allow you to build your web map application from the ground up, but that could be an overhelming task to anyone without previous knowledge of web development.

For those who are not comfortable around developing apps with JavaScript, I recommend looking into Mapbox. It’s an open source mapping platform, that integrates all the neccesary web technologies into one package. You can control most of the basic aspects of your web map trough Mapbox Studio, a visual interface for managing your geospatial data and controling how exactly will it be displayed to the end-users.

To prepare the data for use in your web map, it has to be first processed into vector tile sets – basically splitting the  data into smaller chunks. Luckily, Mapbox will handle this automaticaly and host your tile sets on their server.

Just upload the GeoJSON file as a new tileset and see for yourself.

Tip: There’s of limit on maximum number of user tile sets used in one map (15).

Try combining your data into single GeoJSON/tileset and then use filters to get specific data sets back. It will also save you time when reuploading updated data later.

To create your own map, you first need to create a new Style – you can also copy one of the exisiting ones. Then add your vector tile data as additional Layers to the Style. You can modify the Layer style properties, ie. colour, stroke witdth etc., directly in the interface and immediatly see the visual changes.

Once you are happy with the result, hit Publish to update the Style and Share to generate a link that anyone can use to view the map.

Done! It was that easy. 🙂

However, if you are interested in adding some interactivity to your model, you will have to get yourself familiar with JavaScript library called Mapbox GL JS.

Mapbox GL JS is a JavaScript library that renders vector tile data from Mapbox to your browser window, but you can also use it to add custom functionality to your web application.

It’s pretty accessible even for first time JavaScript users, since it’s very well documented including many examples for any basic functionality you would like to include.

Congratulations! If you followed trough the steps, your  project should be now ready to be uploaded to web and shared with the rest of the  world!

Below you can explore an example of a project we have published using the methods described.

.

An example of a project exported from Grasshopper using the methods described.

Acknowledgement The project shown in the example above is a result of interdisciplinary international research project done by the students at the Bauhaus-Universität Weimar (BUW).  We are also grateful to the Singapore-ETH Centre teams Multi-Scale Energy Systems for Low Carbon Cities, Engaging Mobility, and Big Data-Informed Urban Design and Governance for contributing their knowledge, experience and time to the design studio.