mapbox map does not show up in electron app

Question

I am learning Electron development and would like to integrate mapbox into a dummy applicaton. I use electron-forge to initialize the application. It works fine before I add the mapbox in. With mapbox, the map does not show up in the main area of the application.

Here's my very simple code:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
        <link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
        <link href='styles.css' rel='stylesheet' />
    <title></title>
  </head>
  <body>
    <div id='container'></div>

    <script>
        require('./renderer.js')
    </script>
  </body>
</html>

render.js:

var mapboxgl = require("mapbox-gl/dist/mapbox-gl.js");

mapboxgl.accessToken =
  "pk.<SOME_MAGIC_STRING_HERE>";

var map = new mapboxgl.Map({
  container: "container",
  style: "mapbox://styles/mapbox/streets-v11"
});

map.on("load", function() {
  console.log("should show the map", map);

});

Any help is appreciated.

Check your map container div. You need to explicitly style its height and width. — Scarysize, Mar 14 '19 at 17:09
@JeffXiao nice for finding the solution by yourself! Please post it as your answer and accept it, so that people know your issue is solved. — ghybs, Mar 15 '19 at 07:42

score 0 · Accepted Answer · answered Mar 15 '19 at 19:53

0

As mentioned in the comments: The maps container needs to be given an explicit height & width via CSS in order for the map to show up.

#container {
  width: 400px;
  height: 400px;
}

answered Mar 15 '19 at 19:53

Scarysize

4,131
25
37

mapbox map does not show up in electron app

1 Answers1