Filter Mapillary images by organzation_id

src/options.js

@@ -357,6 +357,7 @@ export function buildStyle(styleDescriptor) {
  * @property {string} viewer The viewer to use (google or mapillary)
  * @property {string} key ClientId for Mapillary
  * @property {number} [bufferSize] Buffer size in pixels for Mapillary bbox
+ * @property {string} [organizationId] The id of the Mapillary organization to get images from.
  */
 
 /**

src/streetview/MapillaryGraphQueryCreator.js

@@ -0,0 +1,61 @@
+/**
+ * Mapillary GraphQueryCreator which allow filtering by organisation_id.
+ */
+export default class MapillaryGraphQueryCreator {
+  /**
+   * @param {string} organizationId The id of the organization to get images from.
+   */
+  constructor(organizationId) {
+    this.organizationId = organizationId;
+
+    this.imagesPath = 'images';
+    this.sequencePath = 'image_ids';
+    this._imageTilesPath = 'tiles';
+
+    this.coreFields = ['computed_geometry', 'geometry', 'sequence'];
+    this.idFields = ['id'];
+    this.spatialFields = [
+      'altitude',
+      'atomic_scale',
+      'camera_parameters',
+      'camera_type',
+      'captured_at',
+      'compass_angle',
+      'computed_altitude',
+      'computed_compass_angle',
+      'computed_rotation',
+      'creator',
+      'exif_orientation',
+      'height',
+      'merge_cc',
+      'mesh',
+      'organization',
+      'quality_score',
+      'sfm_cluster',
+      'thumb_1024_url',
+      'thumb_2048_url',
+      'width',
+    ];
+    this.imageTileFields = ['url', 'z', 'x', 'y'];
+  }
+
+  images(imageIds, fields) {
+    return `image_ids=${imageIds.join(',')}&fields=${fields.join(',')}`;
+  }
+
+  imagesS2(cellId, fields) {
+    return `organization_id=${this.organizationId}&s2=${cellId}&fields=${fields.join(',')}`;
+  }
+
+  imageTiles(z, fields) {
+    return `z=${z}&fields=${fields.join(',')}`;
+  }
+
+  imageTilesPath(imageId) {
+    return `${imageId}/${this._imageTilesPath}`;
+  }
+
+  sequence(sequenceId) {
+    return `sequence_id=${sequenceId}`;
+  }
+}

src/streetview/MapillaryService.js

@@ -19,6 +19,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 import {StreetviewService} from './Service';
+import MapillaryGraphQueryCreator from './MapillaryGraphQueryCreator';
 import {buffer} from 'ol/extent';
 const MLY_METADATA_ENDPOINT = 'https://graph.mapillary.com';
 
@@ -34,8 +35,18 @@ export default class MapillaryService extends StreetviewService {
    * @param {(newCoordinates: import('ol/coordinate').Coordinate | null) => void} handlePanoramaPositionChange Position change handler.
    * @param {string} accessToken The key to access the mapillary api.
    * @param {number} bufferSize The size to add to the bbox buffer.
+   * @param {string} organizationId The id of the organization to get images from.
    */
-  constructor($scope, $timeout, $http, map, handlePanoramaPositionChange, accessToken, bufferSize) {
+  constructor(
+    $scope,
+    $timeout,
+    $http,
+    map,
+    handlePanoramaPositionChange,
+    accessToken,
+    bufferSize,
+    organizationId,
+  ) {
     super($scope, map, handlePanoramaPositionChange);
 
     /**
@@ -65,14 +76,20 @@ export default class MapillaryService extends StreetviewService {
      */
     this.bufferSizePx_ = bufferSize || 10;
 
+    /**
+     * The organization to get images from (filter images by organisation_id).
+     *
+     * @private
+     */
+    this.organizationId = organizationId;
+
     /**
      * Container of the mapillary viewer.
      */
     this.mapillaryElement = document.getElementById('mly');
     this.mapillaryElement.hidden = true;
     import(/* webpackChunkName: "mapillary" */ 'mapillary-js').then((Mapillary) => {
-      this.Mapillary = Mapillary;
-      this.mly = new Mapillary.Viewer({
+      const viewerOptions = {
         accessToken: this.accessToken_,
         container: 'mly',
         component: {
@@ -81,7 +98,25 @@ export default class MapillaryService extends StreetviewService {
             visible: false,
           },
         },
-      });
+      };
+
+      if (this.organizationId) {
+        const queryCreator = new MapillaryGraphQueryCreator(this.organizationId);
+
+        const dataProvider = new Mapillary.GraphDataProvider(
+          {
+            accessToken: this.accessToken_,
+          },
+          undefined,
+          undefined,
+          queryCreator,
+        );
+        viewerOptions.dataProvider = dataProvider;
+      }
+
+      this.Mapillary = Mapillary;
+      this.mly = new Mapillary.Viewer(viewerOptions);
+
       window.addEventListener('resize', () => {
         this.resize();
       });
@@ -167,7 +202,16 @@ export default class MapillaryService extends StreetviewService {
    */
   searchImage_(bbox) {
     const baseUrl = `${MLY_METADATA_ENDPOINT}/images`;
-    const path = `${baseUrl}?access_token=${this.accessToken_}&fields=id&bbox=${bbox}&limit=1`;
+    const params = new URLSearchParams([
+      ['access_token', this.accessToken_],
+      ['fields', 'id'],
+      ['bbox', bbox],
+      ['limit', '1'],
+    ]);
+    if (this.organizationId) {
+      params.append('organization_id', this.organizationId);
+    }
+    const path = `${baseUrl}?${params.toString()}`;
     return this.$http_.get(path).then(
       /**
        * @param {any} response object.

src/streetview/component.js

@@ -317,6 +317,7 @@ class StreetviewController {
     }
     const accessToken = this.options.key;
     const bufferSize = this.options.bufferSize;
+    const organizationId = this.options.organizationId;
     //wait for the mly div to be there before making the service which needs it
     this.timeout_(() => {
       const mapillaryService = new MapillaryService(
@@ -327,6 +328,7 @@ class StreetviewController {
         this.handlePanoramaPositionChange_,
         accessToken,
         bufferSize,
+        organizationId,
       );
       this.scope_.$watch(
         () => this.panelWidth,