Positioning a Mapbox/Leaflet Map Inside a Container Div

Leaflet map inside a flex container does not show up

The main problem here is your dynamically created div, with id imap.

It renders as a standard div, that take full width of its parent, but since it hasn't got any content (the map renders as an absolute positioned element), its height is 0.

You could make the mapBox a flex container, so the imap element you create with script will stretch and fill its parent.

Stack snippet

var imap = document.createElement('div');imap.id = 'imap';
document.getElementById('mapBox').appendChild(imap); var lmap = L.map('imap',{center:[51.510067,-0.133869],zoom:10});

#container{ display:flex; flex-direction:column-reverse; min-height:400px;}
#picBox{ flex:5; background-image:url(https://placeimg.com/1000/1000/tech); background-size:cover; background-repeat:no-repeat; background-position:center;}
#mapBox{ flex:5; position:relative; border:1px solid red;  display: flex;                    /*  added  */}
#mapBox > div{ flex:1;                       /*  added, fill width of parent  */ /*align-items: stretch;           is default, fill height of parent  */}
#infoBox{ flex:20; border:1px solid blue; display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet"/><div id='container'><div id='infoBox'>Stackoverflow is really cool!</div><div id='picBox'> </div><div id='mapBox'>
</div></div>

Getting the div screen location in Leaflet

The key here is to leverage the latLngToContainerPoint() method of L.Map - it will give you the pixel coordinates relative to the map container of the L.LatLng passed.

So create a container for a tick...

    <div id="topbar"><span id="toptick">↓</span></div>
    <div id="leaflet"></div>

...and use CSS to ensure it's on top of the map container, and has the same width. Then, run a function to translate the map point you want into an offset relative to the top-left corner of the map container...

function repositionEdges(){
    var offset = map.latLngToContainerPoint(geopoint);
}

...run that after map initialization, and after every movement of the map...

repositionEdges();
map.on('move zoom', repositionEdges);

...and finally, inside that function, shift the tick horizontally tweaking its style...

function repositionEdges(){
    var offset = map.latLngToContainerPoint(geopoint);
    document.getElementById('toptick').style.left = offset.x + 'px';
}

You can see a working example at https://next.plnkr.co/edit/60qrWND50mCOQ11T?preview .

This is just one approach. The specific implementation will be different if you're using more than one point, or if you want to use <canvas> for drawing the ticks.

See also the graticule, edge scale bar and edge markers plugins from the Leaflet plugins list. Those plugins contain implementations of similar concepts.

Issue with 100% high Mapbox map when rendering with React

If you use position fixed with 100% width in wrapper, it will cover all width. But if you set position to relative, it will cover just remaining width.

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

This worked in your react-jsfiddle. Please try.

---

Related Topics