Release docs for CARLA 0.9.15 (#6894)

* digital twin docs 1st draft

* update

* started procedural buildings tool docs

* started procedural building docs

* added town 13

* added images

* final details procedural buildings

* corrections

* typos

* reordered intro

* fixed world.yml

* added final images for town 13

* calibrated town 13 map

* ROS docs

* added town 13 to catalogue

* corrected extended docs page

* updates

* added town15 docs

Docs/adv_digital_twin.md

@@ -0,0 +1,87 @@
+!!! note
+	The __Digital Twin Tool__ is currently an __experimental feature__ and is not considered *production ready* at this stage. Some parts of maps may be undecorated or untextured. Hence it should only be used for experimental research projects.
+
+# Digital Twin Tool
+
+![digital_twin_pipeline](img/pipeline.jpg)
+
+- [__Downloading and preparing OSM map data__](#downloading-and-preparing-osm-map-data)
+- [__OpenStreetMap browser__](#openstreetmap-browser)
+- [__Procedural environment generation__](#procedural-environment-generation)
+	- [Road decoration](#overview)
+	- [Buildings](#alsm)
+- [__Generate the map__](#generate-the-map)
+- [__Save the map__](#save-the-map)
+
+The __Digital Twin Tool__ enables procedural generation of unique 3D environments based on road networks derived from the [OpenStreetMap](https://www.openstreetmap.org) (OSM) service. Through the Digital Twin Tool interface in CARLA's Unreal Engine editor a user can select a region of map from OSM and download the road network as the basis for a new CARLA map. The tool then fills the spaces between the roads with procedurally generated 3D buildings that adjust to the layout of the road, creating a realistic 3D road environment with high variability.
+
+## Building the OSM renderer
+
+If you are using Linux, you have the option of using the OSM renderer in the CARLA interface to navigate a large OSM map region that you have downloaded. You first need to build the OSM renderer. Run `make osmrenderer` inside the CARLA root directory. You may need to upgrade your version of CMake to v3.2 or above in order for this to work. This will create two folders in your build directory called `libosmcout-source` and `libosmcout-build`. Windows users do not have the option of using the OSM renderer and must use directly a URL. 
+
+## Downloading and preparing OSM map data
+
+![osm_website](img/osm_export.png)
+
+In a web-browser, go to the [OpenStreetMap website](https:/www.openstreetmap.org) and choose an area of the map which you would like to use. Define your region and then export the data as an `.osm` file, or you can use a URL, as explained later. Alternatively, you could use other tools based on the OpenStreetMap service such as [GeoFabrik](https://download.geofabrik.de/), which allows specific map regions such as states or territories to be extracted from the OSM data.
+
+There are two ways to use the OSM data. Using a URL or downloading an OSM file: 
+
+### Using a URL
+
+In the [OpenStreetMap website](https:/www.openstreetmap.org) website, navigate to an area of interest, then press `Export`, you may also want to use the `Manually select a different area` option. Then, right click on `Overpass API` and select `Copy link` from the context menu. You must ensure that the file will be no bigger than 1 Gb. Take this link and paste it into the URL field of the interface.
+
+### Downloading an OSM file and navigating in the interface
+
+This option is only available to Linux users. You may download a larger region of map, for example an entire state or territory, then use the OSM interface in CARLA to navigate the map using the arrow and zoom buttons. Download your desired region of OSM data as a `.osm` file, then place this file in the `{CARLA_ROOT}/Build/libosmcout-source/maps/` folder. Open a terminal inside this folder and run the following command:
+
+```sh
+cd {CARLA_ROOT}/Build/libosmcout-source/maps/
+./build.sh <path_to_osm_file>
+```
+
+## OpenStreetMap browser
+
+To open the OSM browser, open the content browser and navigate to `CarlaToolsContent/OnroadMapGenerator`. Right click on *UW_OnRoadMainWidget* and select *Launch Editor Utility Widget* from the context menu. This will open the tool's interface. 
+
+![osm_interface_open](img/digital_twins_widget.png)
+
+The interface enables browsing of a region of OSM map that has been downloaded from the OSM database and baked. First, you should enter the directory location where you stored the processed OSM data in the previous step in the *Select OSM Database* field in the interface. If you are using a URL directly, paste it into the `OSM URL` field, you will not be able to use the navigator in this case. 
+
+![osm_interface](img/digital_twins_interface.png)
+
+Use the directional arrows and the zoom icons to navigate the map and find a part of the road network you want to turn into a CARLA map. The square region you see in the preview will be the extent of your map. Enter an appropriate name in the `File Name` field and then press *generate* to start the procedural generation process. The map generation process may take several minutes, or more if you are using a large region.
+
+## Procedural environment generation
+
+### Road decoration
+
+The tool extracts the road network from the OSM data as the basis of the map. The road surface is decorated with realistic surface irregularities, road markings and textures. 
+
+![road_markings](img/road_surface.jpg)
+
+### Buildings
+
+The empty spaces between the roads are populated with buildings or open areas that will adjust their shape and dimensions to fill the space between the roads. 
+
+![procedural_buildings](img/procedural_building_generation.jpg)
+
+The procedural generation tool extracts the building footprints and height information from the OSM data to generate virtual buildings with similar dimensions. Detailed cladding is applied to simulate windows, doors and balconies. Different decoration styles are applied depending upon the dimensions of the building, with the tallest buildings having an office style, smaller buildings have a commercial or residential style applied according to the area of the building footprint.
+
+![procedural_cities](img/digital_twins_vegetation.jpg)
+
+Vegetation is also added to the pavements in the next step step for additional detail.
+
+![residential_building_style](img/digital_twins_buildings.jpg)
+*Digital Twin Tool building styles*
+
+The buildings are in a variety of styles that are randomly distributed throughout the city, the architectural style of an area is chosen based on the characteristic dimensions of the buildings extracted from the OSM data.
+
+## Generate the map
+
+The generation step will take around 10 minutes for a 2x2 km<sup>2</sup> region, larger regions will take longer. Once the generation process has finished, you can examine the map in 3D in the Unreal Engine editor. 
+
+## Save the map
+
+If you are satisfied with the generated map then you can press *Save Map* button to save the map. __This step will take a significant amount of time__, it may take over an hour and could take several. You should prepare to leave your computer running for several hours while this step is completed. Once this step is completed, the map will be available through the Unreal Engine editor or through the CARLA API, the same as any other map. 
+

Docs/adv_procedural_building_tool.md

@@ -0,0 +1,153 @@
+!!! note
+	The __Procedural Building Tool__ is currently an __experimental feature__ and is not considered *production ready* at this stage. Hence it should only be used for experimental research projects.
+
+# Procedural Building Tool
+
+The __Procedural Building Tool__ facilitates the generation of virtual 3D buildings for which the dimensions and decoration styles can be modulated to create a near infinite array of variations through a simple interface. The footprint dimensions and height in stories can be chosen through the interface. Then users can select a variety of styles for the building lobby, the body and the top floor or penthouse. A variety of facia element styles can be chosen for features such as corners windows and balconies from the CARLA asset library. 
+
+- [__Opening the tool__](#opening-the-procedural-building-tool)
+- [__Base parameters__](#base-parameters)
+- [__Mesh parameters__](#mesh-parameters)
+- [__Mesh elements__](#mesh-elements)
+	- [Sockets](#sockets)
+- [__Facade materials__](#facade-materials)
+- [__Cooking__](#cooking)
+
+## Opening the Procedural Building Tool
+
+Firstly, you need to add a procedural building actor to the scene. Navigate to `Content>Carla>Blueprints>LevelDesign` and drag the *BP_ProceduralBuilding* blueprint into your map. Move the asset to the position where you wish to visualize the building. Choose a place where you have space so you can see the result clearly. Then to open the tool, launch the Procedural Building tool by right clicking on the *WD_ProceduralBuilding* widget and selecting *Run editor utility widget* from the context menu. This will open the tool's interface. 
+
+![open_pb_tool](img/open_pb_tool.png)
+
+!!! note
+	You must complete this step before opening the tool, an instance of the *BP_ProceduralBuilding* blueprint must exist in the map before the tool can function. You must also ensure that the *BP_ProceduralBuilding* entity is selected in the *World outliner* before proceeding.
+
+## Base parameters
+
+![base_parameters](img/pb_base_parameters.png)
+
+In the base parameters section you select the fundamental properties of your building, such as the footprint and the height in floors.
+
+!!! note
+	Until you have selected mesh pieces in the [mesh parameters](#mesh-parameters) section, you will not see any changes in the Unreal Engine viewport when you adjust the base parameters
+
+The available parameters are as follows:
+
+- __Seed__: sets the random seed for the procedural generation, this enables variations on the building with the same settings.
+- __Num floors__: sets the number of stories or floors the building will have, and henceforth defines the height of the building.
+- __Length X/Y__: defines the size of the footprint of the building in the X and Y dimensions. These are unitless, the number denotes the number repeating sections, each section is a column of windows.
+- __Create automatically__: if this option is selected, the building will automatically update in the viewport so you can see the effect of your adjustments.
+- __Corners__: allows corner pieces to be added to the building, you can choose these pieces in the Mesh Parameters section.
+- __Walls__: replace the middle pieces of the left/right/front/back of the building with alternate pieces that can be selected using the [Mesh parameters](#mesh-parameters) menu.
+- __Doors__: array allowing the placement of a door in the lobby level. The door is placed at the chosen index position.
+
+## Mesh parameters
+
+![mesh_parameters](img/pb_mesh_parameters.png)
+
+In the Mesh Parameters tab in the interface, we choose the mesh pieces that will be used to clad the exterior of the building. There are 5 categories of mesh pieces for different parts of the building:
+
+- __Lobby__: mesh pieces to decorate the lobby of the building.
+- __Midsection__: mesh pieces to decorate the midsection of the building, every floor between the lobby and the top floor.
+- __Penthouse__: mesh pieces to decorate the penthouse level.
+- __Doors__: mesh pieces to add doors to the lobby
+- __Walls__: mesh pieces to decorate the walls of the building
+
+In each category you will find numerous options for mesh pieces. Click on one or more such that they turn red, these will be added to the respective section of your building. If you choose more than one, the tool will randomly alternate between the choices. As you select the mesh pieces for each section of your building, if you have *Create automatically* selected in the base parameters section, you will see the building taking shape in the editor viewport.
+
+![building_parts](img/pb_building_parts.png)
+
+## Mesh elements
+
+![mesh_elements](img/pb_mesh_elements.png)
+
+In this section you can select the more detailed elements of the building such as windows, columns, plant pots, air conditioning units and antennas. Each type of decoration has slightly different properties.
+
+There are numerous types of decoration for details of the building:
+
+- __Vertical/Horizontal window meshes__: these mesh pieces define the style of the window frames in the building. Vertical window meshes will occupy the window spaces that are taller than their width, while horizontal window meshes will occupy the window spaces that are wider than their height. If you select multiple options, they will alternate. 
+
+- __Column meshes__: these simulate brickwork column details that span the height of the building
+
+- __Top/Bottom window details__: these meshes decorate the top of the windows with lintels and sunshades and the bottom of the windows with window sills and plant boxes.
+
+- __Window columns__: brickwork columns that separate windows
+
+- __Curtain meshes__: curtains and blinds to go inside the windows
+
+- __Pot meshes__: plant pots that are added to window sills and plant boxes at specified socket points
+
+- __Air conditioner meshes__: air conditioning units that are added to the windows at specified socket points
+
+- __Pipe meshes__: pipes that descend the building vertically mimicking drainage pipes for the roof
+
+- __Wire meshes__: wires that descend the building vertically mimicking TV aerial extensions and lightning grounding wires
+
+- __Antenna meshes__: TV antennas that protrude from the windows
+
+![mesh_variations](img/pb_detail_variations.webp)
+
+ The parameters work as follows:
+
+ __Common parameters__:
+
+* __Percentage__: controls the amount pieces that will be placed on the building, 100% means all available spaces will be occupied
+* __Offset__: spacial offset of the piece from the body of the building
+
+__Blinds and curtains__:
+
+* __Min/Max size__: selects the min/max length of the blinds or curtains with random variation between the values. 1.0 is fully shut, 0.0 is fully open.
+
+__Pipes and wires__:
+
+* __Index__: defines the face of the building where the pipe will be placed
+* __Offset side/front__: adds a spatial offset to the piece from the center of the face of the building
+
+!!! note
+	You may find in some cases that when you choose detail mesh pieces such as plant pots, antennas and air conditioning units, you don't see any change in the building. This is most likely because the pieces you are using don't have the appropriate sockets needed to add the pieces you chose. Refer to the [sockets section](#sockets) to learn how to use sockets
+
+### Sockets
+
+![socket_details](img/pb_detail_section.png)
+
+Sockets are anchor points which define where to place detail meshes on another mesh piece. To add sockets to the mesh pieces in the procedural building, with the procedural building selected, go to the *details panel*, normally on the right hand side of the UE editor interface. In there, you will find the *Meshes* and *Detail meshes* panels. Open the relevant section to open the mesh piece where you wish to place the socket.
+
+![mesh_details](img/pb_mesh_details.png)
+
+Find the mesh on which you want to place a socket and double click the icon to open it in the editor. Click *create socket* to add a socket and name it using the following convention:
+
+* Air conditioning unit: aa_*
+* Antennas: ant_*
+* Plant pots: pot_*
+
+Replace the asterisk with an index, depending upon how many sockets you have, i.e. aa_0, aa_2, aa_3...
+
+![socket_details](img/pb_add_socket.png)
+
+When you click *Create socket* the socket will be instantiated in the editor with a 3D handle. Drag the socket to the desired position on the mesh, this is where your detail piece will appear attached to the unit. 
+
+## Facade materials
+
+![facade_materials](img/pb_facade_materials.png)
+
+In the facade materials tab, you can browse and preview the material that you want to decorate the walls of your building.
+
+![facade_changes](img/pb_facade_changes.webp)
+
+## Cooking
+
+In the cooking tab, you initiate the combination of all the mesh pieces and materials you've selected into a single static mesh with associated materials and textures. An LOD texture of the building will also be created for the LOD. Specify a folder name in the interface where the assets for your new building will be saved.
+
+Once you have cooked your building, you will then be able to place instances of the building in the map just like any other CARLA assets.
+
+
+
+
+
+
+
+
+
+
+
+

Docs/catalogue.md

@@ -26,6 +26,8 @@ The CARLA simulator provides 10 pre-built maps to choose from, providing a diver
 | [__Town10__](map_town10.md) | A downtown urban environment with skyscrapers, residential buildings and an ocean promenade.|
 | [__Town11__](map_town11.md) | A Large Map that is undecorated. Serves as a proof of concept for the Large Maps feature. |
 | [__Town12__](map_town12.md) | A Large Map with numerous different regions, including high-rise, residential and rural environments.|
+| [__Town13__](map_town13.md) | A Large Map similar in scale to Town 12, but with distinct features.|
+| [__Town15__](map_town15.md) | A map based on the road layout of the Autonomous University of Barcelona. |
 
 ## Vehicles
 

Docs/ecosys_ros.md

@@ -0,0 +1,19 @@
+# ROS
+
+![ros_carla](../img/ros_carla.png)
+
+The [__Robotic Operating System (ROS)__](https://www.ros.org/) is a set of software libraries for robotic and autonomous driving applications. CARLA can be directly connected to ROS through its ROS interfaces, control signals can be sent to CARLA actors and sensor data can be accessed through ROS topics. 
+
+There are two options for connecting CARLA and ROS.
+
+- __CARLA native interface__: a ROS interface build directly into the CARLA server
+- __ROS Bridge__: a separate library for transfering signals between ROS and CARLA
+
+## CARLA native ROS interface
+
+This is the recommended interface, since it offers the best performance with the lowest latency. At the moment the native interface only supports ROS 2. If you are using ROS 1, you must use the ROS Bridge. 
+
+## CARLA ROS Bridge
+
+The [__CARLA ROS Bridge__](https://carla.readthedocs.io/projects/ros-bridge/en/latest/) is a library for connecting ROS to CARLA, it is compatible with both ROS 1 and ROS 2. Since the CARLA ROS Bridge is a separate package, there is additional latency compared to the native interface. The ROS Bridge is still provide to support ROS 1 and legacy implementations with ROS 2. 
+

Docs/ext_docs.md

@@ -13,7 +13,7 @@ Below, you will find in depth documentation on the many extensive features of CA
 
 ## Traffic Simulation
 
-[__ Traffic Simulation Overview__](ts_traffic_simulation_overview.md) — An overview of the different options available to populate your scenes with traffic.  
+[__Traffic Simulation Overview__](ts_traffic_simulation_overview.md) — An overview of the different options available to populate your scenes with traffic.  
 [__Traffic Manager__](adv_traffic_manager.md) — Simulate urban traffic by setting vehicles to autopilot mode.  
 
 ## References
@@ -23,17 +23,18 @@ Below, you will find in depth documentation on the many extensive features of CA
 
 ## Custom Maps
 
+[__Digital Twin Tool__](adv_digital_twin.md) — A procedural map generation tool that uses OpenStreetMap data  
 [__Overview of custom maps in CARLA__](tuto_M_custom_map_overview.md) — An overview of the process and options involved in adding a custom, standard sized map.   
 [__Create a map in RoadRunner__](tuto_M_generate_map.md) — How to generate a customs, standard sized map in RoadRunner.  
-[__ Import map in CARLA package__](tuto_M_add_map_package.md) How to import a map in a CARLA package.  
+[__Import map in CARLA package__](tuto_M_add_map_package.md) How to import a map in a CARLA package.  
 [__Import map in CARLA source build__](tuto_M_add_map_source.md) — How to import a map in CARLA built from source.  
 [__Alternative ways to import maps__](tuto_M_add_map_alternative.md) — Alternative methods to import maps.  
-[__ Manually prepare map package__](tuto_M_manual_map_package.md) — How to prepare a map for manual import.  
+[__Manually prepare map package__](tuto_M_manual_map_package.md) — How to prepare a map for manual import.  
 [__Customizing maps: Layered maps__](tuto_M_custom_layers.md) — How to create sub-layers in your custom map.  
-[__ Customizing maps: Traffic lights and signs__](tuto_M_custom_add_tl.md) — How to add traffic lights and signs to your custom map.  
-[__ Customizing maps: Road painter__](tuto_M_custom_road_painter.md) — How to use the road painter tool to change the appearance of the road.
+[__Customizing maps: Traffic lights and signs__](tuto_M_custom_add_tl.md) — How to add traffic lights and signs to your custom map.  
+[__Customizing maps: Road painter__](tuto_M_custom_road_painter.md) — How to use the road painter tool to change the appearance of the road.
 [__Customizing Maps: Procedural Buildings__](tuto_M_custom_buildings.md) — Populate your custom map with buildings.  
-[__ Customizing maps: Weather and landscape__](tuto_M_custom_weather_landscape.md) — Create the weather profile for your custom map and populate the landscape.  
+[__Customizing maps: Weather and landscape__](tuto_M_custom_weather_landscape.md) — Create the weather profile for your custom map and populate the landscape.  
 [__Generate pedestrian navigation__](tuto_M_generate_pedestrian_navigation.md) — Obtain the information needed for walkers to move around.  
 
 ## Large Maps

Docs/map_town12.md

@@ -217,6 +217,8 @@ window.addEventListener('load', function () {
         parentX.replaceChild(newX, text_coord_x);
         parentY.replaceChild(newY, text_coord_y);
 
+        //console.log(state.pX + ", " + state.pY)
+
     })
 
 })

Docs/map_town13.md

@@ -0,0 +1,228 @@
+# Town 13
+
+![town_13](../img/catalogue/maps/town13/town13montage.webp)
+
+Town 13 is a Large Map with dimensions of 10x10 km<sup>2</sup>. It is divided into 36 tiles, most with dimensions of 2x2 km<sup>2</sup> (some edge tiles are smaller). There are numerous contrasting regions to the city including urban, residential and rural areas, along with a large highway system surrounding the city with a ringroad. The architectural styles reflect those of many medium to large cities across North America.  
+
+!!! note
+    Town 13 has been designed as an adjunct to Town 13, such that they can serve as a __train-test pair__. The towns share many common features, but also many differences in the styles of buildings, road textures, pavement textures and also vegetation. Using one of the pair to produce training data and then using the other for testing is ideal for exposing overfitting issues that might be arising while developing an AD stack.
+
+## Navigator
+
+The navigator interactive map can be used to browse the town and derive coordinates to use in the CARLA simulator.
+
+__Using the navigator__:
+
+* `left mouse button` - click and hold, drag left, right, up or down to move the map
+* `scroll mouse wheel` - scroll down to zoom out, scroll up to zoom in on the location under the mouse pointer
+* `double click` - double click on a point on the map to record the coordinates, you will find the coordinates in the text and the code block just below the map
+
+__Zone color reference__:
+
+* <span style="color:#595d5e; background-color:#595d5e;">&nbsp</span>   [Skyscraper](#high-rise-downtown)
+* <span style="color:#d2dddc; background-color:#d2dddc;">&nbsp</span>   [High density residential](#high-density-residential)
+* <span style="color:#838c8b; background-color:#838c8b;">&nbsp</span>   [Community buildings](#community-buildings)
+* <span style="color:#17d894; background-color:#17d894;">&nbsp</span>   [Low density residential](#low-density-residential)
+* <span style="color:#df6a19; background-color:#df6a19;">&nbsp</span>   [Parks](#parks)
+* <span style="color:#839317; background-color:#839317;">&nbsp</span>   [Rural farmland](#rural-and-farmland)
+* <span style="color:#265568; background-color:#265568;">&nbsp</span>   [Water](#water)
+
+
+
+![town13_aerial](../img/catalogue/maps/town13/town13roadrunner.webp#map)
+
+
+__CARLA coordinates__: 
+
+* __X__:  <span id="carlacoord_x" style="animation: fadeMe 2s;">--</span>
+* __Y__:  <span id="carlacoord_y" style="animation: fadeMe 2s;">--</span>
+
+
+After double clicking on a point of interest, the navigator will display the corresponding CARLA coordinates and update them in the following code block. Copy and paste the code into a notebook or Python terminal to translate the spectator to the desired location. You will need first to [connect the client and set up the world object](tuto_first_steps.md#launching-carla-and-connecting-the-client):
+
+```py
+# CARLA coordinates: X 0.0, Y 0.0
+spectator = world.get_spectator()
+loc = carla.Location(0.0, 0.0, 300.0)
+rot = carla.Rotation(pitch=-90, yaw=0.0, roll=0.0)
+spectator.set_transform(carla.Transform(loc, rot))
+```
+## Town 13 zones
+
+#### High-rise downtown:
+
+Town 13's downtown area is a large span of high-rise skyscrapers arranged into blocks on a consistent grid of roads, resembling downtown areas in many large American and European cities.
+
+![high_rise](../img/catalogue/maps/town13/high_rise.webp)
+
+#### Community buildings:
+
+The community buildings are a set of 2-4 storey apartment buildings in a colorful bohemian style with businesses on the ground floors, located next to the downtown area of the city.
+
+![community](../img/catalogue/maps/town13/community.webp)
+
+#### High density residential:
+
+The high density residential areas of Town 13 have many 2-10 storey apartment buildings with commercial properties like cafes and retail stores at street level. Many of the residential blocks have balconies with sun shades similar to those in sunny southern European countries.
+
+![high_dens_res](../img/catalogue/maps/town13/high_dens_res.webp)
+
+#### Low density residential:
+
+The low density residential regions of Town 13 reflect the suburbs of many European cities, with one and two story homes surrounded by fenced gardens and garages.
+
+![low_dens_res](../img/catalogue/maps/town13/low_dens_res.webp)
+
+#### Parks:
+
+The dense residential and downtown areas are broken up by small islands of green communal space, juxtaposing green foliage against urban architecture.
+
+![parks](../img/catalogue/maps/town13/parks.webp)
+
+#### Highways and intersections:
+
+Town 13 has an extensive highway system, including 3-4 lane highways, large roundabouts and a causeway over a large body of water.
+
+![highway](../img/catalogue/maps/town13/highway.webp)
+
+#### Rural and farmland:
+
+Town 13 also has rural regions with characteristic farmland buildings like wooden barns and farmhouses, windmills, grain silos, corn fields, hay bails and rural fencing. These areas have unmarked country dirt roads and single lane interurban roads for inter-city traffic.
+
+![rural](../img/catalogue/maps/town13/rural.webp)
+
+#### Water:
+
+There are several bodies of water in town 13 including a large lake with a central island and several ponds in rural areas. 
+
+![water](../img/catalogue/maps/town13/water.webp)
+
+<style>
+@keyframes fadeMe {
+  from {
+    color: #77aaff;
+  }
+  to {
+    color: #000000;
+  }
+}
+
+</style>
+<script>
+window.addEventListener('load', function () {
+
+    var text_coord_x = document.getElementById("carlacoord_x")
+    var text_coord_y = document.getElementById("carlacoord_y")
+    const code_coords = document.getElementsByClassName("hljs-number")
+    const code_comment = document.getElementsByClassName("hljs-comment")
+  
+    const image = document.querySelector('[src$="map"]');
+    const canv = document.createElement('canvas');
+
+    canv.setAttribute('height', image.height)
+    canv.setAttribute('width', image.width)
+    image.parentNode.replaceChild(canv, image)
+
+    var state = {mDown: false, button: 0, lastX: 0, lastY:0, canvX: 0, canvY: 0, zoom: 1.0, mdownX: 0, mdownY: 0, pX: 0.5, pY: 0.5, dblClick: false, listObj: false, touch: false}
+
+    ctx = canv.getContext('2d')
+    ctx.drawImage(image, 0, 0, canv.width, canv.height)
+
+    canv.addEventListener('mousemove', (event) => {
+        dX = event.clientX - state.lastX
+        dY = event.clientY - state.lastY
+        state.lastX = event.clientX
+        state.lastY = event.clientY
+
+        if(state.mDown && state.button == 0) {
+            state.canvX += dX
+            state.canvY += dY
+            ctx.clearRect(0, 0, canv.width, canv.height)
+            ctx.drawImage(image,  state.canvX, state.canvY, canv.width * state.zoom, canv.height * state.zoom)
+            state.touch = true;
+        }
+    })
+
+    canv.addEventListener('mousedown', (event) => {
+
+        state.button = event.button;
+        state.mDown = true;
+        state.touch = true;
+
+        var rect = canv.getBoundingClientRect();
+            
+        state.mdownX = event.clientX - rect.left;
+        state.mdownY = event.clientY - rect.top;
+
+        state.pX = (state.mdownX - state.canvX) / (canv.width * state.zoom);
+        state.pY = (state.mdownY - state.canvY) / (canv.height * state.zoom);
+    })
+
+    canv.addEventListener('mouseup', (event) => {
+        state.mDown = false;
+    })
+
+    canv.addEventListener('wheel', (event) => {
+        
+        state.mDown = false;
+
+        var rect = canv.getBoundingClientRect();
+
+        dX = event.clientX - rect.left;
+        dY = event.clientY - rect.top;
+
+        state.pX = (dX - state.canvX) / (canv.width * state.zoom);
+        state.pY = (dY - state.canvY) / (canv.height * state.zoom);
+
+        if(state.touch){
+            event.preventDefault();
+            if(event.wheelDelta > 0){
+                state.zoom *= 1.15 
+            } else {
+               state.zoom *= 0.85
+            }
+
+            if(state.zoom < 1.0){state.zoom = 1.0;}
+            if(state.zoom > 30.0){state.zoom = 30.0}
+
+            ctx.clearRect(0, 0, canv.width, canv.height)
+
+            state.canvX = - canv.width * state.zoom * state.pX + dX;
+            state.canvY = - canv.height * state.zoom * state.pY + dY;
+
+            ctx.drawImage(image,  state.canvX, state.canvY, canv.width * state.zoom, canv.height * state.zoom);
+        }
+        
+    })
+
+    canv.addEventListener('dblclick', (event) => {
+        
+        text_coord_x = document.getElementById("carlacoord_x")
+        text_coord_y = document.getElementById("carlacoord_y")
+
+        const carlaX = 14556.0868 * state.pX + -7.34734913 * state.pY - 6655.00941;
+        const carlaY = 2.19186383 * state.pX + 12431.3323 * state.pY - 4524.46039;
+
+        code_coords[0].textContent = carlaX.toFixed(1)
+        code_coords[1].textContent = carlaY.toFixed(1)
+        code_comment[0].textContent = "# CARLA coordinates - X: " + carlaX.toFixed(1) + " Y: " + carlaY.toFixed(1)
+
+        var newX = text_coord_x.cloneNode(true)
+        var newY = text_coord_y.cloneNode(true)
+
+        newX.textContent = carlaX.toFixed(1)
+        newY.textContent = carlaY.toFixed(1)
+
+        var parentX = text_coord_x.parentNode
+        var parentY = text_coord_y.parentNode
+
+        parentX.replaceChild(newX, text_coord_x);
+        parentY.replaceChild(newY, text_coord_y);
+
+        //console.log(state.pX + ", " + state.pY)
+
+    })
+
+})
+</script>
+

Docs/map_town15.md

@@ -0,0 +1,17 @@
+# Town 15
+
+![town_15](../img/catalogue/maps/town15/town15montage.webp)
+
+Town 15 is a map based on the road layout of the Autonomous University of Barcelona (Universitat Autònoma de Barcelona). Some emblematic buildings from the modern campus are modelled in the map, including the humanities library, the medicine building and also the Computer Vision Center, the birthplace of CARLA. 
+
+## Computer Vision Center
+
+The map includes the Computer Vision Center (CVC - Centre de Visió per Computador in Catalan) is a world reknowned research center for research in computer vision and is where the CARLA development team is based. 
+
+![CVC](../img/catalogue/maps/town15/cvc.png)
+
+## Humanities Library 
+
+Known as the Biblioteca d'Humanitats in Catalan, this building houses literature covering many disciplines for the students and researchers studying and working at the Autonomous University of Barcelona. 
+
+![library](../img/catalogue/maps/town15/library.png)

Docs/tuto_content_authoring_maps.md

@@ -6,6 +6,7 @@ In this tutorial we will cover the process of creating a simple map for use with
 
 * __[Prerequisites](#prerequisites)__  
 * __[Large maps](#large-maps)__
+* __[Digital Twin Tool](#digital-twin-tool)__
 * __[RoadRunner](#create-a-road-network-using-roadrunner)__  
 * __[Importing into CARLA](#importing-your-road-network-into-carla)__
 * __[Importing assets](#importing-assets-and-adding-them-to-the-map)__
@@ -31,6 +32,11 @@ To follow this guide, you will need to build CARLA from source, so that you may
 ## Large Maps
 
 The following text details the procedures for creating and decorating a standard map. From version 0.9.12, CARLA has the Large Maps functionality. Large maps are bigger in scale than standard maps, and can be up to 100 km<sup>2</sup> in size. Large maps work in a slightly different way to standard maps, because of hardware limitations, even in high end graphics cards. Large maps are split up into tiles, and only the tiles needed immediately (i.e. those closest to the Ego vehicle) are loaded during the simulation. Other tiles sit dormant until the data is needed. This facilitates the highest performance for CARLA simulations. Most of the details that follow are similar when building a Large Map, but there are some additional steps. Please follow [this guide](content_authoring_large_maps.md) to build a Large Map for CARLA.
+
+## Digital Twin Tool
+
+CARLA offers a procedural map generation tool, which ingests road network data from OpenStreetMap and decorates the map procedurally with buildings and vegetation. Read about how to use the tool [here](adv_digital_twin.md).
+
 ## Create a road network using RoadRunner
 
 Open RoadRunner and create a new scene. Choose the Road Plan Tool and right click in the workspace to drop the first control point for the road. Click and drag elsewhere in the workspace to extend the road. 

mkdocs.yml

@@ -44,7 +44,7 @@ nav:
   - 'OpenDRIVE': 'adv_opendrive.md'
   - 'PTV Vissim': 'adv_ptv.md'
   - 'RSS': 'adv_rss.md'
-  - 'ROS': 'https://carla.readthedocs.io/projects/ros-bridge/en/latest/'
+  - 'ROS': https://carla.readthedocs.io/projects/ros-bridge/en/latest/
   - 'Scenic': 'tuto_G_scenic.md'
   - 'SUMO': 'adv_sumo.md'