Spatial Resilience Towards Flooding Hazards

Spatial Resilience Towards Flooding Hazards

Urban development projects in flood-prone areas are usually complex tasks where failures can cause disastrous outcomes. To tackle this problem, we introduce a toolbox (Spatial Resilience Toolbox – Flooding, short: SRTF) to integrate flooding related aspects into the planning process. This so-called toolbox enables stakeholders to assess risks, evaluate designs and identify possible mitigations of flood-related causes within the planning software environment Rhinoceros 3D and Grasshopper. This states a convenient approach to integrating flooding simulation and analysis at various scales and abstractions into the planning process. The toolbox conducts physically based simulations to give the user feedback about the current state of flooding resilience within an urban fabric. It is possible to evaluate existing structures, ongoing developments as well as future plans. The toolbox is designed to handle structures on a building scale as well as entire neighborhood developments or cities. Urban designers can optimize the spatial layout according to flood resilience in an early phase of the planning process. In this way, the toolbox can help to minimize the risk of flooding and simultaneously reduces the cost arising from the implementation and maintenance of drainage infrastructure.

Research Team: Julius Morschek (contact author)Reinhard Koenig (contact author) and Sven Schneider 



This page contains accompanying material for the SimAUD 2019 conference paper “An integrated urban planning and simulation method to enforce spatial resilience towards flooding hazards“.

Presentation at SimAUD conference, Georgia Tech, Atlanta GA, April 2019


The rain runoff simulation is conducted with the help of the interactive physics/constraint solver Kangaroo for Grasshopper by Daniel Piker. The toolbox can represent a rainfall event by equipping particles with a certain mass and gravitation force. During the simulation, the particles are attracted by the external gravitational force, which results in runoff. Thereby, the particles search for ways downwards comparable to rain runoff. They behave as spherules running off the 3D geometry.


The second simulation the toolbox is capable of is the tidal and river flooding simulation. It illustrates and evaluates the impact of different water levels in the area. To measure the inundation, a plane is moved from a given altitude up to a predetermined value. The plane is considered as the surface area of a river, lake or the sea. To get precise information about which part of the geometry is flooded, the toolbox calculates the intersection between the plane and the surroundings.


The SRTF provides information about the status of flooding-resilience for urban inundation, tidal and river flooding. The rain-runoff simulation provides information about the status of inundation and the level of erosion in the area.

The risk assessment of the rain runoff inundation is conducted based on the location of each particle after the simulation. The toolbox counts the number of particles that are in a specific range within every building. The range is set to two meters by default. This allows compromising the rating of a building in a negative way when it is surrounded by water under pressure. The value of the range distinguishes water that is running along the housing units from water that accumulates and pushes against buildings. Then the number is divided by the footprint area of each building. The higher the value the greater the risk of damages through flooding. This means that the density of particles near or at the buildings is responsible for the outcome of the evaluation. Buildings with a high risk of inundation are always characterized by an accumulation of particles nearby. The street network is treated similarly. Each street is further divided into segments at junctions or bends. Then the number of particles measured that are within a specific range near each street segment. The value is the same that is used for the housing units. The number is then divided by the area of the range. Now each building and each street segment is assigned with specific risk value. The information is visualized with color gradation in the viewport.


With the outcome of the rain runoff simulation, one can also conduct the rain-runoff erosion risk evaluation. Hereby the path of each particle is used to evaluate the runoff erosion risk. This helps to mitigate fast runoff and therefore the risk of damages caused by erosion, debris, and landslides. Urban planners can take this information into account when developing buildings, neighborhoods or cities. The toolbox visualizes the evaluation by means of the flow paths. Combined with the description of the velocity the user gets profound data for the area. The first concept seems to perform better because the affected area is smaller. But as it is visible in, the runoff in the east gets slowed down by the green space in front of the houses. That means that the buildings are not harmed by the debris. By contrast, in the first proposal, the overall area at risk is less but the buildings that are affected are hit directly by the fast runoff. 


The figures above depict the outcome of the tidal & river flooding simulation. The legend in the left bottom corner states, that the first concept hosts its housing units in a way that during a high tide of 8 meters, there are 32 buildings flooded. At the same water level, there are only 25 buildings at stake in the second concept. This means that 7 homes can be saved from severe damages due to flooding by changing the spatial layout. 

During the simulation, the risk assessment for the houses and the street network is presented. When the water level reaches the top of a platform of a building, it is marked with a red color. The toolbox applies a darker tone of red according to the depth of water. The depth is computed by iteration so each frame represents a depth of eight centimeters. It counts the number of iterations after a building is considered as flooded. In this case, the water levels that are deeper than 24 centimeters are considered equal. The values can be adjusted as needed. For this case study, the value is set to balance imprecisions and to match the threshold of lasting damages. The same methodology for assessing the risk applies to the city network. Hereby the lowest point of the street segment is evaluated. When the water reaches it, it is marked with a red color in the same manner as the risk assessment for the buildings.


The last part of the evaluation phase is called the mean risk assessment. It is related to the tidal and river flooding simulation and gives an understanding of the risk distribution in the area. Whereas the prior evaluation is useful for evaluating the site for specific water levels, the mean risk assessment shows the risk of all scenarios combined. In this case, every single state of the tidal and river flooding simulation is recorded to compute the mean value. The toolbox then colors all affected buildings and street segments according to its mean associated risk from low to high. 

The mean risk assessment provides useful information about locations that are not endangered by flooding and therefore suitable for e.g. housing units. Alongside comes the ability to divide a plot into parcels with different functions. For example, locations with a high risk of inundation are not suitable for housing or commercial estates but rather can be used for green spaces or public spaces with mobile structures such as markets.


Based on the evaluation of the two proposals, we prepared a third concept with minimal interventions. The result is proposal 3 and can be seen in the figure above. Now there are three ditches aligned downwards to control the runoff. Two are located in those areas where there were strong accumulations visible in the rain runoff inundation evaluation of proposal 2. One is in the north and one is in the eastern part of the region. Both ditches were trenched into the ground and both reach down to the shoreline. The third ditch is situated at the western border of the third district. Besides that, there is now a bridge over the ditch, connecting the second district with the surroundings. The third measurement is forestation in those areas where the risk of erosion is particularly high. The trees are illustrated as green dots in the viewport. Lastly, we elevated the living quarters of the Rubahs that are affected by tidal and river flooding. 

The significant change of the rain runoff inundation evaluation is the reduction of affected Rubahs by more than 50 percent. The rain runoff erosion evaluation shows significant changes as well. Due to forestation, the endangered area is decreased to 0.38 hectares. Regarding the tidal and river evaluation, the third proposal performs better as well. The number of homes vulnerable to flooding decreased by 20. The legend of figure 21 states, that there are still two Rubahs in the north with a mean risk value of over 50 percent.

Download the Rhino3D/Grasshopper Source Files

Please enter a password to see the content:

Wrong password, please try again
Discovering Cities Workshop | Amman

Discovering Cities Workshop | Amman

Hosted by: German Jordanian University, SABE (Amman, Jordan)
Funded by: DAAD

Locating and dimensioning spatial objects and with it the creation of spaces is at the heart of urban design. Thereby it is necessary to precast the effects that design decisions have on the behavior of the future users as well as to estimate the sustainability and resilience of the city. Computational analysis methods can help to support this process due to the fact that they can reveal properties that are hardly recognizable at first intuitive sight.

This workshop is a part of 10 days excursion in the city of Amman, Jordan. It will be the final stage of a seminar to learn and apply methods for the quantitative analysis of urban space (such as density, accessibility, visibility) and examine in how far these quantities relate to real life phenomena such as the spatial configuration of economical activities in a city or the movement patterns of urban users.

The seminar is part of an ongoing DAAD-funded project on discovering urban social and spatial patterns of Islamic cities and fostering exchange between German and Jordan academics in the field of urban planning.


Workshop files

Jabal Al Hussain | model

Simplified street network and building footprints for Jabal Al Husain neighborhood.


Palestinian refugee camp

  • Pedestrian street network
  • Car street network
  • Building footprints

Jordanian old district

  • Pedestrian street network
  • Car street network
  • Building footprints

Download Rhino file

Building coverage Density | script

Building coverage density is a measure of the relationship between built area (B) and area of the plan (A). It identifies how developed an area is along a scale of zero (no development) to one (the whole area is occupied by buildings).

This script measures the distribution of building coverage density through out the space and map the results on a grid. The plan area (A) in this script is defined as circular radius with flexible diameter parameter. The setting of the diameter influence if the density captures just close surrounding area of given location or larger neighborhood.

Download Grasshopper file

Street Network Centrality | script

Centrality measures for the street network in pedestrian radius of 600m and global car radius Rn. The analysis is calculated for Jordanian neighborhood alone and combined with the refugee camp

Centrality measures:

  • Closeness (integration) R600, Rn
  • Betweenness (choice) R600, Rn

Download Grasshopper file

Behaviour vs. Centrality | script

In this script you can link the empirical countings to the street network centrality and visualize the relationship between those two variables.The strong relationship suggest that the countings are influenced by the street network configuration. if not, they are independent.

Download Grasshopper file

eCAADe2018 Workshop | Urban Analysis, Synthesis and Exploration with Grasshopper

eCAADe2018 Workshop | Urban Analysis, Synthesis and Exploration with Grasshopper

DeCodingSpaces workshop on Urban Analysis, Synthesis and Design Exploration in Grasshopper hosted by: eCAADe2018, Poland – Łódź, 18.September 2018

In this workshop, you will learn how to generate urban fabric variants, perform quantitative analysis on it, as well as optimize the generated variants and expore the cooresponding solution space. For this purpose you will be introduced to various components from the DeCodingSpaces Toolbox for Rhino/GH. You will learn how to analyse Street Networks effectively to compute real life phenomena such as the distribution of functions in a city or the movement patterns of citizens. Moreover, you will be introduced to the various methods for the synthesis of urban morphology (street networks, plots, and buildings) and how they connect to the analysis methods. Finally, you will also be introduced to design space exploration tool for beeing able to compare the generated solution systematically. The presented DeCodingSpaces-Toolbox for Grasshopper is a collection of analytical and generative components for algorithmic architectural and urban planning. The toolbox is free software released by the Computational Planning Group (CPlan). It integrates established urban analysis methods, extends them with new features and introduces new methods for the analysis and synthesis of urban morphology. In the first part of the workshop, you will learn to use the street network analysis components and how the computed quantities relate to real life phenomena such as the distribution of functions in a city or the movement patterns of citizens. In the second part, we will implement a dynamic urban simulation in Grasshopper. For this purpose, we will use the results from the network analysis and compute local attractivity values for different urban functions like the population or workplaces, which interact with each other based on the corresponding distances. In the third part, we will demonstrate functions of the DeCodingSpaces-Toolbox for the synthesis of urban morphology (street networks, plots, and buildings), which is directly connected to the analysis and the simulation parts. In the last part, we use a Design-Space-Exploration tool (DSE) that presents the generated solutions in various ways.

<iframe src="" width="800" height="440" frameborder="0" scrolling="no"></iframe>
Workshop files

Part 1 – Analysis


<iframe src="" width="800" height="460" frameborder="0" scrolling="no"></iframe>


Analysis 2d, 3d Isovist

Download Grasshopper file


Analysis 2d, 3d Isovist

Download Grasshopper file


Analysis 2d, 3d Isovist

Download Grasshopper file


Analysis 2d, 3d Isovist

Download Grasshopper file


Analysis 2d, 3d Isovist

Download Grasshopper file

Street Network Analysis


Street Network Analysis

Download Grasshopper file


Street Network Analysis

Download Grasshopper file


Street Network Analysis

Download Grasshopper file


Street Network Analysis

Download Grasshopper file






Part 2 – Generation

<iframe src="" width="800" height="460" frameborder="0" scrolling="no"></iframe>




Part 3 – Exploration

<iframe src="" width="800" height="460" frameborder="0" scrolling="no"></iframe>


Part 4 – Hands On, Generate Analyze & Explore

<iframe src="" width="800" height="460" frameborder="0" scrolling="no"></iframe>

Weimar Urban Layout Generator

Impressions of the Workshop Results
The session ID is: YKIKFUCBTEGlqI6g

Working with and Exporting Geospatial Data

Working with and Exporting Geospatial Data

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 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 Polygonor 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, Mapnikthat 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.

<style><!-- [et_pb_line_break_holder] --> /*-----CSS style for the layer and view selection widget-----*/<!-- [et_pb_line_break_holder] --> #layer-menu {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> z-index: 1;<!-- [et_pb_line_break_holder] --> top: 10px;<!-- [et_pb_line_break_holder] --> left: 10px;<!-- [et_pb_line_break_holder] --> width: 160px;<!-- [et_pb_line_break_holder] --> font-family: 'Open Sans', sans-serif;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #camera-menu {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> z-index: 1;<!-- [et_pb_line_break_holder] --> top: 10px;<!-- [et_pb_line_break_holder] --> right: 50px;<!-- [et_pb_line_break_holder] --> width: 80px;<!-- [et_pb_line_break_holder] --> font-family: 'Open Sans', sans-serif;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #function-menu {<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> z-index: 1;<!-- [et_pb_line_break_holder] --> top: 10px;<!-- [et_pb_line_break_holder] --> right: 140px;<!-- [et_pb_line_break_holder] --> width: 140px;<!-- [et_pb_line_break_holder] --> font-family: 'Open Sans', sans-serif;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .dropbtn {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> z-index: 2;<!-- [et_pb_line_break_holder] --> background-color: #31b7bc; /*AIT colors*/;<!-- [et_pb_line_break_holder] --> color: white;<!-- [et_pb_line_break_holder] --> padding: 16px;<!-- [et_pb_line_break_holder] --> font-size: 16px;<!-- [et_pb_line_break_holder] --> border: none;<!-- [et_pb_line_break_holder] --> cursor: pointer;<!-- [et_pb_line_break_holder] --> outline: none;<!-- [et_pb_line_break_holder] --> border-radius: 4px;<!-- [et_pb_line_break_holder] --> box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);<!-- [et_pb_line_break_holder] --> font-weight: 500;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .dropbtn:hover, .dropbtn:focus {<!-- [et_pb_line_break_holder] --> background-color: #22a1a1;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .dropdown-content {<!-- [et_pb_line_break_holder] --> border-radius: 5px;<!-- [et_pb_line_break_holder] --> text-align: left;<!-- [et_pb_line_break_holder] --> display: none;<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> top: 55px;<!-- [et_pb_line_break_holder] --> background-color: #ffffff;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> overflow: auto;<!-- [et_pb_line_break_holder] --> box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);<!-- [et_pb_line_break_holder] --> z-index: 1;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .dropdown-content a {<!-- [et_pb_line_break_holder] --> color: black;<!-- [et_pb_line_break_holder] --> padding: 12px 16px;<!-- [et_pb_line_break_holder] --> text-decoration: none;<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> border-top: 1px solid #ddd;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .dropdown-content a.Off {<!-- [et_pb_line_break_holder] --> color: #6b6b6b;<!-- [et_pb_line_break_holder] --> background: #f9f9f9;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .dropdown-content a:hover {background-color: rgb(240, 240, 240);}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> .show {display: block;} <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> /*-----CSS style for the element info popup widget-----*/<!-- [et_pb_line_break_holder] --> dd {<!-- [et_pb_line_break_holder] --> margin-left: 0;<!-- [et_pb_line_break_holder] --> margin-bottom: 8px;<!-- [et_pb_line_break_holder] --> font-weight: bold;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> dt {<!-- [et_pb_line_break_holder] --> color: #31b7bc; /*AIT colors*/<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> dl {<!-- [et_pb_line_break_holder] --> margin-bottom: 0;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{<!-- [et_pb_line_break_holder] --> border-top-color: #31b7bc; /*AIT colors*/<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .mapboxgl-popup-content{<!-- [et_pb_line_break_holder] --> font-size: 14px;<!-- [et_pb_line_break_holder] --> color: white;<!-- [et_pb_line_break_holder] --> background-color: rgba(0, 0, 0, 0.8);<!-- [et_pb_line_break_holder] --> box-shadow: 0 0 0px 2px #31b7bc; /*AIT colors*/<!-- [et_pb_line_break_holder] --> min-width: 120px;<!-- [et_pb_line_break_holder] --> max-width: 300px;<!-- [et_pb_line_break_holder] --> max-height: 170px;<!-- [et_pb_line_break_holder] --> overflow-y: auto;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .mapboxgl-popup-close-button{<!-- [et_pb_line_break_holder] --> color: white;<!-- [et_pb_line_break_holder] --> font-size: 20px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> /*-----CSS style for the map scale widget-----*/<!-- [et_pb_line_break_holder] --> .mapboxgl-ctrl-scale {<!-- [et_pb_line_break_holder] --> background-color: rgba(0, 0, 0, 0.75);<!-- [et_pb_line_break_holder] --> font-size: 12px;<!-- [et_pb_line_break_holder] --> border-width: medium 2px 3px;<!-- [et_pb_line_break_holder] --> border-style: none none solid;<!-- [et_pb_line_break_holder] --> border-color: #31b7bc; /*AIT colors*/<!-- [et_pb_line_break_holder] --> padding: 0 5px;<!-- [et_pb_line_break_holder] --> color: white;<!-- [et_pb_line_break_holder] --> box-sizing: border-box;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> /*-----CSS style for copyright-----*/<!-- [et_pb_line_break_holder] --> #copyright {<!-- [et_pb_line_break_holder] --> font-size: 9px;<!-- [et_pb_line_break_holder] --> color:white;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> #copyright a {<!-- [et_pb_line_break_holder] --> color:#31b7bc; /*AIT colors*/<!-- [et_pb_line_break_holder] --> text-decoration: none;<!-- [et_pb_line_break_holder] --> font-weight: 1000;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> </style><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <div id='map' style='min-height: 500px; min-width: 460px;'> <!-- MapBox container --><!-- [et_pb_line_break_holder] --> <nav id="layer-menu"><!-- [et_pb_line_break_holder] --> <button onclick="dropdownToggle('layerDropdown')" class="dropbtn"><!-- [et_pb_line_break_holder] --> Select scenario</button><!-- [et_pb_line_break_holder] --> <div id="layerDropdown" class="dropdown-content"></div><!-- [et_pb_line_break_holder] --> <div id = "copyright">created at <a target="_blank" <!-- [et_pb_line_break_holder] --> href="">AIT</a><!-- [et_pb_line_break_holder] --> by Ondrej Vesely,  2018</div><!-- [et_pb_line_break_holder] --> </nav><!-- [et_pb_line_break_holder] --> <nav id="camera-menu"><!-- [et_pb_line_break_holder] --> <button onclick="dropdownToggle('cameraDropdown')" class="dropbtn"><!-- [et_pb_line_break_holder] --> Views</button><!-- [et_pb_line_break_holder] --> <div id="cameraDropdown" class="dropdown-content"></div><!-- [et_pb_line_break_holder] --> </nav><!-- [et_pb_line_break_holder] --> <nav id="function-menu"><!-- [et_pb_line_break_holder] --> <button onclick="dropdownToggle('functionDropdown')" class="dropbtn"><!-- [et_pb_line_break_holder] --> Functions</button><!-- [et_pb_line_break_holder] --> <div id="functionDropdown" class="dropdown-content"></div><!-- [et_pb_line_break_holder] --> </nav><!-- [et_pb_line_break_holder] --> </div><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Load Map via Mapbox API<!-- [et_pb_line_break_holder] --> mapboxgl.accessToken = 'pk.eyJ1Ijoib25kcmVqLXZlc2VseSIsImEiOiJjamlhOWo3cnkwMnY3M3ZwZjU5bm54c3BsIn0.69pwP4aK4CmFBlpU8I4giw';<!-- [et_pb_line_break_holder] --> // dont forget to change this accessToken to you own if you use this code<!-- [et_pb_line_break_holder] --> var map = new mapboxgl.Map({<!-- [et_pb_line_break_holder] --> container: 'map',<!-- [et_pb_line_break_holder] --> style: 'mapbox://styles/ondrej-vesely/cjjsritez0dx42ro0vz8l2ks4'<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Camera limits<!-- [et_pb_line_break_holder] --> map.setMaxZoom(17);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Add navigation widget<!-- [et_pb_line_break_holder] --> var nav = new mapboxgl.NavigationControl();<!-- [et_pb_line_break_holder] --> map.addControl(nav,'top-right');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Add fullscreen toggle button widget<!-- [et_pb_line_break_holder] --> var full = new mapboxgl.FullscreenControl();<!-- [et_pb_line_break_holder] --> map.addControl(full, 'top-right')<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Add map scale widget<!-- [et_pb_line_break_holder] --> var scale = new mapboxgl.ScaleControl({<!-- [et_pb_line_break_holder] --> maxWidth: 250,<!-- [et_pb_line_break_holder] --> unit: 'metric'<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> map.addControl(scale, 'bottom-right');<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // On start wait till map loads,<!-- [et_pb_line_break_holder] --> map.on('load', function() {<!-- [et_pb_line_break_holder] --> // move camera a bit,<!-- [et_pb_line_break_holder] --> map.flyTo({center: [103.84, 1.2680], zoom: 13.8, speed: 0.1, bearing: 4})<!-- [et_pb_line_break_holder] --> // and open welcome popup<!-- [et_pb_line_break_holder] --> helpPopup()<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // --- The interesting stuff starts here ----<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Dropdowns<!-- [et_pb_line_break_holder] --> // When the user clicks on the button, <!-- [et_pb_line_break_holder] --> // toggle between hiding and showing the dropdown content<!-- [et_pb_line_break_holder] --> function dropdownToggle(id) {<!-- [et_pb_line_break_holder] --> document.getElementById(id).classList.toggle("show");<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // Layers which include multiple variants and should filtered based on displayed scenario<!-- [et_pb_line_break_holder] --> var scenLayers = [<!-- [et_pb_line_break_holder] --> 'land', 'land2', 'buildings', 'streets', 'trees', 'bridges', 'floors', 'syntax',<!-- [et_pb_line_break_holder] --> 'solar'<!-- [et_pb_line_break_holder] --> ]<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // List of variants included in the data<!-- [et_pb_line_break_holder] --> var scenNames = ['scen1', 'scen3', 'scen5']<!-- [et_pb_line_break_holder] --> var scenNiceNames = ['Green Loop City', 'Garden City', 'Oceanfront']<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Add scenario names to dropdown to chenge scenario filter on click<!-- [et_pb_line_break_holder] --> for (var i = 0; i < scenNames.length; i++) {<!-- [et_pb_line_break_holder] --> var id = scenNames[i];<!-- [et_pb_line_break_holder] --> var name = scenNiceNames[i];<!-- [et_pb_line_break_holder] --> var link = document.createElement('a');<!-- [et_pb_line_break_holder] --> link.href = 'javascript:changeScen("' + id + '")';<!-- [et_pb_line_break_holder] --> link.textContent = name;<!-- [et_pb_line_break_holder] --> var $layerDropdown = document.getElementById('layerDropdown');<!-- [et_pb_line_break_holder] --> $layerDropdown.appendChild(link);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // Scenario change - Loops trough list of scenario layers,<!-- [et_pb_line_break_holder] --> // sets variant filter to given scenario name<!-- [et_pb_line_break_holder] --> function changeScen(id) {<!-- [et_pb_line_break_holder] --> for (var i = 0; i < scenLayers.length; i++) {<!-- [et_pb_line_break_holder] --> var layer = scenLayers[i];<!-- [et_pb_line_break_holder] --> filter = map.getFilter(layer); // gets current filter settings<!-- [et_pb_line_break_holder] --> for (var j = 0; j < filter.length; j++) {<!-- [et_pb_line_break_holder] --> if (filter[j][1] == "var") { // Key under which you specify variants<!-- [et_pb_line_break_holder] --> filter[j][2] = id; // change the Value to "id" (scenario name)<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> map.setFilter(layer, filter);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // For the cameras you want to save, put its position as CameraOptions here<!-- [et_pb_line_break_holder] --> var cameras = [<!-- [et_pb_line_break_holder] --> {center: [103.836607, 1.272156], zoom: 17, bearing: 136, pitch: 60}, <!-- [et_pb_line_break_holder] --> {center: [103.846564, 1.272998], zoom: 16, bearing: -180, pitch: 60}, <!-- [et_pb_line_break_holder] --> {center: [103.832839, 1.259721], zoom: 15, bearing: 0, pitch: 0}];<!-- [et_pb_line_break_holder] --> var cameraNames = ['Station', 'CBD', 'Island']<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Add views to camera dropdown to switch cameras on click<!-- [et_pb_line_break_holder] --> for (var i = 0; i < cameras.length; i++) {<!-- [et_pb_line_break_holder] --> var name = cameraNames[i]<!-- [et_pb_line_break_holder] --> var link = document.createElement('a');<!-- [et_pb_line_break_holder] --> link.href = 'javascript:changeCamera(cameras[' + i + '])';<!-- [et_pb_line_break_holder] --> link.textContent = name;<!-- [et_pb_line_break_holder] --> var $cameraDropdown = document.getElementById('cameraDropdown');<!-- [et_pb_line_break_holder] --> $cameraDropdown.appendChild(link);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // View switching<!-- [et_pb_line_break_holder] --> function changeCamera(cameraOptions){<!-- [et_pb_line_break_holder] --> // You can set camera fly speed here<!-- [et_pb_line_break_holder] --> cameraOptions['speed'] = '0.5';<!-- [et_pb_line_break_holder] --> map.flyTo(cameraOptions);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> // List of additional functions you want to include as tools<!-- [et_pb_line_break_holder] --> var functions = [<!-- [et_pb_line_break_holder] --> 'toggle3d()', 'toggleFloors()', 'toggleSun()',<!-- [et_pb_line_break_holder] --> 'toggleSyntax()', 'issues()', 'helpPopup()'<!-- [et_pb_line_break_holder] --> ]<!-- [et_pb_line_break_holder] --> var functionNames = [<!-- [et_pb_line_break_holder] --> '☑  3D buildings', '☐  Higher LOD', '☐  Shadow study',<!-- [et_pb_line_break_holder] --> '☐  SpaceSyntax', '☐  Comments', 'Need Help?'<!-- [et_pb_line_break_holder] --> ]<!-- [et_pb_line_break_holder] --> var startToggle = ['On', 'Off', 'Off', 'Off', 'Off', 'On']<!-- [et_pb_line_break_holder] --> // Add functions to dropdown to switch activate on click<!-- [et_pb_line_break_holder] --> for (var i = 0; i < functions.length; i++) {<!-- [et_pb_line_break_holder] --> var id = functions[i];<!-- [et_pb_line_break_holder] --> var name = functionNames[i];<!-- [et_pb_line_break_holder] --> var toggle = startToggle[i]<!-- [et_pb_line_break_holder] --> var link = document.createElement('a');<!-- [et_pb_line_break_holder] --> link.href = 'javascript:' + id<!-- [et_pb_line_break_holder] --> link.textContent = name;<!-- [et_pb_line_break_holder] --> = id<!-- [et_pb_line_break_holder] --> link.classList = toggle<!-- [et_pb_line_break_holder] --> var $layerDropdown = document.getElementById('functionDropdown');<!-- [et_pb_line_break_holder] --> $layerDropdown.appendChild(link);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> // 3D buildings toggle<!-- [et_pb_line_break_holder] --> var extrusionHeight = []<!-- [et_pb_line_break_holder] --> map.on("load", function(){<!-- [et_pb_line_break_holder] --> extrusionHeight = map.getPaintProperty("buildings", "fill-extrusion-height")<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> function toggle3d(){<!-- [et_pb_line_break_holder] --> if(document.getElementById("toggle3d()").classList == "On") {<!-- [et_pb_line_break_holder] --> map.setPaintProperty("buildings", "fill-extrusion-height", 8)<!-- [et_pb_line_break_holder] --> map.setPaintProperty('floors', "fill-extrusion-opacity", 0);<!-- [et_pb_line_break_holder] --> document.getElementById("toggle3d()").textContent = "☐  3D buildings"<!-- [et_pb_line_break_holder] --> document.getElementById("toggle3d()").classList = "Off"<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> else if(document.getElementById("toggle3d()").classList == "Off") {<!-- [et_pb_line_break_holder] --> map.setPaintProperty("buildings", "fill-extrusion-height", extrusionHeight)<!-- [et_pb_line_break_holder] --> map.setPaintProperty('floors', "fill-extrusion-opacity", 1);<!-- [et_pb_line_break_holder] --> document.getElementById("toggle3d()").textContent = "☑  3D buildings"<!-- [et_pb_line_break_holder] --> document.getElementById("toggle3d()").classList = "On"<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Higher LOD -- Floors toggle<!-- [et_pb_line_break_holder] --> function toggleFloors() {<!-- [et_pb_line_break_holder] --> if(document.getElementById("toggleFloors()").classList == "Off") {<!-- [et_pb_line_break_holder] --> // First check if map isnt zoomed out too far<!-- [et_pb_line_break_holder] --> // If map is far, zoom slowly to proper zoom level<!-- [et_pb_line_break_holder] --> if(map.getZoom() < 15) {<!-- [et_pb_line_break_holder] --> map.flyTo({zoom: 15, speed: 0.5})<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> else {<!-- [et_pb_line_break_holder] --> map.flyTo({zoom: map.getZoom()+0.0001})<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> map.once('zoomend', function() {<!-- [et_pb_line_break_holder] --> map.setMinZoom(15)<!-- [et_pb_line_break_holder] --> map.setPaintProperty("buildings", "fill-extrusion-opacity", 0)<!-- [et_pb_line_break_holder] --> map.setLayoutProperty('floors', 'visibility', 'visible');<!-- [et_pb_line_break_holder] --> document.getElementById("toggleFloors()").textContent = "☑  Higher LOD"<!-- [et_pb_line_break_holder] --> document.getElementById("toggleFloors()").classList = "On"<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> else if(document.getElementById("toggleFloors()").classList == "On") {<!-- [et_pb_line_break_holder] --> map.setLayoutProperty('floors', 'visibility', 'none');<!-- [et_pb_line_break_holder] --> map.setPaintProperty("buildings", "fill-extrusion-opacity", 1)<!-- [et_pb_line_break_holder] --> document.getElementById("toggleFloors()").textContent = "☐  Higher LOD"<!-- [et_pb_line_break_holder] --> document.getElementById("toggleFloors()").classList = "Off"<!-- [et_pb_line_break_holder] --> map.setMinZoom(0)<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // Toggle Sun hours / Shadowstudy<!-- [et_pb_line_break_holder] --> function toggleSun(){<!-- [et_pb_line_break_holder] --> if(document.getElementById("toggleSun()").classList == "Off") {<!-- [et_pb_line_break_holder] --> map.setLayoutProperty('solar', "visibility", "visible");<!-- [et_pb_line_break_holder] --> document.getElementById("toggleSun()").textContent = "☑  Shadow study"<!-- [et_pb_line_break_holder] --> document.getElementById("toggleSun()").classList = "On"<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var popup = new mapboxgl.Popup({closeButton: false, closeOnClick: false})<!-- [et_pb_line_break_holder] --> map.on('mousemove', 'solar', function(e) {<!-- [et_pb_line_break_holder] --> map.getCanvas().style.cursor = 'help';<!-- [et_pb_line_break_holder] --> popup.remove(map)<!-- [et_pb_line_break_holder] --> var features = map.queryRenderedFeatures(e.point, {layers: ["solar"]});<!-- [et_pb_line_break_holder] --> var face = features[0];<!-- [et_pb_line_break_holder] --> var hours =<!-- [et_pb_line_break_holder] --> popup.setLngLat(e.lngLat)<!-- [et_pb_line_break_holder] --> .setHTML(<!-- [et_pb_line_break_holder] --> '<dd>' + hours + ' hours</dd>' +<!-- [et_pb_line_break_holder] --> '<dt> of sunlight <br>on 1st of August.</dt>'<!-- [et_pb_line_break_holder] --> )<!-- [et_pb_line_break_holder] --> .addTo(map);<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> map.on('mouseleave', 'solar', function(){<!-- [et_pb_line_break_holder] --> map.getCanvas().style.cursor = '';<!-- [et_pb_line_break_holder] --> popup.remove(map);<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> else if(document.getElementById("toggleSun()").classList == "On") {<!-- [et_pb_line_break_holder] --> map.setLayoutProperty('solar', "visibility", "none");<!-- [et_pb_line_break_holder] --> document.getElementById("toggleSun()").textContent = "☐  Shadow study"<!-- [et_pb_line_break_holder] --> document.getElementById("toggleSun()").classList = "Off"<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Toggle SpaceSyntax<!-- [et_pb_line_break_holder] --> function toggleSyntax(){<!-- [et_pb_line_break_holder] --> if(document.getElementById("toggleSyntax()").classList == "Off") {<!-- [et_pb_line_break_holder] --> map.setPaintProperty('syntax', "line-opacity", 1);<!-- [et_pb_line_break_holder] --> document.getElementById("toggleSyntax()").textContent = "☑  SpaceSyntax"<!-- [et_pb_line_break_holder] --> document.getElementById("toggleSyntax()").classList = "On"<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> else if(document.getElementById("toggleSyntax()").classList == "On") {<!-- [et_pb_line_break_holder] --> map.setPaintProperty('syntax', "line-opacity", 0);<!-- [et_pb_line_break_holder] --> document.getElementById("toggleSyntax()").textContent = "☐  SpaceSyntax"<!-- [et_pb_line_break_holder] --> document.getElementById("toggleSyntax()").classList = "Off"<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Feedback toggle<!-- [et_pb_line_break_holder] --> // Switch between icons visible and hidden<!-- [et_pb_line_break_holder] --> function issues() {<!-- [et_pb_line_break_holder] --> if(document.getElementById("issues()").classList == "Off") {<!-- [et_pb_line_break_holder] --> map.setLayoutProperty("wtp-comments", 'visibility', 'visible');<!-- [et_pb_line_break_holder] --> document.getElementById("issues()").textContent = "☑  Comments"<!-- [et_pb_line_break_holder] --> document.getElementById("issues()").classList = "On"<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> else if(document.getElementById("issues()").classList == "On") {<!-- [et_pb_line_break_holder] --> map.setLayoutProperty("wtp-comments", 'visibility', 'none');<!-- [et_pb_line_break_holder] --> document.getElementById("issues()").textContent = "☐  Comments"<!-- [et_pb_line_break_holder] --> document.getElementById("issues()").classList = "Off"<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // on hover open popup with text info<!-- [et_pb_line_break_holder] --> issuePopup = new mapboxgl.Popup({closeButton: false, closeOnClick: false})<!-- [et_pb_line_break_holder] --> map.on('mouseenter', 'wtp-comments', function(e) {<!-- [et_pb_line_break_holder] --> map.getCanvas().style.cursor = 'pointer';<!-- [et_pb_line_break_holder] --> var coordinates = e.features[0].geometry.coordinates.slice();<!-- [et_pb_line_break_holder] --> var text = e.features[0].properties.text;<!-- [et_pb_line_break_holder] --> var author = e.features[0];<!-- [et_pb_line_break_holder] --> issuePopup.setLngLat(coordinates)<!-- [et_pb_line_break_holder] --> .setHTML('<dt>' + text + '</dt>' +<!-- [et_pb_line_break_holder] --> '<br><dd>' + author + '</dd>'<!-- [et_pb_line_break_holder] --> )<!-- [et_pb_line_break_holder] --> .addTo(map);<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --> // close it on hover end<!-- [et_pb_line_break_holder] --> map.on('mouseleave', 'wtp-comments', function() {<!-- [et_pb_line_break_holder] --> map.getCanvas().style.cursor = '';<!-- [et_pb_line_break_holder] --> issuePopup.remove();<!-- [et_pb_line_break_holder] --> })<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // +++ Other useful functions<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Help popup with controls info<!-- [et_pb_line_break_holder] --> function helpPopup() {<!-- [et_pb_line_break_holder] --> window.popup = new mapboxgl.Popup()<!-- [et_pb_line_break_holder] --> .setLngLat(map.getCenter())<!-- [et_pb_line_break_holder] --> .setHTML( //OLD IE COMPATABLE MUTLILINE STRING<!-- [et_pb_line_break_holder] --> '<dd>How can you explore the model?</dd>' +<!-- [et_pb_line_break_holder] --> '<dt>Click on "Select scenario" to choose between different variants' +<!-- [et_pb_line_break_holder] --> ' or click on buildings to display more information about them.</dt>' +<!-- [et_pb_line_break_holder] --> '<dt><br>To control the camera press Control + Left Mouse Button or use' +<!-- [et_pb_line_break_holder] --> ' one of the preset positions with "Views" menu.</dt>' +<!-- [et_pb_line_break_holder] --> '<dt><br>In the "Functions" menu you can hide the 3D geometry' +<!-- [et_pb_line_break_holder] --> ' and change the Level of Detail or show a demo of feedback system.</dt>'<!-- [et_pb_line_break_holder] --> )<!-- [et_pb_line_break_holder] --> .addTo(map);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Layer with additional data popup on click<!-- [et_pb_line_break_holder] --> activeLayer = 'buildings'<!-- [et_pb_line_break_holder] --> // change the cursor when hovering over this layer<!-- [et_pb_line_break_holder] --> map.on('mouseenter', activeLayer, function(event) {<!-- [et_pb_line_break_holder] --> map.getCanvas().style.cursor = 'help';<!-- [et_pb_line_break_holder] --> }); <!-- [et_pb_line_break_holder] --> map.on('mouseleave', activeLayer, function() {<!-- [et_pb_line_break_holder] --> map.getCanvas().style.cursor = '';<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --> // Open popup with GeoJson properties on click<!-- [et_pb_line_break_holder] --> map.on('click', function(event) {<!-- [et_pb_line_break_holder] --> var features = map.queryRenderedFeatures(event.point, {layers: [activeLayer]});<!-- [et_pb_line_break_holder] --> var building = features[0];<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> // Keys you want to include<!-- [et_pb_line_break_holder] --> if (features.length) {<!-- [et_pb_line_break_holder] --> var landUse = <!-- [et_pb_line_break_holder] --> '–';<!-- [et_pb_line_break_holder] --> var height = Math.round( <!-- [et_pb_line_break_holder] --> '–';<!-- [et_pb_line_break_holder] --> var gfa = Math.round( <!-- [et_pb_line_break_holder] --> '–';<!-- [et_pb_line_break_holder] --> var id = <!-- [et_pb_line_break_holder] --> '–';<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> // HTML content of the popup<!-- [et_pb_line_break_holder] --> window.popup = new mapboxgl.Popup()<!-- [et_pb_line_break_holder] --> .setLngLat(event.lngLat)<!-- [et_pb_line_break_holder] --> .setHTML( <!-- [et_pb_line_break_holder] --> '<dl>' +<!-- [et_pb_line_break_holder] --> // '<dt>Land Use</dt>' +<!-- [et_pb_line_break_holder] --> // '<dd>' + landUse + '</dd>' +<!-- [et_pb_line_break_holder] --> '<dt>Building Height</dt>' +<!-- [et_pb_line_break_holder] --> '<dd>' + height + ' m' + '</dd>' +<!-- [et_pb_line_break_holder] --> '<dt>GFA</dt>' +<!-- [et_pb_line_break_holder] --> '<dd>' + gfa + ' sqm' + '</dd>' +<!-- [et_pb_line_break_holder] --> '<dt>ID#</dt>' +<!-- [et_pb_line_break_holder] --> '<dd>' + id + '</dd>' +<!-- [et_pb_line_break_holder] --> '</dl>') //OLD IE COMPATABLE MUTLILINE STRING FORMAT<!-- [et_pb_line_break_holder] --> .addTo(map);<!-- [et_pb_line_break_holder] --> };<!-- [et_pb_line_break_holder] --> });<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> </script>

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.

Cognitive Urban Design Computing @ FCL

Cognitive Urban Design Computing @ FCL

This post documents our research in the Cognitive Design Computing (CoDeC) workstream of the Big Data Informed Urban Design and Governance project at the Future Cities Lab in Singapore with status July 2018. It is structured in our research on generation, analysis, and exploration methods. We demonstrate our methods in the context of the synergy project Waterfront Tanjong Pagar in Singapore. In this context we used partially inputs from other FCL research groups. The idea of Cognitive Urban Design Computing is to combine unique human design competences with computational methods for the generation, analysis, and exploration of urban designs. The loop of analysis and generation methods is the basis for automated spatial synthesis. Design space exploration methods are used for the presentation and selection of synthesized design variants.

Research Team: Katja Knecht, Yufan Miao, Kateryna Konieva, Pol Foreman, Reinhard Koenig (contact author), Gerhard Schmitt, in collaboration with Dietmar Leyk.


The image illustrates the framework for Cognitive Urban Design Computing.

Overview of the spatial synthesis process for Waterfront Tanjong Pagar

Generation and Analysis

Kateryna Konieva

We use the Waterfront Tanjong Pagar area for demonstrating the automated loop of generation and analysis of urban design variants. The video below shows the parametric design workflow with various analysis methods integrated in the spatial synthesis process. Currently we use network analysis, economic potentials, view analysis, as well as solar and shadow analysis.


Yufan Miao

For the automatization of the spatial synthesis process, we use evolutionary multi-criteria optimization algorithms. Therefore we needed to develop an appropriate data structure to represent spatial configurations (streets, parcels, and buildings), which allows the application of evolutionary operators (crossover, mutation, and adaption).

Design Space Exploration

Katja Knecht

The spatial synthesis process we presented allows to generate a large number of urban design variants. To present these variants in a meaningful way to urban planners or stakeholders, we explore the usage of design space exploration tools and new interface concepts. The aim is to provide a platform to discuss, compare and evaluate variants based on analysis results in order to allow stakeholders to take informed design decisions.

Comparison of design alternatives using the beta.speckle online interface.

The following video shows how design variants can be filtered according to specified design and performance characteristics in the Design Explorer application:


How design alternatives can be assessed and evaluated in the Speckle online viewer, e.g. by comparing analysis results such as shading and sunlight hours analysis, can be seen in the following clip:

Building Typologies

Pol Foreman

In collaboration with the FCL synergy project Waterfront Tanjong Pagar led by Dietmar Leyk, we developed a parametric urban masterplan, which allows the generation of adequately detailed urban block typologies and buildings.


Big Data Informed Urban Design and Governance

The Cognitive Design Computing (CoDeC) workstream is part of the Big Data Informed Urban Design and Governance project at the Future Cities Lab in Singapore. The video below gives an overview of all workstreams of the project and how they are related to each other.

Acknowledgement This research was conducted at the Future Cities Laboratory at the Singapore- ETH Centre, which was established cooperatively between ETH Zurich and Singapore’s National Research Foundation (FI 370074016) under its Campus for Research Excellence and Technological Enterprise programme (CREATE).

Related Publications

Sorry, but the selected Zotpress account can't be found.

Please enter a password to see the content.

Wrong password, please try again
Public Transport Isochronal Map

Public Transport Isochronal Map

This page shows a technical demonstration of a tool for visualizing pulbic transport access times as an isochronic map. The tool was developed in the Smart Spatial Planning Systems group at the Austrian Institute of Technology (AIT). The tool is implemented as Grasshopper definition and can be controlled with a simplified user interface from Rhino3D.

The tool makes use of Grasshopper extension Spiderweb 4.2 by Richard Schaffranek.

Research Team: Ondřej Veselý, Reinhard Koenig

The module makes use of existing data on public transport routes, which is openly available from Wiener Linien. However user can easily modify the dataset using CAD-like interface to explore new scenarios, such as construction of additional routes and more frequent or faster connections.

The resulting access time can be mapped to all buildings or streets, or displayed as isochronic curves – an isochrone of time t is the surface at equal time distance from the starting points.


The files used in this example are included for internal use by our research partners in protected archive below.

Please enter a password to see the content.

Wrong password, please try again

Pin It on Pinterest