0

I'm new on React, but due to requirements at an assigment in college, I must use it . I must do a single page application (SPA), with various components. I used npx create-react-app to setup the base project, and so you have an idea, it looks like this right now:

enter image description here

Each functionality such as "create new node", "create new line", etc, is an individual component.

On my App.js, I'm setting a state for each component as false, only making it true when the key of the submenu associated with that specific component is clicked, allowing me to switch between the sidebar options with no problem, and then at each component, I have display: false at the state and also this:

componentWillUpdate(nextprops) { if (nextprops.display !== this.props.display) { this.setState({ display: nextprops.display }); } }

so it makes that display true, so that component is loaded. Everything works nicely, only the map viewer has a problem where the map by mapboxgl displays in full screen, covering the sidebar, not allowing me to change between components. The MapViewer component code is:

import React, { Component } from "react"; import mapboxgl from "mapbox-gl"; //import 'mapbox-gl/dist/mapbox-gl.css' mapboxgl.accessToken="MY_KEY_IS_HERE"; class MapViewerComp extends Component { constructor(props) { super(props); this.state = { longitude: -8.562298, latitude: 41.187181, zoom: 12, display: false, }; } componentWillUpdate(nextprops) { if (nextprops.display !== this.props.display) { this.setState({ display: nextprops.display }); } } displayTheMap = () => { const map = new mapboxgl.Map({ container: "root", style: "mapbox://styles/mapbox/streets-v11", center: [this.state.longitude, this.state.latitude], zoom: this.state.zoom }); var marker = new mapboxgl.Marker().setLngLat([-8.562298, 41.187181]).addTo(map); }; render() { let pageContent = <div></div>; if (this.state.display) { pageContent = ( <div> <div ref={this.displayTheMap} className="mapContainer"/> </div> ); } return <div>{pageContent}</div>; } } export default MapViewerComp;

And the .css looks like this:

.ant-switch-handle { text-align: right; } .mapContainer { position: absolute; top: 0; right: 0; left: 0; bottom: 0; }

When I click the "Map Viewer" option on my sidebar (which corresponds to my (MapViewerComp), it pops out like this:

enter image description here

Since I'm new to React and frontend, the only was I was able to force it to fit my screen like this:

enter image description here

was to add this piece to the .css of this component:

.mapboxgl-canvas{ position: absolute; left: 271px; top: 65px; }

The 2 problems are: 1st: if I force it to the size I want like I showed you, now when I zoom in and out on the map, the marker moves around and doesn't stay in place. 2nd: when I click the other options on the sidebar, to switch between functionalities, it doesn't work, it keeps showing the map.

The code of the index.js at src(with the npx create-react-app structure) is:

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/app/App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); reportWebVitals();

And the code for the index.html on public folder is:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="theme-color" content="#000000"/> <meta name="description" content="Web site created using create-react-app"/> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/> <script src="../src/components/mapViewerComp/MapViewerComp.js"></script> <link href='https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css' rel='stylesheet' /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>

here's the structure of the project as well if it helps in any way:

enter image description here

Any fix to any of the issues would be appreciated. All other components work like a charm, yet the map viewer is not... Thank you in advance.

Improve this question

1 Answer 1

Reset to default
1

Edit: Turns out the mapbox is set to render inside of the app root container, which why it is taking all the available space and not going away when re-rendering the app. Setting margins exposes the sidebar and allows to interact with it but alas doesn't trigger the map to go away.

See the doc here.

Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

Oh that's because you copied the background-color property :) I included it just to demonstrate how the div behaves with those properties but you should delete it, sorry I forgot to mention that! I think what happens is that the background-color overrides the map because it's a background in itself!
Basically just delete this line: background-color: #ffbb00;
I've updated the demo if you just want to copy-paste it again: codepen.io/theophilelouvel/pen/vYXEBNe
Adding background colors to a <div> is just a very common way of visually checking how it will behave with a set of given properties, otherwise you can never be really sure how much space it takes and how it works out in your global structure, it's a useful thing to do when you're working on your layout :)
Any chance you could make a .zip of your project (deleting the node modules folder first) and send me a download link like from Google Drive for instance? At this point we're just guessing around but without the source code it's going to be hard to help in a meaningful way :/ I still think it's just an html/css problem, but providing a solution might require some playing around with properties to see where the problem comes from
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.