Issues using ES6

[DenisCarriere]

@tristen I'm trying to use your mapbox-gl-compare tool using ES6.

Would be really nice if the end result would something like this:

import mapboxgl from 'mapbox-gl'
import Compare from 'mapbox-gl-compare'

// before & after Map objects //

mapboxgl.Compare(before, after)

Uncaught ReferenceError: mapboxgl is not defined | index.js:5

However, the end result looks like this "hack" looking code.

import mapboxgl from 'mapbox-gl'
window.mapboxgl = mapboxgl
import Compare from 'mapbox-gl-compare'

// before & after Map objects //

mapboxgl.Compare = Compare
mapboxgl.Compare(before, after)

Even after doing that, I'm still catching some errors.

Uncaught TypeError: this._setPosition is not a function | index.js:20

[tristen]

See mapbox/mapbox-gl-js#1835

Even after doing that, I'm still catching some errors.

Uncaught TypeError: this._setPosition is not a function | index.js:20

I suspect this is because of instantiation (ie. lacking new keyword in front of mapbox.Compare)

[EMTurano]

I'm getting the "mapboxgl is not defined" error as well. Any solutions?

[knynkwl]

I'm having a similar issue. I am trying to import the directions plugin with browserfy but getting errors.

require('mapbox-gl');
require('libs/mapbox-gl-directions');

import mapboxgl from 'mapbox-gl'
window.mapboxgl = mapboxgl;
import Directions from 'libs/mapbox-gl-directions'
mapboxgl.Directions = Directions;

map.addControl(new mapboxgl.Directions());

Uncaught TypeError: _mapboxGl2.default.Directions is not a constructor

[svcninja]

I recently start to use the mapbox-gl-compare with Angular2. I got this error: TypeError: Compare is not a constructor. Could you please give some hints?

Code is as:

const Compare = require("../../../node_modules/mapbox-gl-compare/dist/mapbox-gl-compare");
....
let diffMap = new Compare(beforeMap, afterMap, {
			mousemove: true
});

[gpbmike]

This seems to be working for me.

import mapboxgl from 'mapbox-gl';
import MapboxCompare from 'mapbox-gl-compare';

mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;

const before = new mapboxgl.Map({
  container: 'before',
  style: 'mapbox://styles/mapbox/light-v9',
});

const after = new mapboxgl.Map({
  container: 'after',
  style: 'mapbox://styles/mapbox/dark-v9',
});

new MapboxCompare(before, after);

[lancesparks]

I recently start to use the mapbox-gl-compare with Angular2. I got this error: TypeError: Compare is not a constructor. Could you please give some hints?

Code is as:

const Compare = require("../../../node_modules/mapbox-gl-compare/dist/mapbox-gl-compare");
....
let diffMap = new Compare(beforeMap, afterMap, {
			mousemove: true
});

were you able to ever figure this out? I'm currently having a similar issue

[Korotu-Conroy-Trinh]

A number of things are required to get things right,

1. Below is correct except the last statement

This seems to be working for me.

import mapboxgl from 'mapbox-gl';
import MapboxCompare from 'mapbox-gl-compare';

mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;

const before = new mapboxgl.Map({
  container: 'before',
  style: 'mapbox://styles/mapbox/light-v9',
});

const after = new mapboxgl.Map({
  container: 'after',
  style: 'mapbox://styles/mapbox/dark-v9',
});

new MapboxCompare(before, after);

I needed to do:

let container = 'CSS selector e.g. #sliderContainer'
let compare = new MapboxCompare(beforeMap, afterMap, container, {
 mousemove: true,       /** These parameters are optional*/
 orientation: 'vertical'
})

In addition make three divs, one containing the two others,
make the containing div have a position:relative for its CSS and then
have the two children divs BOTH fill the entire parent by setting:

 position: absolute;
  top: 0;
  bottom:0;
  height: <size of parent div>
  width: <size of parent div>

The parent div should be sized in your css as well and you can use %s

[EyadAyman658]

problem with typescript import any solution found ?

[mhanill]

i had project with React and Mapbox Gl in a vite project .

i had to compare two maps so ...

import mapboxgl from "mapbox-gl";
import MapboxCompare from "mapbox-gl-compare";
useEffect(() => {mapboxgl.accessToken = "YOUR_ACCESSTOKEN";
if (beforeMapContainerRef.current && afterMapContainerRef.current) {
const beforeMap = new mapboxgl.Map({
container: beforeMapContainerRef.current,
style: "mapbox://styles/mapbox/dark-v11",
center: [48.35792871166525, 32.30260913318229],
zoom: 13,
});

const afterMap = new mapboxgl.Map({
container: afterMapContainerRef.current,
style: "mapbox://styles/mapbox/dark-v11",
center: [48.35792871166525, 32.30260913318229],
zoom: 13,
});

const compare = new MapboxCompare(
afterMap,
beforeMap,
"#comparison-container"
);
return () => {
compare.remove();
}}
}, []);

i used like that and does not work , got error for 15 days .

and i had to read MapboxCompare code plugin from node_modules , i realize a point that plugin does not work perfectly as well , it had some import and required issue ,

in that case you got error like this case ,

YOU SHOULD USE MAPBOXCOMPARE

// right
import * as MapboxCompareModule from "mapbox-gl-compare";

// wrong
import MapboxCompare from "mapbox-gl-compare";

i think it works for Angular and Vue