EodashMap ​

The primary map widget. It wraps eox-map and renders the interactive map, a floating button toolbar, and optional cursor coordinates and scale line. It is most often used as the dashboard background, and on mount it provides the map element that the other map-aware widgets read from.

Example ​

As the dashboard background (its most common use):

js
{
  background: {
    id: "background-map",
    type: "internal",
    widget: {
      name: "EodashMap",
      properties: {
        enableCompare: true,
        btns: { enableGlobe: true, enableExportMap: false },
      },
    },
  },
}

As a placed grid widget on the left half of the screen:

js
{
  id: "map",
  title: "Map",
  type: "internal",
  layout: { x: 0, y: 0, w: 6, h: 12 },
  widget: {
    name: "EodashMap",
    properties: { center: [0, 20], zoom: 3 },
  },
}

Properties ​

btns? ​

Toolbar feature flags; set any flag to false to hide the corresponding button.

ts
optional btns?: object = { enableExportMap: true, enableChangeProjection: true, enableCompareIndicators: true, enableBackToPOIs: true, enableSearch: true, enableZoom: true, enableGlobe: true, enableFeedback: true, searchParams: {}, };

enableBackToPOIs? ​

ts
optional enableBackToPOIs?: boolean;

enableChangeProjection? ​

ts
optional enableChangeProjection?: boolean;

enableCompareIndicators? ​

ts
optional enableCompareIndicators?:
  | boolean
  | {
  compareTemplate?: string;
  fallbackTemplate?: string;
  itemFilterConfig?: Partial<{
     aggregateResults: string;
     cssVars: string | Record<string, any>;
     enableCompare: boolean;
     enableHighlighting: boolean;
     expandMultipleFilters: boolean;
     expandMultipleResults: boolean;
     filterProperties: object[];
     filtersTitle: string;
     imageProperty: string;
     resultsTitle: string;
     resultType: string;
     styleOverride: string;
     subTitleProperty: string;
     titleProperty: string;
   }> & Omit<object & VNodeProps & AllowedComponentProps & ComponentCustomProps,
     | "enableCompare"
     | "filtersTitle"
     | "resultsTitle"
     | "imageProperty"
     | "titleProperty"
     | "aggregateResults"
     | "subTitleProperty"
     | "resultType"
     | "cssVars"
     | "enableHighlighting"
     | "expandMultipleFilters"
     | "expandMultipleResults"
     | "styleOverride"
    | "filterProperties">;
};

enableExportMap? ​

ts
optional enableExportMap?: boolean;

enableFeedback? ​

ts
optional enableFeedback?: boolean;

enableGlobe? ​

ts
optional enableGlobe?: boolean;

enableSearch? ​

ts
optional enableSearch?: boolean;

enableZoom? ​

ts
optional enableZoom?: boolean;

searchParams? ​

ts
optional searchParams?: object;

btnsPosition? ​

Grid position of the floating button toolbar. x accepts responsive "mobile/tablet/desktop" column notation.

ts
optional btnsPosition?: object = { x: "12/9/10", y: 1, gap: 16, };

gap ​

ts
gap: number;

x ​

ts
x: string | number;

y ​

ts
y: number;

center? ​

Initial map center as [lon, lat]; falls back to the last stored map position.

ts
optional center?: [number, number] = [15, 48];

enableCompare? ​

Enables the side-by-side compare map; requires a selected compare STAC.

ts
optional enableCompare?: boolean = false;

enableCursorCoordinates? ​

Show live cursor coordinates as a fixed overlay at the bottom-left of the map.

ts
optional enableCursorCoordinates?: boolean = true;

enableScaleLine? ​

Show an OpenLayers scale-line control at the bottom-left of the map.

ts
optional enableScaleLine?: boolean = true;

zoom? ​

Initial zoom level; falls back to the last stored map position.

ts
optional zoom?: number = 4;

zoomToExtent? ​

Fly to the selected collection's spatial extent on selection.

ts
optional zoomToExtent?: boolean = true;

Toolbar buttons (btns) ​

Every btns flag defaults to true; set one to false to hide that button.

FlagButton
enableZoomZoom in and out.
enableExportMapExport the current view as an image.
enableChangeProjectionSwitch the map projection.
enableGlobeToggle the 3D globe view.
enableSearchSearch for a location.
enableFeedbackOpen the feedback form.
enableBackToPOIsReturn to the points of interest.
enableCompareIndicatorsPick the dataset shown on the compare map. May also be an object with compareTemplate, fallbackTemplate, and itemFilterConfig.

See also ​