Skip to content
/ masterplan Public template

✅ Masterplan Cottbuser Ostsee 3.0 - Demosession: A rendering of an illustrative map georeferenced in an interactive web-map with leaflet.js on GitHub Pages. 🇩🇪 Georeferenzierten Entwurfsplan als Map in einer Web-App publizieren mit Standortermittlung.

License

Notifications You must be signed in to change notification settings

stadtentwicklung/masterplan

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🗺️ Masterplan Cottbuser Ostsee 3.0

✅ Georeferenziertes Rendering (Rasterbild) erstellen und als Web-Map publizieren mit Standortermittlung.

This link above shows the original repository with a detailed README with more material of how to create such a map in GIS on desktop.

Here are some new information provided about the render-pipeline and the raster-look.

Screenshot der GitHub-Pages App

Screenshot der GitHub-Pages App

🚀 Rendering in detail:

1. The original georeferenced vector plan is saved as a raster image (you can see a piece of the whole plan in two versions: (1) no streets and (2) with classified street infrastructure. (I wanted to know what looks better at the end: (A) streets from the vector plan on top or (B) streets included in the render-process.)

screenshot raster image

2. The next step is to organize the elevation maps for the render-loop. That are the files, which "bumps" the plan to a 2,5D-landscape, which can be logical illuminated with light and shadows. I found three possibilities:

  1. digital surface model (bDOM in german):

digital surface model

  1. digital terrain model (DGM in german):

digital terrain model

  1. making a manual generated model (MGM):

manual generated model

The MGM is a map in grey colors directly changed in the colored original vector plan. Photoshop transform all these pieces automatically in a "Normalmap" for elevation information. I wanted to find out which of these will bumps the plan best.

3. The last task is to fix it together. Every Normalmap will bump the plan individual.

  1. Bumping with bDOM (left), DGM (middle) and both (right):

manual generated model

  1. Bumping with MGM (left) and mixed MGM with DGM (right):

manual generated model

  1. Bumping the version with streets as mentioned above. The right result is the rendering of the final map: Buildings and streets has visible shadows because of the MGM, the surface has details because of the DGM.

manual generated model

☕☕☕ by Stefan

About

✅ Masterplan Cottbuser Ostsee 3.0 - Demosession: A rendering of an illustrative map georeferenced in an interactive web-map with leaflet.js on GitHub Pages. 🇩🇪 Georeferenzierten Entwurfsplan als Map in einer Web-App publizieren mit Standortermittlung.

Topics

Resources

License

Stars

Watchers

Forks