Mapbox / React Challenge
Your task is to build a lightweight Mapbox (https://www.mapbox.com/) demo application for the built environment using webGL and webmapping tools in the React.js framework. Prior experience with WebGL is not required as Mapbox has well documented methods and examples (https://docs.mapbox.com/mapbox-gl-js/api/) for manipulating WebGL within the Mapbox canvas. Choice of state management is up to you.
The first task is to import a building model in .obj format and render the model at a correct scale and orientation to a location in the real world using a custom webGL layer within Mapbox. You may use native webGL or Three.js for the custom integration. The second task is to allow the user to add map-based points and use those points to retrieve data from an external API. You will need to register free Mapbox and OpenWeather accounts for this exercise.
Spend time on functionality and reactivity, we wont grade you on the ui or ux design.
Requirements
- Provide a github repo for the react app with instructions for use
Task One
- Use the light or dark mapbox default map baselayer
- Remove all map labels in code
- Create a custom map control to toggle a satellite layer on and off as an overlay over the map
- Render 3D extruded building shapes in a complementary color the map baselayer you choose and above the satellite layer in draw order
- User can import a 3D .obj building model and place it in the map (https://www.turbosquid.com/3d-model/free/architecture)
Task Two
- User can add point on the map – there are at least two ways to do this (Mapbox Draw or Map Marker Elements)
- User can update the point location in 2 ways:
- User can manually enter [lng, lat] coordinates into form-input fields
- User can drag the point on the map, when the location of the point changes, the map and the ui should both show the correct data
- User can see on the ui as well as the map the correct weather temperature above the point – we suggest using [OpenWeather](https://openweathermap.org/api)
- User can add (and update) as many points as they want. Both the ui and map should display the correct information when any point position changes.
Extra Credit
- Add a component to the app which tracks all user-placed points on creation, displays the temperature values, and allows the user to click on the point in the element list – which should navigate the map to that point, and highlight that element in the component.
- Solve for scaling building models correctly to any point on the globe. (Hint: it depends on latitude)
- User can save all created points (with temperatures) and reload them on page refresh – we suggest using Mapbox’s api [https://docs.mapbox.com/api/maps/#datasets] to save time spinning up a separate backend, unless you prefer this option
This is a test page developed by and for the i/o group.
