CSS layout with mapbox gl js

user_2135737 0
Viewed 749

I'm trying to create a geolocation web application for my own learning. I am using Mapbox GL JS and having a lot of trouble trying to position the map using CSS

I could get the map and a status panel side by side

map with status panel side by side

but I could never make the following:

map with control panel on top and status panel below.

I've googling flexbox and CSS grid (separately) but the results are either makes the map disappear or the status panel + control panel disappear.

What should I look into?

EDIT #1:

/* shows map on left panel and status on the right panel */
<body>
<div id="map"></div>
<div id="log"></div>
<script src="js/scripts.js"></script>
</body>

#map { position: absolute; top: 0; bottom: 0; width: 760%; }
#log { float: right; }

EDIT #2: /* I've tried with bootstrap4. All i get is a map that is visible only if there are status updates */

<div class="container">
    <div class="row">
        <div class="col-6"><div id="map"></div>
        </div>
        <div class="col-6">
            <div id="log"></div>
        </div>
    </div>
</div>

#map { position: absolute; top: 0; bottom: 0; width: 100%; }
mapbox-gl-js flexbox css
1 Answers

The answer is flex. Plain Old Javascript. No bootstrap.

// main.css

.container { padding: 0; margin: 0; display: flex; }
.left { flex: 2; }
.right { flex: 1; background-color: red;}

// main.html

<div class="container">
    <div class="left">
        <div id="map"></div>
    </div>
    <div class="right">
        <div id="control-panel">
            <button id="btncenter">Center</button>
        </div>
        <div id="status"></div>
    </div>
</div>
user_21357370
Related