Module: Embedded-Explorer-API

This is the documentation for the API features of Cloud/Embedded Explorer. It provides a reference for the different methods available. For information on setting up the viewer, please view the quick start guide.

Version: 0.49.2

Methods

(static) addFeatures(features)

Add one or more GeoJSON feature annotations to the map. Currently only accepts GeoJSON objects of type: "Feature". For a full list of supported feature types, see module:Annotation-Types.

Parameters:

Name	Type	Description
`features`	Features	Object containing the features to be added.

See: module:Annotation-Types

Example

Add a point annotation.

map.addFeatures({
  geoJson: [{
    type: "Feature",
    geometry: {
      type: "Point",
      coordinates: [-122.126986, 47.639754],
    },
  }],
});

(static) enableMeasurementPanel(enabled, callbackopt)

Enable or disable the measurement panel.

Parameters:

Name	Type	Attributes	Description
`enabled`	boolean		True to enable the measurement panel, false to disable.
`callback`	function	<optional>	Called after successfully disabling toggling the measurement panel.

Example

map.enableMeasurementPanel(false, () => console.log('Measurement panel disabled'));

(static) enableSearchBar(enabled, callbackopt)

Enable or disable the search bar.

Parameters:

Name	Type	Attributes	Description
`enabled`	boolean		True to enable the search bar, false to disable.
`callback`	function	<optional>	Called after successfully toggling the search bar.

Example

map.enableSearchBar(false, () => console.log('Search bar disabled'));

(static) enableSidebar(enabled, callbackopt)

Enable or disable the sidebar.

Parameters:

Name	Type	Attributes	Description
`enabled`	boolean		True to enable the sidebar, false to disable.
`callback`	function	<optional>	Called after successfully disabling toggling the sidebar.

Example

map.enableSidebar(false, () => console.log('Sidebar disabled'));

(static) enableTimeline(enabled, callbackopt)

Enable or disable the timeline.

Parameters:

Name	Type	Attributes	Description
`enabled`	boolean		True to enable the timeline, false to disable.
`callback`	function	<optional>	Called after successfully disabling toggling the timeline.

Example

map.enableTimeline(false, () => console.log('Timeline disabled'));

(static) enableToolsPanel(enabled, callbackopt)

Enable or disable the tools panel.

Parameters:

Name	Type	Attributes	Description
`enabled`	boolean		Set the value to true to enable the compass in the tools panel, and false to disable it.
`callback`	function	<optional>	Triggered after the compass has been successfully enabled or disabled in the tools panel.

Example

map.enableToolsPanel(false, () => console.log('Tools panel disabled'));

(static) getAppVersion() → {string}

Retrieves the current version of the application. Useful when sending bug reports.

Returns:

- Version of the running application.

Type:: string

Example

// returns 1.0.0
map.getAppVersion();

(static) getFeatures() → {Features}

Returns an object containing all the features that were added to the application using the addFeatures API method.

Returns:

features - Object containing all the features that have been added.

Type:: Features

Example

Retrieve all the feature.

  map.getFeatures();

(static) getLayers() → {Array.<Layer>}

The getLayers API method should return the current status of the layers present in EE. For Ex. If the user has turned on any layers in EE and then calls the getLayers API method, it should now return the list of layers with a few turned on, reflecting the exact current layer status in EE.

Returns:

An array of layer object available in the DB

Type:: Array.<Layer>

Examples

example of getLayers api response:

[{
  id: 3680,
  groupId: 1,
  groupName: 'Group1',
  name: 'AAA_polygon_web_hook',
  visible: false
},
{
  id: 3681,
  groupId: 1,
  groupName: 'Group1',
  name: 'web_hook',
  visible: false
}]

map.getLayers();
map.on('onLayersDataLoad', (layerData)=>{ console.log('Layer results:',layerData)});

(static) getPreferences() → {Object}

Gets the current preferences including image display settings for both panes. Returns an object containing all current preference settings.

Properties

Name Type Description

imageDisplay

Object

Image display settings object

Properties

Name	Type	Description
`mainPane`	string	Current image mode for main pane ('oblique' or 'ortho')
`auxiliaryPane`	string	Current image mode for auxiliary pane ('oblique' or 'ortho')

Returns:

Current preference settings

Type:: Object

Examples

const currentPrefs = map.getPreferences();
console.log('Main pane:', currentPrefs.imageDisplay.mainPane);
console.log('Auxiliary pane:', currentPrefs.imageDisplay.auxiliaryPane);

// Check if main pane is in oblique mode
if (map.getPreferences().imageDisplay.mainPane === 'oblique') {
  console.log('Main pane is showing oblique imagery');
}

// Example of complete getPreferences() response structure
const preferences = map.getPreferences();
// Returns:
{
  "oblique_border": true,
  "ortho_tilt": true,
  "blue_outline": true,
  "compass_controls_north_up": false,
  "my_location_marker": true,
  "imageDisplay": {
    "mainPane": "ortho",
    "auxiliaryPane": "ortho"
  },
  "selectedMeasurementTool": "distance",
  "lastSelectedAreaShape": "area",
  "selectedAnnotationTool": "shape",
  "distanceAttribution": {
    "groundDistanceEnabled": false,
    "groundSlopeEnabled": false,
    "polylineUnit": {
      "unit": "feet",
      "groundSlopeElevDifferenceUnit": "feet"
    }
  },
  "areaAttribution": {
    "fillStyle": { "color": "#FFFF00", "opacity": 0.3 },
    "lineStyle": { "color": "#FFFF00", "width": 2, "opacity": 1 },
    "polygonUnit": { "areaUnit": "feet", "perimeterUnit": "feet" }
  },
  "circularAreaAttribution": {
    "fillStyle": { "color": "#FFFF00", "opacity": 0.3 },
    "lineStyle": { "color": "#FFFF00", "width": 2, "opacity": 1 },
    "circleUnit": { "areaUnit": "feet", "perimeterUnit": "feet" }
  },
  "circleAttribution": {
    "fillStyle": { "color": "#FFFF00", "opacity": 0.3 },
    "lineStyle": { "color": "#FFFF00", "width": 2, "opacity": 1 }
  },
  "rulerAttribution": {
    "length": 100,
    "unit": "feet",
    "color": "#FFFF00",
    "width": 2,
    "opacity": 1
  },
  "heightAttribution": {
    "heightUnit": "feet",
    "color": "#FFFF00",
    "width": 2,
    "opacity": 1
  },
  "slopeAttribution": {
    "slopeUnit": {
      "slopeDistanceUnit": "feet",
      "elevDifferenceUnit": "feet"
    },
    "color": "#FFFF00",
    "width": 2,
    "opacity": 1
  },
  "shapeAttribution": {
    "fillStyle": { "color": "#FFFF00", "opacity": 0.3 },
    "lineStyle": { "color": "#FFFF00", "width": 2, "opacity": 1 }
  },
  "lineAttribution": {
    "color": "#FFFF00",
    "width": 2,
    "opacity": 1
  },
  "contourLayerAttribution": {
    "units": "feet",
    "opacity": 0.8,
    "majorLineColor": "#8B4513",
    "majorLineWeight": 2,
    "minorLineColor": "#D2B48C",
    "minorLineWeight": 1,
    "textColor": "#000000",
    "textOutlineColor": "#FFFFFF"
  },
  "searchbar": {
    "selectedLayerId": -1
  },
  "exportAttribution": {
    "type": "jpeg",
    "pdfFormat": "single",
    "backgroundImagery": true,
    "compass": true,
    "imageDate": true,
    "fileName": true,
    "scale": true
  },
  "identifyTool": {
    "enabledLayers": [],
    "selectedTool": "identifyBox",
    "buffer": "",
    "unit": "feet"
  },
  "layersTab": {
    "displayLayerToggleSwitch": true,
    "enabledLayers": []
  },
  "userConfigured": false,
  "markerAttribution": {
    "fontSize": 24,
    "color": "#FF0000",
    "fontName": "FaMapMarkerAlt"
  },
  "textAttribution": {
    "fontSize": 14,
    "color": "#000000",
    "fontFamily": "Arial"
  },
  "isGPSAcknowledged": false,
  "pendingRequests": []
}

(static) layerSearch(searchObject, callbackopt)

The layerSearch API is a text search method that returns a list of features found within the specified layer. It also automatically navigates to the first matching feature.

Parameters:

Name Type Attributes Description

searchObject

Object

Search parameters.

Properties

Name	Type	Attributes	Description
`id`	number		Layer id for the layer being searched which can be retrieved from getLayers() api
`searchString`	string		A string to search within the layer.
`searchProperties`	Array.<string>	<optional>	An array containing the list of attributes on which the search should be performed.

callback function <optional> (features) => {} callback function returns a GeoJSON feature collection and the response format will be like { features: [ { geometry: { coordinates: [], type: '' }, properties: {}, type: '', } ] }

Examples

LayerSearch with event listener

map.on('layerSearch', (features)=>{ console.log('Layer search results:',features)});
map.layerSearch({ id: 3598, searchString: '15', searchProperties:['apn', 'object_id'] });

LayerSearch with callback function

map.layerSearch({ id: 3263, searchString: '15', searchProperties:['address'] }, (features)=>{console.log(features)});

example of layersearch api response:

{ features: [
         {
             "id": 123456,
             "type": "Feature",
             "geometry": {
                  "type": "Polygon",
                   "coordinates": [
                          [-119.10137799599994, 38.364409468000076],
                          [-119.09784600699999, 38.36741644700004],
                          [-119.09938722199996, 38.368532781000056],
                          [-119.10291920199995, 38.36552575700006],
                          [-119.10137799599994, 38.364409468000076]
                     ]
              },
             "properties": {
                 "addr": null,
                 "apn": "15",
                 "apn2": "15",
              }
           },
         ]
}

(static) off(eventName)

Remove all listeners for a Embedded-Explorer-API event.

Parameters:

Name	Type	Description
`eventName`	'onViewUpdate' \| 'featureClick' \| 'layerSearch' \| 'Errors' \| 'onMapReady' \| 'onLayersDataLoad' \| 'featureDragEnd'	Name of event

Examples

Stop handling onViewUpdate events.

map.off('onViewUpdate');

Stop handling layerSearch events.

map.off('layerSearch');

Stop handling Errors events.

map.off('Errors');

Stop handling onMapReady events.

map.off('onMapReady');

Stop handling onLayersDataLoad events.

map.off('onLayersDataLoad');

Stop handling feature drag end events.

map.off('featureDragEnd');

(static) on(eventName, listener)

Add an external listener for a Embedded-Explorer-API event.

An 'onViewUpdate' event is dispatched when a view change action has complete.

An 'featureClick' event is dispatched when annotations on the map are clicked. This will be a collection of features, as they may overlap. Features on top will be the first elements in the array

An 'Errors' event is dispatched when an error occurs within an API call.

An 'layerSearch' event is dispatched when layer search API return features.

An 'onMapReady' event is dispatched when map load complete and ready to use.

An 'onLayersDataLoad' event is dispatched when layers fetch API return layers and groups detail after load complete.

A featureDragEnd event is triggered when the dragging of a marker feature is completed. This event applies exclusively to marker features and will not work with other feature types.

Parameters:

Name	Type	Description
`eventName`	'onViewUpdate' \| 'featureClick' \| 'layerSearch' \| 'Errors' \| 'onMapReady' \| 'onLayersDataLoad' \| 'featureDragEnd'	Name of event
`listener`	function	Listener handler function.

See: module:Annotation-Types~MarkerGeoJsonFeature

Examples

Listening for the onViewUpdate event.

map.on('onViewUpdate', (updatedView) => {
  console.log(`updated lat/lon: ${updatedView.lonLat.lat}, ${updatedView.lonLat.lon}`);
  console.log(`updated zoom: ${updatedView.zoom}`);
  console.log(`updated pitch: ${updatedView.pitch}`);
  console.log(`updated rotation: ${updatedView.rotation}`);
});

Listening for the featureClick event.

map.on('featureClick', (features) => {
  for (feature in features) {
    console.log(`Feature Clicked! ${feature.properties.eagleview.value`);
  }
});

Listening for the layerSearch event.

map.on('layerSearch', (features) => {
    console.log(`layer search features! ${features`);
});

Listening for the Errors event.

map.on('Errors', (error) => {
  console.log(error);
});

Listening for the layer data loaded event.

map.on('onLayersDataLoad', (layerData) => {
  console.log(layerData);
});

Listening for the map load complete event.

map.on('onMapReady', () => {
  console.log(onMapReady);
});

Listening for the feature drag end event for marker.

map.on('featureDragEnd', (features) => {
  console.log(features);
});

(static) removeFeatures(featureFilters)

Allows the removal of added geoJson features through the use of a filter function. Features that are returned by the filter will be removed from the map. If no argument is passed in, all feature annotations that were added will be removed.

Parameters:

Name	Type	Description
`featureFilters`	FeatureFilters	Object containing filter functions for removing annotation features.

Examples

Remove all added annotation features.

  map.removeFeatures();

Remove all geoJson point features.

  map.removeFeatures({ geoJson: (feature) => feature.geometry.type === "Point" })

(static) searchAddress(value)

Navigates to the given address and attempts to load the Oblique/Ortho images and display the address at the given location. Example:

Parameters:

Name	Type	Description
`value`	String	Address String.

(static) setAuthToken(token)

Set a new or updated auth token.

Parameters:

Name	Type	Description
`token`	string	New auth token to use.

Example

map.setAuthToken('authToken');

(static) setLonLat(value, callbackopt)

Navigates to the given address and attempts to load the Oblique/Ortho images and display the address at the given location. Callback receives the updated view object.

Parameters:

Name Type Attributes Description

value

Object

lonLat object {lon:, lat:}

Properties

Name	Type	Attributes	Description
`lon`	number		Longitude in WGS84.
`lat`	number		Latitude in WGS84.
`z`	number	<optional>	Elevation value is always entered in meters. The default is height above ellipsodial.
`zType`	string	<optional>	Set the type of elevation reference entered for the z-axis (value.z):

callback function <optional> Called after successfully setting lat lon. Receives the value passed to the function. For height above ellipsoidal(default) = zType: 'HEIGHT_REFERENCE_ELLIPSOIDAL' For height above orthometric = zType: 'HEIGHT_REFERENCE_ORTHOMETRIC'

Examples

Navigate to and display address

map.setLonLat({ lat: 23, lon: 45 }, () => console.log(`Map location set`));

Navigate to and display address with z-axis drawing

map.setLonLat({ lat: 23, lon: 45, z:100 }, () => console.log(`Map location set`));

Navigate to and display address with z-axis drawing and zType option

map.setLonLat({ lat: 23, lon: 45, z:100, zType: 'HEIGHT_REFERENCE_ORTHOMETRIC' }, () => console.log(`Map location set`));

(static) setPitch(value, callbackopt)

Set the pitch of the map view.

Parameters:

Name	Type	Attributes	Description
`value`	number		Map pitch in degrees. The value is clamped to between 0 and 60.
`callback`	function	<optional>	Called after successfully setting pitch. Receives the updated view object.

Example

map.setPitch(10, () => console.log('Map pitch set'));

(static) setPreferences(preferences, callbackopt)

Sets various preferences including image display settings for the specified panes. This method allows programmatically setting preferences including image modes for dual pane mode. All preferences are validated against a strict schema based on the application's default settings. Invalid keys or incorrect types will result in validation errors.

Parameters:

Name Type Attributes Description

preferences

Object

Preference settings object (validated against schema)

Properties

Name Type Attributes Description

imageDisplay

Object

Image display settings object

Properties

Name	Type	Attributes	Description
`mainPane`	string	<optional>	Image mode for main pane ('oblique' or 'ortho') - use 'mainPane' as key
`auxiliaryPane`	string	<optional>	Image mode for auxiliary pane ('oblique' or 'ortho') - use 'auxiliaryPane' as key

callback function <optional> Called after successfully setting preferences

Examples

// Set image display preferences using pane keys
map.setPreference({
  imageDisplay: {
    'mainPane': 'oblique',
    'auxiliaryPane': 'ortho'
  }
}, () => console.log('Image preferences set successfully'));

// This will fail validation - invalid key
map.setPreference({
  invalidKey: 'someValue'  // Error: Invalid key 'invalidKey' - not found in schema
});

(static) setRotation(value, callbackopt)

Set the rotation of the map view.

Parameters:

Name	Type	Attributes	Description
`value`	number		Map rotation angle in degrees.
`callback`	function	<optional>	Called after successfully setting rotation. Receives the updated view object.

Example

map.setRotation(45, () => console.log('Map rotation set'));

(static) setView(value, callbackopt)

Set the current view based on the standard view parameters.

Parameters:

Name Type Attributes Description

value

Object

View parameters.

Properties

Name Type Attributes Default Description

lonLat

Object

longitude and latitude parameters

Properties

Name	Type	Description
`lon`	number	Longitude in WGS84.
`lat`	number	Latitude in WGS84.
`z`	number	Elevation value is always entered in meters. The default is height above ellipsodial.
`zType`	string	Set the type of elevation reference entered for the z-axis (value.z):

zoom number <optional> Map zoom level. Clamped to a value between 1.03 and 26.

pitch number <optional> 5 Map pitch in degrees. Clamped to a value between 0 and 60 degrees.

rotation number <optional> 0 Map rotation in degrees.

callback function <optional> (view) => {} Called after successfully setting the view. Receives the updated view object. For height above ellipsoidal(default) = zType: 'HEIGHT_REFERENCE_ELLIPSOIDAL' For height above orthometric = zType: 'HEIGHT_REFERENCE_ORTHOMETRIC'

Examples

map.setView({ lonLat: {lat: 23, lon: 45}, zoom: 20, pitch: 15, rotation: -75 }, (value) => console.log('View has been set.'));

map.setView({ lonLat:{ lat: 23, lon: 45, z:100 }, zoom: 20, pitch: 15, rotation: -75}, (value) => console.log('View has been set.'));

map.setView({ lonLat:{ lat: 23, lon: 45, z:100, zType: 'HEIGHT_REFERENCE_ORTHOMETRIC' },
 zoom: 20, pitch: 15, rotation: -75, }, (value) => console.log('View has been set.'));

(static) showToastMessages(show, callbackopt)

Show toast messages (unhide them). This allows previously hidden toasts to be displayed again.

Parameters:

Name	Type	Attributes	Description
`show`	boolean		Set the value to true to show the toast messages, and false to hide it.
`callback`	function	<optional>	Triggered after the toast message has been successfully enabled or disabled.

Example

map.showToastMessages(false, () => console.log('Toasts are now visible'));

(static) updateLayers(options)

The updateLayers API method updates the state (i.e. show or hide on the map) of the layers present in EE. Layers are referenced by layerId or groupId. Layer and group IDs can be discovered using the getLayers API method. This API method helps toggle the visibility of layers by turning them TRUE or FALSE.

Parameters:

Name Type Description

options

Object

Options object

Properties

Name	Type	Description
`filter`	function	filter function for altering a feature or layer state on the map. Typically used to alter the visibility, that is show or hide a feature or layer

Properties

Name	Type	Description
`visible`		Boolean if true the layer is made visible on the map, if false the layer is hidden

Example

map.updateLayers({
    filter: (layer) => {
        if (layer.id === 1234) {
            layer.visible = true;
        }
    }
});

(static) zoomIn(valueopt, callbackopt)

Increase the map zoom level. The resulting zoom level is clamped to be between 1.03 and 26.

Parameters:

Name	Type	Attributes	Default	Description
`value`	number	<optional>	1	Steps to increase the zoom level by.
`callback`	function	<optional>		Called after successfully zooming in. Receives the updated view object.

Example

map.zoomIn(2, () => console.log('Map zoom increased'));

(static) zoomOut(valueopt, callbackopt)

Decrease the map zoom level. The resulting zoom level is clamped to be between 1.03 and 26.

Parameters:

Name	Type	Attributes	Default	Description
`value`	number	<optional>	1	Steps to decrease the zoom level by.
`callback`	function	<optional>		Called after successfully zooming out. Receives the updated view object.

Example

map.zoomOut(2, () => console.log('Map zoom decreased'));

Type Definitions

Features

Type:

Object

Properties

Name	Type	Description
`geoJson`	Array.<GeoJsonFeature>	Array of GeoJson features that had been added to the application.

See: module:Annotation-Types

Layer

Type:

Object

Properties

Name	Type	Description
`id`	number	Layer id
`groupId`	number	group id of layer
`groupName`	string	group name of layer
`name`	string	layer name
`visible`	boolean	visibility of layer on the map

Example

{
  id: 3680,
  groupId: 1,
  groupName: 'Group1',
  name: 'AAA_polygon_web_hook',
  visible: false
}