Generate slanted projection mapboxgl

Trying to develop a building simulator based on zoning codes. I can measure values, create floors, but struggling to extrude diagonally or create a perpendicular plane to the floor for evaluating angles from the street to limit building height (see image 2). Any suggestions on how to achieve this using mapbox gl, or any workarounds like adding threejs volume?

https://i.sstatic.net/nqVd7.png

https://i.sstatic.net/V9NsG.png

Answer №1

To simplify the process, it is recommended to preprocess the necessary data in QGIS before importing it. While creating a diagonally extruded polygon in Mapbox may be challenging, there is a method that has proven to be effective.

  • Begin by importing the geojson file of your building parcel into QGIS through the addLayer menu
  • Generate a grid by navigating to Vector > Research Tools > Create Grid > Square Grid

Set up the Grid menu

  • Ensure that the grid uses your polygon as the Grid Extent. For optimal results, adjust each section to be more than 0.5m horizontally, and vertically, inputting the length of your building as a parameter
  • After creating the grid, select the entire grid and rotate it to align with the desired diagonal extrusion
  • In the field calculator (Attribute Table > Field Calculator), establish a new field named BASE_HEIGHT and assign a value of 0 (or the base value of your shape)
  • Create another field named FILL_EXTRUSION_HEIGHT and devise an expression like id / 5 based on your desired level of detail
  • Save the grid as a geojson file and either upload it to Mapbox or integrate it into your project
  • By utilizing the specified fields, you should achieve a diagonal shape

View the final outcome

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Use Google Calendar API to Retrieve Available Time Slots for a Given Day

Is there a way to extract the list of available time slots from my Google Calendar? Currently, I am only able to retrieve the list of scheduled events. I am utilizing the Google Calendar npm package. google_calendar.events.list(calObj.name,{ timeMin ...

Automate the process of saving information to Google Sheets using Google AppScript

I have a Sheet named 'Automatic' where I've imported a set of data using IMPORTXML. My goal is to update this data list daily at the same time to create a database with various stock quotes over time. Is there a way to accomplish this usin ...

Tips for setting multiple states simultaneously using the useState hook

Exploring the use of multiple states handled simultaneously with the useState hook, let's consider an example where text updates based on user input: const {useState} = React; const Example = ({title}) => { const initialState = { name: &a ...

Using the Nodejs Array prototype filter method within a JSON object

Attempting to create a function that filters and returns specific strings within JSON data. Any advice is appreciated. Thank you! [ { line: '{"status":"waiting"}' } ] var body_W = []; body_W.push({line: JSON.stringif ...

Add the file to the current directory

As a newer Angular developer, I am embarking on the task of creating a web page that enables users to upload files, with the intention of storing them in a specific folder within the working directory. The current location of the upload page component is ...

Using codedeploy to deploy a Next.js application onto an AWS EC2 instance

After creating a fresh NextJS app with only basic boilerplate files and folders, I uploaded it to a CodeCommit repository. I already had a functional CodePipeline and simply switched the Source stages. However, I am encountering deployment failures during ...

"Learn how to create a scrolling div using a combination of CSS and JavaScript with absolute and relative

After relying solely on "pre-made" components like Mui or TailWind, I decided to create a component using only CSS and maybe JavaScript. However, I encountered some difficulties when attempting to position a div inside an image using relative and absolute ...

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

What exactly is Bootstrap - a CSS framework, a JavaScript framework, or a combination

Being new to Bootstrap, I have taken the time to explore What is Bootstrap? as well as http://getbootstrap.com/. From what I understand so far, Bootstrap is a CSS framework that aids in creating responsive designs that can adapt to various devices. Essent ...

Using Backbone for the front end and Node.js for the backend, this website combines powerful technologies

Currently, I am in the process of developing a new website that will function as a single-page application featuring dialog/modal windows. My intention is to utilize Backbone for the frontend and establish communication with the backend through ajax/webs ...

Arrays in Vue Data

After creating an array and pushing data into it, the array turns into a proxy, preventing me from using JavaScript array functions on it. export default { name: 'Home', components: { PokeList, FilterType, SearchPokemon}, data() { r ...

What is the correct way to access an element with spaces in handlebars while working with node.js?

I have an object containing values with spaces in strings. For example: object = { "group of people": [ { (...) } ], "another group of people": [ { (...) } ] } Now, I want to use this object with the handlebars helper block in my view ( ...

In Angular, link a freshly loaded ".js" controller to a newly loaded "html" view following the bootstrapping process on ngRoutes

As a newcomer to Angular, I have been experimenting with loading dynamic views using ngRoutes (which is very cool) along with their respective .js controllers for added functionality. However, I am encountering difficulties in binding them together after b ...

Unlock the mystery of identifying which trace is selected in the plot.ly JS legend

When using plot.ly, it is possible to set up a listener for legend click events. I am wondering how to determine which trace in the legend was clicked on. To provide a more specific example, let's say there are two traces (trace0, trace1) in a line gr ...

Is it possible to attach a Vue component to more than one div element simultaneously?

import Selector from '@components/contactSelector' let vueInstance = new Vue({ components: { Selector }, data () { return { url: url, isFilter: false, type: 'external', selectedList: [] } }, rende ...

There are two distinct varieties of object arrays

I recently encountered an issue while trying to sort my array of Star Wars episodes by episode ID. The problem emerged when comparing two arrays: one manually inputted in the code snippet labeled as "1" on the screenshot, and the other generated dynamicall ...

Tips for triggering the API call only when a change is detected

#In the provided code snippet, the useEffect hook is being used to fetch data from an API using the apiData() function. The data retrieved consists of objects with properties such as id, name, parent name, and isActive. The isActive property is linked to ...

The "src" attribute is missing from the image on the left side

I'm currently facing an issue with the src attribute in this code: An event updates the src based on a variable retrieved from a form. The image files cannot be renamed, so I must work with their existing names. The problem arises as all file names c ...

Regular expression for identifying a specific attribute paired with its corresponding value in a JSON object

Below is a JSON structure that I am working with: 'use strict'; // some comment is going to be here module.exports = { property1: 'value1', property2: 999, }; I am looking to remove the property2: 999, from the JSON. I attempted ...

Loop through every item in Typescript

I am currently working with the following data structure: product: { id: "id1", title: "ProductName 1", additionalDetails: { o1: { id: "pp1", label: "Text", content: [{ id: "ppp1", label: "Tetetet" ...