Terraining - Heightmap Generator

This repository is a Nuxt3 reworking of sysoppl/Cities-Skylines-heightmap-generator.

An online heightmap generator for "Cities: Skylines".
https://terraining.ateliernonta.com

[!IMPORTANT] Currently, my site has thousands of users each month. Considering the number of API requests needed to generate heightmaps for CS2, I am significantly exceeding the free tier limits of Mapbox. Therefore, I kindly ask for your continued cooperation in avoiding costs by inputting your Mapbox token.

Features

• Easily get the heightmap for CS1 and CS2.
• Choose a square area on the map between 8.64 km and 69.12 km for CS1 and between 28.672 km and 229.376 km for CS2.
• Easily rotate the selected square area.
• Download the heightmap, map images, and OSM data. For CS2, you can get both the heightmap and the world map.

How to

1. Choose the area you want to download.
2. Customize the settings within the settings panel to match your preferences.
3. Download either the heightmap or map image, etc.

Setting panel

• Lng & Lat : Adjust your geographic coordinates by modifying these values.
• Min & Max Height : Click the refresh button at the bottom to retrieve current area's minimum and maximum elevations. Please note that slight variations in values may occur due to interpolation based on map size.
• Zoom Level : Set the zoom level of the map.
• Grid Angle : Set the angle of the grid. The angle increases clockwise.
• Map Size : Set the map size. You can change the map size between 1/2 and 4x the default size (CS1 : 17.28 km, CS2 : 57.344 km) . The size includes the unplayable area.
• Sea Level : Elevations below this level are automatically adjusted to 0 m.
• Adjust Level : The sea level is automatically aligned with the minimum height.
• Height Ratio : Define the vertical-to-horizontal distance ratio.
• Height Scale : Set the proportion relative to actual terrain height.
  ‡ Height Ratio and Height Scale are interrelated and are linked to map size. You can lock one.
• Elev. Type : Auto-configures Height Ratio and Height Scale.
  • Manual : No automatic adjustments.
  • Limit : If exceeded, adjusts the maximum elevation to 1,023.98 m (CS1) or elevation scale value (CS2).
  • Maximise : Set the maximum elevation at 1,023.98 m (CS1) or elevation scale value (CS2).
• Water Depth : Modify the water depth.
• Littoral Zone : Adjust the width of littoral zone. Increasing it creates a gradual slope from the coast to the seafloor.
• Littoral Editor : Configure the shape of the littoral slope.

• Smoothing & Sharpen : Set ranges for terrain smoothing and sharpening.

  The refresh button retrieves the minimum and maximum elevation in the grid. Additionally, grid information is displayed in the browser console.

Download panel

• Download the following data :
  • Heightmap in raw data
  • Heightmap in 16-bit grayscale PNG format
  • Map image
  • OSM data
• Configuration Panel
• GitHub link

Control buttons

• Home
• Zoom in
• Zoom out
• Compass
• Grid :
  • Left click : Reset the grid direction to north.
  • Right click : Rotate the map so that the grid is facing up.
• Displays the shape and smooth effect area on the map.

Customize map image panel

• Download map images by customizing style, zoom level, and image size.
  ‡ Depending on the configuration, many API requests may occur, so you'll need a Mapbox access token.

Configuration panel

• Heightmap Type : Choose either CS1 or CS2.
• Interpolation : Choose from Bilinear or Bicubic.
• Elevation Scale : The maximum elevation for CS2.
• Waterside Detail : Adjust the level of detail for waterside drawings.
• Stream Depth : Aiding in the depiction of streams.
• Smooth Count : Determine the number of times the smooth effect is repeated.
• Noise Value : Add or subtract height.
• Noise Detail : Adjust the level of detail for noise. The higher the value, the finer the noise.
• Reflecting the amount of effect : Reflect the sharpen and smooth intensity on the map.
• User Style URL : Downloads a map image using the specified map style.
• Access Token : You will need your own Mapbox access token to download the heightmap for CS2.

ToDo

• [x] Improve the littoral slope shape.
• [x] Make the entire download process a web worker.
• [x] Download map information.
• [x] Download more customized map images.
• [ ] Improve shapeen and smooth behavior in CS2 map.
• [ ] River bed level correction.
• [ ] Support for Larger map mod.