Mapbox JS SDK CSS stylesheet causes map to disappear

user_6514033 0
Viewed 494

I'm using the Mapbox JavaScript SDK in a VueJS app. I am able to display a map with no issues. Now I'd like to add some markers. I see on this page that you need to import a CSS stylesheet before markers will work. As suggested in the docs, I've tried both of the following:

  1. import 'mapbox-gl/dist/mapbox-gl.css'; from my Vue Component
  2. <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.3.1/mapbox-gl.css"> from the <head> of my index.html

With either of these, the map disappears, with no visible warnings or errors in the console. Without these, the map shows up fine, but I get a warning saying:

This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.

Where am I going wrong?

mapbox-gl-js vue.js css html javascript
1 Answers

Turns out the map div got collapsed to 0 height when the stylesheet was imported. No idea why, but manually setting the height resolved the issue.

user_65140330
Related