Hi, I’m using ionic framework to develop my mobile application and I use Mapbox javascript sdk in my app.
I read an instruction how to use the sdk. In src/index.html, I imported js and css files like
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />
and in map.ts file, I put this code
var map = new mapboxgl.Map({
style: 'mapbox://styles/mapbox/basic-v9',
center: [100.539513, 13.739444],
zoom: 12,
pitch: 0,
minZoom: 1.5, //restrict map zoom - buildings not visible beyond 13
maxZoom: 17,
container: 'map'
});
var directions = new MapboxDirections({
accessToken: mapboxgl.accessToken,
unit: 'metric',
profile: 'driving',
container: 'directions',
proximity: [100.542239, 13.738442],
controls : { inputs:false, instructions:false, profileSwitcher:false}
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function() {
directions.setOrigin([100.539513, 13.739444]);
directions.setDestination([98.992523, 18.781490]);
map.addControl( directions, 'top-left' );
});
where mapboxgl.accessToken is my secret token.
Everything work well whenI use ionic serve command but when I try to build an app to device using ionic cordova build ios, it show some errror like
[09:39:37] typescript: src/pages/map/map.ts, line: 35
Cannot find name 'MapboxDirections'.
L35: var directions = new MapboxDirections({
L36: accessToken: mapboxgl.accessToken,
Error: Failed to transpile program
at BuildError.Error (native)
at new BuildError (/Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/util/errors.js:16:28)
at /Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/transpile.js:159:20
at transpileWorker (/Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/transpile.js:107:12)
at Object.transpile (/Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/transpile.js:64:12)
at /Users/giffary/Documents/cordova/HRoute2/node_modules/@ionic/app-scripts/dist/build.js:109:82
Anyone can help me how to fix this problem.
Thank you.