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
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.
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).
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.
Convert Rhino Geometry to GeoJSON Features. Each branch of Grasshopper data will becomes single Feature.
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.
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.
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. 🙂
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.