Check if Mapbox GL JS is supported
Use supported
to check for Mapbox GL browser support, and show an alert if the browser does not support Mapbox GL. Find more information about browser support for Mapbox tools in the Browser support troubleshooting guide.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Check if Mapbox GL JS is supported</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
if (!mapboxgl.supported()) {
alert('Your browser does not support Mapbox GL');
} else {
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12',
center: [-74.5, 40],
zoom: 9
});
}
</script>
</body>
</html>
import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
if (!mapboxgl.supported()) {
alert('Your browser does not support Mapbox GL');
} else {
mapRef.current = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/streets-v12',
center: [-74.5, 40],
zoom: 9
});
}
return () => mapRef.current.remove();
}, []);
return <div ref={mapContainerRef} id="map" style={{ height: '100%' }} />;
};
export default MapboxExample;
Was this example helpful?