Fix & Enable: Browser Does not Support Mapbox GL [Chrome]

If you are seeing this error message, it means that the web browser you are using does not support Mapbox GL, a technology essential for rendering maps on AllTrails. So, what browser supports Mapbox-GL?

Currently, Mapbox.com and its associated subdomains, such as docs.mapbox.com, are compatible with all available web browsers, including Internet Explorer 11.

In fact, it’s supported by all browsers that support WebGL, a GPU-propelled JavaScript-based technique for rendering dynamic 3D graphics. If, for instance, your browser suddenly failed to initialize WebGL, you’ll have a hard time running 3D content in games and such.

However, the error stating that the browser does not support Mapbox GL can pop up even though your browser does support Mapbox GL. For instance, we were able to trigger this error in Firefox, which is considered a Mapbox GL-compatible browser along with Chrome, Safari, and Edge.

Why does my browser not support Mapbox-GL?

Here’s what you can expect to see:

• the map container element should be empty, otherwise the map’s interactivity will be negatively impacted. if you want to display a message when WebGL is not supported, use the Mapbox GL supported plugin instead.
• your browser does not support WebGL so cannot display maps
• Mapbox not working in Chrome
• MapboxGL is not defined

When you see this error, you will either need to switch to a new browser or update your current browser to the most recent version.

If you do decide to go for a Mapbox alternative browser, we encourage you to give Opera a try and we can guarantee that it does a fine job at working with WebGL-based technologies.

Should you use a particular browser and want to enable WebGL or have already upgraded to the most recent version but are still encountering this problem, check the browser’s settings to see if you can make the changes.

There are several configuration changes you may make to guarantee that Mapbox GL is turned on. Keep on reading to find out more about it!

How do I fix a browser that does not support Mapbox GL?

• 1. Update your browser to the latest version
• 2. Allow hardware acceleration
• 3. Enable WebGL
  • 3.1. Allow WebGL on Chrome
  • 3.2. Allow WebGL on Firefox
  • 3.3. Allow WebGL on Safari
• What is the difference between Mapbox and Mapbox-GL?

1. Update your browser to the latest version

1. Launch Chrome and click on the three vertical dots icon in the upper-right corner.
2. In the Settings menu, identify the Help option and hover over it with your mouse.
3. Select About Google Chrome in the new window. Your browser will automatically search for updates and install them if available.
4. Finally, restart Chrome and check if the error stating your browser does not support Mapbox GL is still there.

As always, you should not ignore outdated browser warnings and make sure you always have the latest version available installed in order to avoid web errors and other incompatibility issues.

2. Allow hardware acceleration

1. Open Google Chrome and click on the three-dot menu from the top right corner to select Settings.
2. Scroll down and select Advanced, followed by System.
3. Next, allow the Use hardware acceleration when available option.
4. Refresh or restart Chrome to apply the changes made. This way, the Mapbox not working in Chrome issue will be resolved.

3. Enable WebGL

3.1. Allow WebGL on Chrome

1. Launch Chrome and type the following in the URL address bar: chrome://flags/
2. Use the search box to look for WebGL-related options and make sure you set the value to Enabled.  
3. Finally, click Relaunch Now to restart Chrome.

3.2. Allow WebGL on Firefox

1. Open Firefox and paste about:config in your URL bar in order to search for the webgl.enable-webgl2 option.
2. Once you find it down the page, make sure it is set to true. If it isn’t, click on the reverse icon to the right in order to set the option to true.
3. Next, look for the webgl.force-enabled option and check whether it is set to true. If it isn’t, set it just like we did in the second step.
4. Lastly, search for webgl.disabled and make sure this preference is set to false.
5. Restart or refresh Firefox in order to apply the changes made. That’s it! Even if Mapbox GL is supported, you will have to tweak the above settings.

3.3. Allow WebGL on Safari

1. Open Safari and from the menu bar, click Safari, then select Preferences.
2. Navigate to the Websites tab.
3. Select WebGL from the list on the left side of the window. Note that this will only be displayed if it is displayed. If you can’t find it, it means it is enabled already.
4. Refresh or restart Safari to apply the changes made.

What is the difference between Mapbox and Mapbox-GL?

Mapbox GL JS is a client-side JavaScript framework that you can use to build online maps and web apps. The best part is that you can view Mapbox maps in a web browser or client by using this technology.

Additionally, using this same tool, you can add user interactivity and modify the map experience within your application.

Instead of being generated statically on a server, Mapbox GL JS maps are dynamically produced in the browser by merging vector tiles with style rules (mapbox-gl/dist/mapbox-gl css).

This allows for the style and the data presented on the maps to be altered in response to user input.

1. Head to Mapbox’s docs website.
2. Copy the embedded script and paste it into your website’s code to have Mapbox integrated into it.
3. Change any additional parameters that you want to customize your map.

If your browser does not support Mapbox GL in Strava, we recommend you look at our post on what to do if your browser does not support WebGL, as you will find more solutions there.

The map service offered by Mapbox is highly versatile. You can also include it in mobile applications by using the SDKs that are specific to iOS and Android.

Of course, there is also a Mapbox GL API and plugin available. As far as Mapbox troubleshooting is concerned, you needn’t worry. If your browser does not support Mapbox GL, update it first, then make sure WebGL is enabled. Should none of that work, simply go for an alternative browser that supports Mapbox-GL.

Was this guide useful to you? Don’t hesitate to leave a comment in the section below and share your thoughts with us. Thanks for reading!