Combining charting with the map

Question

I created a map that shows the location of remote hosts and a graph showing the temperature of each device. I divided the map and graph into two parts, thanks to Bootstrap :

To create a map, I use Leaflet.js, and to create graphs, I use Chart.js. Everything works fine, but how do I make the map fit the entire screen size, and the graph would be located somewhere in the corner.

To make the map stretch to the full screen, I use this code:

$(window).on("resize", function (){
    $("#mapId").height($(window).height());
}).trigger("resize");

If this is not possible or very difficult, how to make a menu that will be located in the corner of the map. I don't want to create a navigation bar from Bootstrap, I just want to have a map for the entire screen size. For example, Google maps has a search in the upper-left corner with a drop-down menu:

I tried something similar, but I can't set the drop-down menu on top of the map :(

user_9307704 · Answer

No need for javascript. Just use this .css styles for the three entities and adjust them as you see fit:

#menu {
    position: absolute;
    top: 0px;
    height: 32px;
    width: 100vw;
}
#map {
    position: absolute;
    float: left;
    top: 32px;
    bottom: 0px;
    width: 60vw;
}
#graph {
    position: absolute;
    width: 40vw;
    left: 60vw;
    top: 32px;
    bottom: 0px;
}

Combining charting with the map

1 Answers