diff --git a/dist/mapbox-gl-directions.js b/dist/mapbox-gl-directions.js
index 1081b96..be6ae87 100644
--- a/dist/mapbox-gl-directions.js
+++ b/dist/mapbox-gl-directions.js
@@ -6680,7 +6680,7 @@ var Directions = function () {
       if (controls.instructions) this.container.appendChild(directionsEl);
 
       this.subscribedActions();
-      this._map.on('style.load', function () {
+      if (this._map.loaded()) this.mapState();else this._map.on('load', function () {
         return _this.mapState();
       });
     }
@@ -6713,12 +6713,13 @@ var Directions = function () {
 
       this.actions.eventEmit('profile', { profile: profile });
 
-      var geojson = new mapboxgl.GeoJSONSource({
+      var geojson = {
+        type: 'geojson',
         data: {
           type: 'FeatureCollection',
           features: []
         }
-      });
+      };
 
       // Add and set data theme layer/style
       this._map.addSource('directions', geojson);
diff --git a/src/directions.js b/src/directions.js
index 3eb2bc5..14a6a3d 100644
--- a/src/directions.js
+++ b/src/directions.js
@@ -70,7 +70,8 @@ export default class Directions {
     if (controls.instructions) this.container.appendChild(directionsEl);
 
     this.subscribedActions();
-    this._map.on('style.load', () => this.mapState());
+    if (this._map.loaded()) this.mapState()
+    else this._map.on('load', () => this.mapState());
   }
 
   /**
@@ -90,12 +91,13 @@ export default class Directions {
     // Emit any default or option set config
     this.actions.eventEmit('profile', { profile });
 
-    const geojson = new mapboxgl.GeoJSONSource({
+    const geojson = {
+      type: 'geojson',
       data: {
         type: 'FeatureCollection',
         features: []
       }
-    });
+    };
 
     // Add and set data theme layer/style
     this._map.addSource('directions', geojson);