Open DenisCarriere opened 8 years ago
See https://github.com/mapbox/mapbox-gl-js/issues/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
)
I'm getting the "mapboxgl is not defined" error as well. Any solutions?
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
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
});
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 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
A number of things are required to get things right,
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
problem with typescript import any solution found ?
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
@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:
However, the end result looks like this "hack" looking code.
Even after doing that, I'm still catching some errors.