CODEWITHSUNDEEP
importmapbox-gl-js
Alex
Alex

Reputation: 2479

Use @mapbox instead of 'mapbox-gl' to import mapbox

I want to reduce the number of mapbox dependencies I have. In a React webapp that makes heavy use of Mapbox, I currently import mapbox like this in my javascript file:

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css'

From this mapboxgl import, I instantiate a map, popups, a GeolocateControl, and a NavigationControl. This all works fine.

I also need forward and reverse geocoding, and I use these imports for that:

import Geocoder from '@mapbox/mapbox-gl-geocoder';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
const mbxGeocoding = require('@mapbox/mapbox-sdk/services/geocoding');
const geocodingClient = mbxGeocoding({ accessToken: mapboxgl.accessToken });

These also work fine. Is it possible to replace the import mapboxgl from 'mapbox-gl' and its .css import with a specific import similar to the one I use for the Geocoder? Something like:

import Map from '@mapbox/mapbox-gl-map';

And the same for the popups, geolocatecontrol, and navigationcontrol? Ideally I'd like to be able to remove the 'mapbox-gl' dependency and just have the @mapbox ones. These are my current mapbox dependencies in my package.json file.

  "dependencies": {
    "@mapbox/mapbox-gl-geocoder": "^4.7.0",
    "@mapbox/mapbox-sdk": "^0.11.0",
    "mapbox-gl": "^1.12.0"
  }

What I'm looking for seems to be described here: https://github.com/mapbox/mapbox-sdk-js/tree/master, but I haven't been able how to actually instantiate a map from any of the imports show there. I also tried looking at mapbox projects on codepen, but since codepen obscures the import process a little bit, that wasn't any help either.

Upvotes: 1

Views: 2306

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126747

It looks like Mapbox-SDK has specifically been architected to allow individually services to be used, without importing the whole library. That makes sense - there's no obvious dependency between reverse geocoding and routing, for instance.

But Mapbox-GL hasn't been designed that way, and given that you're using so much of the library anyway (Map, Popup, GeolocateControl, NavigationControl), it's hard to see what benefit you would stand to gain anyway.

(If I understand you right, importing all those things as separate dependencies would increase, not decrease the number of dependencies anyway, which is counter to your goal?)

Upvotes: 3

Related Questions