Version: 5.0.3

Map

Main component that is responsible for handling all map related functionalities. It serves as an orchestrator exposing a common state to all its sub components.

Basic Usage

@Component({ 
  selector: 'app-map', 
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config"></triton-map>
  </div>
  `, 
})
export class Component { 
  public config: MapProviderConfig = { 
    type: 'map-tiler', 
    value: { 
      tileServerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
    },
  } 
}

function Component(props) {
  const config: MapProviderConfig = {
    type: 'map-tiler',
    value: {
      tileServerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    },
  };

  return <TritonMap config />;
}

<html>
  <head>
    <script type="module">
      import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
      defineCustomElements();
    </script>
  </head>
  <body>
    <div id="map-container" style="width: 800px; height: 400px;">
      <triton-map id="map-basic"></triton-map>
    </div>

    <script>
      const map = document.getElementById('map-basic');
      map.config = {
        type: 'map-tiler',
        value: {
          tileServerUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        },
      };
    </script>
  </body>
</html>

Behavior

Map component provides settings to control initial zoom level and map provider

Change Map Provider

Currently map component supports two different map providers: Map tiler and Google maps. This is controlled by using the MapProviderConfig type.

In TypeScript, MapProviderConfig is defined like this:

/**
 * Currenly supported map provider types (map tiler and google maps)
 */
export type MapProviderType = 'map-tiler' | 'google-maps';

/**
 * Map provider configuration definition
 */
export interface MapProviderConfig {
  /**
   * Map provider type
   */
  type: MapProviderType;

  /**
   * Config definition
   */
  value: TileServerConfig | GoogleMapsConfig;
}

/**
 * Configuration definition for the Map tiler
 */
export interface TileServerConfig {
  tileServerUrl?: string;
  attribution?: string;
  attributionPrefix?: string;
  subdomains?: string;
  base?: string;
  type?: string;
  scheme?: string;
  app_id?: string;
  app_code?: string;
  mapID?: string;
  minZoom?: number;
  maxZoom?: number;
  language?: string;
  format?: string;
  size?: string;
}

/**
 * Configuration definition for Google maps
 */
export interface GoogleMapsConfig {
  apiKey: string;
  loaderLibraries?: LoaderLibrary[];
  attribution?: string;
  opacity?: number;
  continuousWorld?: boolean;
  noWrap?: boolean;
  type?: GoogleMapsType;
  styles?: GoogleMapsStyle[];
}

To use Google maps for example you need the following configuration setup:

@Component({ 
  selector: 'app-map', 
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config"></triton-map>
  </div>`, 
}) 
export class Component { 
  public config: MapProviderConfig = { 
    type: 'google-maps', 
    value: { 
      apiKey: "Google Maps <API_KEY> here...", 
      type: "roadmap", 
      loaderLibraries: ["places"], 
      continuousWorld: true, 
      noWrap: false,
    },
  }; 
}

Apply Initial Zoom

The most common way to apply initial zoom is by using MapViewSettings type.

In TypeScript, MapViewSettings is defined like this:

/**
 * View settings to be used by the map component
 */
export interface MapViewSettings {
  /**
   * Where should the map be centered
   */
  center?: Coordinate;

  /**
   * What should be the initial zoom level of the map
   */
  zoom?: number;

  /**
   * The minimum zoom level of the map
   */
  minZoom?: number;

  /**
   * The maximum zoom level of the map
   */
  maxZoom?: number;

  /**
   * Flag that controls the visibility of the map scale control.
   * False by default.
   */
  hideScale?: boolean;

  /**
   * Flag that controls the auto zoom behavior of the map
   */
  disableAutoZoom?: boolean;
}

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings"></triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    center: {
      lat: 54.685236,
      lng: 20.270263,
    },
    zoom: 5,
  }
}

Routes

To add one or more routes on the map it is necessary to add <triton-map-route> child component(s) to the map component passing some or all of the input properties:

Note: Having one or more routes causes the map to auto-zoom over the area that include all the points of the route(s).
This could be disabled with MapViewSettings.disableAutoZoom = true.

Basic Usage

In order to place a route on the map you need to set the path property with a collection of coordinates.

/**
   * Two dimensional array of coordinates defining the route main trail.
   * A trail path can be broken down into multiple sub-trails (due to missing geo data for example or other reason).
   * This is why we have the path points in two-dimensional array (which is basically array of arrays of points or multi polyline).
   * */
  @Prop() readonly path!: Coordinate[][];
...

In Typescript it is defined like this:

export interface Coordinate {
  /**
   * Latitude (-90, 90)
   */
  lat: number;

  /**
   * Longitude (-180, 180)
   */
  lng: number;

  /**
   * Optional metadata field containing additional metadata
   */
  metadata?: CoordinateMetadata;
}

export interface CoordinateMetadata {
  /**
   * Metadata id that should uniquely identifies the coordinate (like timestamp)
   */
  id: string;

  /**
   * Optional additional metadata information
   */
  value?: string;
}

@Component({ 
  selector: 'app-map', 
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config">
      <triton-map-route [path]="path" />
    </triton-map>
  </div>`
}) 
export class Component { 
  public config: MapProviderConfig = { 
    ... 
  } 
  
  public path: Coordinate[][] = [[ 
    { lng: 5.185546875, lat: 60.310627317400424 }, 
    { lng: 5.20751953125, lat: 60.15790959006859 }, 
    { lng: 5.020751953125, lat: 60.09224104108026 }, 
    ... 
    { lng: 9.942626953125, lat: 58.97266715450153 } 
  ]]
}

Route Style

To customize the route style you need to configure the routeStyle property. In TypeScript, RouteStyle type is defined like this:

export interface RouteStyle {
  /**
   * Optional fill color.
   * Default value: null
   */
  fillColor?: string;

  /**
   * Optional fill opacity.
   * Default value: null
   */
  fillOpacity?: number;

  /**
   * Optional line color.
   * Default value: black
   */
  lineColor?: string;

  /**
   * Optional line width.
   * Default value: 1
   */
  lineWidth?: number;

  /**
   * Optional line opacity.
   * Default value: 1
   */
  lineOpacity?: number;

  /**
   * Optional line type.
   * Available values are (solid, dashed, dotted).
   * Default value: solid
   */
  lineType?: RouteLineType;
}

/**
 * Line type of the route.
 * Available values are (solid, dashed, dotted).
 */
export enum RouteLineType {
  solid = 1,
  dashed = 2,
  dotted = 3,
}

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config">
      <triton-map-route [path]="path" [routeStyle]="souteStyle" />
    </triton-map>
  </div>`,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public path: Coordinate[][] = [[ 
    ...
  ]]

  public routeStyle: RouteStyle = {
    lineColor: 'red',
    lineWidth: 3,
    lineType: RouteLineType.dashed
  }
}

Route Segments

To add one or more segments to a route you need to set the segments property. In TypeScript, RouteSegment is a type defined like this:

export interface RouteSegment {
  path: Coordinate[][];
  style?: RouteStyle;
  popup?: MapPopup;
  clickBehavior?: MapObjectClickBehavior;
}

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config">
      <triton-map-route [path]="path" [segments]="segments" />
    </triton-map>
  </div>
  `, 
})
export class Component {
  public config: MapProviderConfig = { 
    ... 
  }

  public path: Coordinate[][] = [[
    ...
  ]]

  public segments: RouteSegment[] = [
  {
    path: [ [
      { lng: 4.8779296875, lat: 53.839563678833606 },
      { lng: 5.2294921875, lat: 54.17529672404642 },
      ...
      { lng: 6.39404296875, lat: 55.640398956687356 }, ], ],
    style: {
      lineColor: 'yellow',
      lineWidth: 3,
      lineType: RouteLineType.dashed
    }, 
  }, 
  {
    path: [ [
      { lng: 11.513671874999998, lat: 57.38578314962142 },
      { lng: 11.6015625, lat: 57.1958078966064 },
      ...
      { lng: 11.93115234375, lat: 56.547372053078966 },], ],
    style: {
      lineColor: '#ffffff',
      lineWidth: 3 
    },
  },]

To open a popup on route click it is required to set the clickBehavior to MapObjectClickBehavior.openPopup and popup to instance of type MapPopup. In Typescript, MapPopup is defined like this:

export interface MapPopup {
  /**
   * CSS class to be applied
   */
  className?: string;

  /**
   * Offset point from the origin
   */
  offset?: Point;

  /**
   * Callback function that is responsible to load the popup content
   */
  loadContent: () => Promise<string>;
}

Popup can be enabled for both main trail or any of the route segments.

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config">
      <triton-map-route 
        [path]="path" 
        [routeStyle]="routeStyle" 
        [segments]="segments"
        [clickBehavior]="clickBehavior"
        [popup]="popup" />
    </triton-map>
  </div>
  `, 
})
export class Component {
  public config: MapProviderConfig = { ... }
  public path: Coordinate[][] = [[ 
    ...
  ]]   

  public routeStyle: RouteStyle = {
    ...
  }

  public segments: RouteSegment[] = [[
    {
      ...
    },
    {
      path: [[
        ...
      ]],
      style: {
        ...
      },
      clickBehavior: MapObjectClickBehavior.openPopup,
      popup: {
        loadContent: () => {
          return Promise.resolve('<span>Strong wind</span>');
        },
      }
    }
  ]]
   
  public clickBehavior: MapObjectClickBehavior = MapObjectClickBehavior.openPopup;

  public popup: MapPopup = {
    loadContent: () => {
      return Promise.resolve('<span>Voyage 1</span>');
    },
  }
  

Events

Map Routes expose the following events:

/** Emitted when the user clicks the route */
@Event({ bubbles: false }) atClick?: EventEmitter<RouteEventArgs>;

/** Emitted when the mouse enters the route */
@Event({ bubbles: false }) atMouseOver?: EventEmitter<RouteEventArgs>;

/** Emitted when the mouse leaves the route */
@Event({ bubbles: false }) atMouseOut?: EventEmitter<RouteEventArgs>;

Objects

To add one or more objects on the map it is necessary to add <triton-map-object> child component(s) to the map component passing some or all of the input properties. The only required properties are location and content. location corresponds to the geographical coordinate where the object should be placed on the map. content corresponds to the visual representation of the object on the map.

...
 @Prop() public readonly location!: Coordinate;
 @Prop() public readonly content!: MapObjectContent;
...

Currently there are three types of content that is supported: static images, svg, html. In Typescript, they are defined like this:

/**
 * Definition describing how a map object looks on the map.
 */
export interface MapObjectContent {
  /**
   * Describes the type of the object content
   */
  type: MapObjectContentType,

  /**
   * Describes the value of the object content
   */
  value: ImageContent | SvgContent | HtmlContent;
}

/**
 * Enums containing all supported object content types
 */
export enum MapObjectContentType {
  /**
   * Static image
   */
  image = 1,

  /**
   * Svg
   */
  svg = 2,

  /**
   * Html fragment
   */
  html = 3
}

Static Image

To show a static image it is required to set the content.type to MapObjectContentType.image and content.value to instance of type ImageContent. In Typescript, ImageContent is defined like this:

/**
 * Definition of static image object content
 */
export interface ImageContent {
  /**
   * Url to a static file or data url
   */
  url: string;
}

It is also required to set the width and height properties of the object.

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config">
      <triton-map-object [location]="location" [content]="content" [width]="width" [height]="height" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public location: Coordinate = {
    lat: 59.670491,
    lng: 9.679011,
  };

  public content: MapObjectContent = {
    type: MapObjectContentType.image,
    value: <ImageContent>{
      url: 'https://componentlib-docs.azurewebsites.net/img/logo.svg',
    },
  };

  public width: number = 30;
  public height: number = 30;
}

Svg

To show an svg image it is required to set the content.type to MapObjectContentType.svg and content.value to instance of type SvgContent. In Typescript, SvgContent is defined like this:

export interface SvgContent {
  /**
   * Svg shape type
   */
  shapeType: ShapeType;

  /**
   * Svg data definition
   */
  data: string;

  /**
   * Optional fill color of the svg object.
   * Default value: black
   */
  fillColor?: string;

  /**
   * Optional border color of the svg object.
   * Default value: black
   */
  borderColor?: string;

  /**
   * Optional border width of the svg object.
   * Default value: 1
   */
  borderWidth?: number;

  /**
   * Optional scale on x-axis of the svg object.
   * Default value: 1 (no scaling)
   */
  scaleX?: number;

  /**
   * Optional scale on y-axis of the svg object.
   * Default value: 1 (no scaling)
   */
  scaleY?: number;
}

It is also required to set the width and height properties of the object.
Optionally you can set rotationAngle property that corresponds to the rotation of the object (value in degrees 0-360).
The following shape types are supported: polyline, polygon, ellipse and path.

For more complex or composite svg images please take a look at the next section (Adding static image as base64 data uri).

Polyline

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-object 
        [location]="location" 
        [content]="content" 
        [width]="width" 
        [height]="height" 
        [rotationAngle]="rotationAngle" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public location: Coordinate = { lng: 4.932861328124999, lat: 58.12431960569374 };

  public content: MapObjectContent = {
    type: MapObjectContentType.svg,
    value: <SvgContent>{
        shapeType: 'polyline',
        data: '0,20 10,0 20,20',
        fillColor: 'none',
        borderColor: 'blue',
        borderWidth: 4,
        scaleX: 0.8,
        scaleY: 0.8,
      },
  };

  public width: number = 20;
  public height: number = 20;
  public rotationAngle: number = 142;  
}

Polygon

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-object 
        [location]="location" 
        [content]="content" 
        [width]="width" 
        [height]="height" 
        [rotationAngle]="rotationAngle" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public location: Coordinate = { lng: 12.50244140625, lat: 56.07203547180089 };

  public content: MapObjectContent = {
    type: MapObjectContentType.svg,
    value: <SvgContent>{
        shapeType: 'polygon',
        data: '0,20 0,10 10,0 20,10 20,20 10,10 0,20',
        fillColor: 'blue',
        borderColor: 'green',
        borderWidth: 1,
      },
  };

  public width: number = 20;
  public height: number = 20;
  public rotationAngle: number = 145;
}

Ellipse

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-object 
        [location]="location" 
        [content]="content" 
        [width]="width" 
        [height]="height" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public location: Coordinate = { lng: 5.369756, lat: 56.036455 };

  public content: MapObjectContent = {
    type: MapObjectContentType.svg,
    value: <SvgContent>{
        shapeType: 'ellipse',
        data: '20 20 19 19',
        fillColor: 'rgba(255,255,0,0.3)',
        borderColor: 'purple',
        borderWidth: 1,
        scaleX: 0.7,
        scaleY: 0.7,
      },
  };

  public width: number = 40;
  public height: number = 40;
}

Path

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-object 
        [location]="location" 
        [content]="content" 
        [width]="width" 
        [height]="height" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public location: Coordinate = { lng: 2.369756, lat: 56.036455 };

  public content: MapObjectContent = {
    type: MapObjectContentType.svg,
    value: <SvgContent>{
        shapeType: 'path',
        data: 'M 0 15 q 15 -30 30 0',
        fillColor: 'red',
        borderColor: 'red',
        borderWidth: 1
      },
  };

  public width: number = 30;
  public height: number = 15;
}

Data Uri (base64 encoded)

Any image compiled to data uri is supported including composite svg or complex graphics

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-object 
        [location]="location" 
        [content]="content" 
        [width]="width" 
        [height]="height" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public location: Coordinate = { lat: 58.97266715450153, lng: 9.942626953125 };

  public content: MapObjectContent = {
    type: MapObjectContentType.image,
    value: <ImageContent>{
      url: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDhweCIgaGVpZ2h0PSI0OHB4IiB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9ImN5YW4iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cmVjdCB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIGZpbGw9IndoaXRlIiBmaWxsLW9wYWNpdHk9IjAuMDEiLz4NCjxwYXRoIGQ9Ik0xMi41NjU4IDI2LjE4MjZDMTAuODU1MyAyNy4zNTQ0IDEwIDI5LjI5MzYgMTAgMzIuMDAwM0MxMCAzNi4wNjA0IDE0Ljk3NTMgNDMuMDAwMyAxOS40NjE4IDQzLjAwMDNDMjMuOTQ4MyA0My4wMDAzIDI2LjU1MDIgNDMuMDAwMyAzMC45NDE1IDQzLjAwMDNDMzUuMzMyOCA0My4wMDAzIDM4IDM5LjE0OTcgMzggMzYuMDYwNEMzOCAzMS43MTAxIDM4IDI3LjM1OTcgMzggMjMuMDA5NEMzOCAyMS4zNTI2IDM2LjY1NjkgMjAuMDA5NCAzNSAyMC4wMDk0SDM0Ljk5MDlDMzMuMzM5MSAyMC4wMDk0IDMyIDIxLjM0ODUgMzIgMjMuMDAwMyIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjxwYXRoIGQ9Ik0xMy45ODEyIDI4LjQ0NTNWOC4wMDZDMTMuOTgxMiA2LjM1MDQ5IDE1LjMyMzMgNS4wMDg0NCAxNi45Nzg4IDUuMDA4NDRDMTYuOTgxNSA1LjAwODQ0IDE2Ljk4NDMgNS4wMDg0NCAxNi45ODcxIDUuMDA4NDVDMTguNjQ4NSA1LjAxMzA1IDE5Ljk5MjkgNi4zNjExOSAxOS45OTI5IDguMDIyNjNWMjMuNTkyMSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSI0IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4NCjxwYXRoIGQ9Ik0xOS45OTI5IDIzLjAwODVWMTkuMDE1NkMxOS45OTI5IDE3LjM1MDIgMjEuMzQzIDE2LjAwMDEgMjMuMDA4NCAxNi4wMDAxQzI0LjY3MzggMTYuMDAwMSAyNi4wMjM5IDE3LjM1MDIgMjYuMDIzOSAxOS4wMTU2VjIzLjAwODUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8cGF0aCBkPSJNMjYgMjIuNzE1OVYyMC4wMDM2QzI2IDE4LjM0NjcgMjcuMzQzMSAxNy4wMDM2IDI5IDE3LjAwMzZDMzAuNjU2OSAxNy4wMDM2IDMyIDE4LjM0NjcgMzIgMjAuMDAzNlYyMy4wMDM2IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+DQo=',
    },
  };

  public width: number = 30;
  public height: number = 30;
}

Html Content

To show html content it is required to set the content.type to MapObjectContentType.html and content.value to instance of type HtmlContent. In Typescript, HtmlContent is defined like this:

export interface HtmlContent {
  /**
   * Html content value
   */
  html: string;

  /**
   * CSS class to be applied
   */
  className?: string;
}

Any html content is supported

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-object 
        [location]="location" 
        [content]="content" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public location: Coordinate = { lng: 21.1376953125, lat: 55.71473455012689 };

  public content: MapObjectContent = {
    type: MapObjectContentType.html,
    value: <HtmlContent>{
      html: '<div style="border:3px solid blue; width: 100px; background-color:#faeeb1"><span>Port B</span><div>',
    },
  };
}

To open a popup on object click it is required to set the clickBehavior to MapObjectClickBehavior.openPopup and popup to instance of type MapPopup.

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-object 
        [location]="location" 
        [content]="content" 
        [width]="width" 
        [height]="height" 
        [clickBehavior]="clickBehavior"
        [popup]="popup" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public location: Coordinate = { 
    ... 
  };

  public content: MapObjectContent = { 
    ... 
  };

  public width: number = 40;
  public height: number = 40;
  
  public clickBehavior = MapObjectClickBehavior.openPopup;
  public popup: MapPopup = {
    loadContent: () => {
      return Promise.resolve('<span>Wind Farm 1</span>');
    },
  }
}

Events

Map Objects expose the following events:

/** Emitted when the user clicks the object */
@Event({ bubbles: false }) atClick?: EventEmitter<ObjectEventArgs>;

/** Emitted when the mouse enters the object*/
@Event({ bubbles: false }) atMouseOver?: EventEmitter<ObjectEventArgs>;

/** Emitted when the mouse leaves the object */
@Event({ bubbles: false }) atMouseOut?: EventEmitter<ObjectEventArgs>;

Geo JSON

Geo json is a format for encoding a variety of geographic data structures. Geo json can be used for a variety of things like: marking geographical objects, surrounding geographical areas of importance, offline map layers. To add one or more geo json layers it is necessary to add <triton-map-geojson-layer> child component(s) to the map component passing some or all of the input properties.

Basic Usage

In order to place a geo json layer on the map you need to set the value with a valid value according to Geo JSON format. Value can be:

string representing stringified value of the geo json object
any json object corresponding to the geo json format (https://en.wikipedia.org/wiki/GeoJSON)

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-geojson-layer [value]="value" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public value = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {},
        geometry: {
          coordinates: [
            [
              [-2.0054421430505727, 56.19481218406338],
              [1.0295311893883365, 53.1158144306267],
              [7.9507992856107705, 53.82199336141804],
              [7.912582890129556, 57.549074933063395],
              [2.6970250492248624, 58.52327208145965],
              [-2.0054421430505727, 56.19481218406338],
            ],
          ],
          type: 'Polygon',
        },
      },
    ],
  };
      
}

Style

To customize the geo json style you need to set the geojsonStyle property.

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-geojson-layer [value]="value" [geojsonStyle]="style"/>
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public value = {
    ...
  }

  public style: RouteStyle = {
    lineColor: 'red',
    lineWidth: 2,
    fillColor: 'rgba(0, 0, 255, 0.3)',
  }
}

To open a popup on geo json layer click it is required to set the clickBehavior to MapObjectClickBehavior.openPopup and popup to instance of type MapPopup.

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-geojson-layer 
        [value]="value"
        [geojsonStyle]="style"
        [clickBehavior]="clickBehavior"
        [popup]="popup" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public value = {
    ...
  }

  public geojsonStyle: RouteStyle = {
    ...
  }

  public clickBehavior: MapObjectClickBehavior = MapObjectClickBehavior.openPopup;

  public popup: MapPopup = {
    loadContent: () => {
      return Promise.resolve('Restricted area');
    },
  }

}

Events

Geo JSON layers expose the following events:

/** Emitted when the user clicks the geo json layer  */
@Event({ bubbles: false }) atClick?: EventEmitter<GeojsonEventArgs>;

/** Emitted when the mouse enters the geo json layer*/
@Event({ bubbles: false }) atMouseOver?: EventEmitter<GeojsonEventArgs>;

/** Emitted when the mouse leaves the geo json layer */
@Event({ bubbles: false }) atMouseOut?: EventEmitter<GeojsonEventArgs>;

Legend

To add one or more legends on the map it is necessary to add <triton-map-legend> child component(s) to the map component passing some or all of the input properties. Legend content can be any html. Legends can be placed on one of the four corners of the map: Bottom Right (default), Bottom Left, Top Left, Top Right.

@Component({
  selector: 'app-map',
  template: `
  <div id="map-container" style="width: 800px; height: 400px;">
    <triton-map [config]="config" [viewSettings]="viewSettings">
      <triton-map-legend [html]="html" [position]="position" />
    </triton-map>
  </div>
  `,
})
export class Component {
  public config: MapProviderConfig = {
    ...
  }

  public viewSettings: MapViewSettings = {
    ...
  }

  public html = `
        <table style="font-size: 12px;background: rgba(255,255,255,0.5);border: 1px solid blue;"><tbody>
          <tr><th></th><th></th><th></th></tr>
          <tr><td>Time</td><td>&nbsp;&nbsp;</td><td>01.11.2022</td></tr>
          <tr><td>Location</td><td>&nbsp;&nbsp;</td><td>32.668581, -29.608079</td></tr>
        </tbody></table>
      `;

  public position: MapControlPosition = MapControlPosition.TopRight;
}

API

Properties

TritonMap

Property	Description	Type	Default
`config`	The map provider config object	`MapProviderConfig`	-
`genericSettings`	The generic settings of the map	`MapGenericSettings`	-
`viewSettings`	The view settings of the map	`MapViewSettings`	-

TritonMapGeojsonLayer

Property	Description	Type	Default
`click-behavior`	Optional click behavior of the geo json layer.It controls what happens on clicking the geo json layer.	`MapObjectClickBehavior.customAction` `MapObjectClickBehavior.none` `MapObjectClickBehavior.openPopup`	-
`geojson`		`GeoJsonLayer`	-
`geojson-id`	Optional id of the geo json layer	`string`	-
`geojsonStyle`	Optional style configuration of the geo json layer	`RouteStyle`	-
`popup`	Optional popup configuration of the geo json layer.	`MapPopup`	-
`value`	Geo json value.Can be- string representing stringified value of the geo json object- any json object corresponding to the geo json format httpsen.wikipedia.orgwikiGeoJSON	`any`	-

TritonMapLegend

Property	Description	Type	Default
`css-class-name`	Optional CSS class to be applied	`string`	-
`html`	Html content value	`string`	-
`legend`		`MapLegend`	-
`position`	Optional legend position	`MapControlPosition.BottomLeft` `MapControlPosition.BottomRight` `MapControlPosition.TopLeft` `MapControlPosition.TopRight`	`MapControlPosition.BottomRight`

TritonMapObject

Property	Description	Type	Default
`anchor`	Point of object which will correspond to markers location.Default is the center of the object	`Point`	-
`click-behavior`	Optional click behavior of the object.It controls what happens on clicking the object.	`MapObjectClickBehavior.customAction` `MapObjectClickBehavior.none` `MapObjectClickBehavior.openPopup`	-
`content`	Object representation - how the object looks.	`MapObjectContent`	-
`height`	The height of the object	`number`	-
`location`	Object location where it should be placed on the map	`Coordinate`	-
`max-distance-from-route`	If the object is associated with a route this should be the maximum distance in kilometres from the route where the object should be located	`number`	`0.1`
`name`	Optional name of the object	`string`	-
`object`		`MapObject`	-
`object-id`	Optional id of the object	`string`	-
`popup`	Optional popup configuration of the object.	`MapPopup`	-
`rotation-angle`	Optional angle of rotation	`number`	`0`
`route-id`	If the object is associated with a route this should have its id	`string`	-
`width`	The width of the object	`number`	-

TritonMapRoute

Property	Description	Type	Default
`click-behavior`	Optional click behavior of the route main trail.It controls what happens on clicking the segment.	`MapObjectClickBehavior.customAction` `MapObjectClickBehavior.none` `MapObjectClickBehavior.openPopup`	-
`path`	Two dimensional array of coordinates defining the route main trail.A trail path can be broken down into multiple sub-trails due to missing geo data for example or other reason.This is why we have the path points in two-dimensional array which is basically array of arrays of points or multi polyline.	`Coordinate[][]`	-
`popup`	Optional popup configuration of the route main trail.	`MapPopup`	-
`route`		`Route`	-
`route-id`	Optional id of the route	`string`	-
`routeStyle`	Optional style definition of the route main trail	`RouteStyle`	-
`segments`	Optional array of additional route segments to be rendered over the main trail segment	`RouteSegment[]`	-

Events

Main Component

Name	Type	Description	Extra
atClick	`CustomEvent<CoordinateEventArgs>`	Event emitted when the user clicks or taps the map	-
atKeyDown	`CustomEvent<KeyEventArgs>`	Event emitted when the user presses a key from the keyboard while the map is focused	-
atMouseMove	`CustomEvent<{ lat: number; lng: number; }>`	Event emitted when mouse move over the map	-
atMouseOut	`CustomEvent<CoordinateEventArgs>`	Event emitted when the mouse leaves the map	-
atMouseOver	`CustomEvent<CoordinateEventArgs>`	Event emitted when the mouse enters the map	-
atMoveEnd	`CustomEvent<MapBoundsEventArgs>`	Event emitted when the center of the map stops changing e.g. user stopped dragging the map or after non-centered zoom	-
atZoomEnd	`CustomEvent<ZoomEventArgs>`	Event emitted when the map zoom changed	-

TritonMapGeojsonLayer

Name	Type	Description	Extra
atClick	`CustomEvent<GeojsonEventArgs>`	Emitted when the user clicks the geo json layer	-
atMouseOut	`CustomEvent<GeojsonEventArgs>`	Emitted when the mouse leaves the geo json layer	-
atMouseOver	`CustomEvent<GeojsonEventArgs>`	Emitted when the mouse enters the geo json layer	-

TritonMapObject

Name	Type	Description	Extra
atClick	`CustomEvent<ObjectEventArgs>`	Emitted when the user clicks the object	-
atMouseOut	`CustomEvent<ObjectEventArgs>`	Emitted when the mouse leaves the object	-
atMouseOver	`CustomEvent<ObjectEventArgs>`	Emitted when the mouse enters the object	-

TritonMapRoute

Name	Type	Description	Extra
atClick	`CustomEvent<RouteEventArgs>`	Emitted when the user clicks the route	-
atMouseOut	`CustomEvent<RouteEventArgs>`	Emitted when the mouse leaves the route	-
atMouseOver	`CustomEvent<RouteEventArgs>`	Emitted when the mouse enters the route	-

Map

Basic Usage​

Behavior​

Change Map Provider​

Apply Initial Zoom​

Routes​

Basic Usage​

Route Style​

Route Segments​

Open Popup​

Events​

Objects​

Static Image​

Svg​

Polyline​

Polygon​

Ellipse​

Path​

Data Uri (base64 encoded)​

Html Content​

Open Popup​

Events​

Geo JSON​

Basic Usage​

Style​

Open Popup​

Events​

Legend​

API​

Properties​

TritonMap​

TritonMapGeojsonLayer​

TritonMapLegend​

TritonMapObject​

TritonMapRoute​

Events​

Main Component​

TritonMapGeojsonLayer​

TritonMapObject​

TritonMapRoute​

Basic Usage

Behavior

Change Map Provider

Apply Initial Zoom

Routes

Basic Usage

Route Style

Route Segments

Open Popup

Events

Objects

Static Image

Svg

Polyline

Polygon

Ellipse

Path

Data Uri (base64 encoded)

Html Content

Open Popup

Events

Geo JSON

Basic Usage

Style

Open Popup

Events

Legend

API

Properties

TritonMap

TritonMapGeojsonLayer

TritonMapLegend

TritonMapObject

TritonMapRoute

Events

Main Component

TritonMapGeojsonLayer

TritonMapObject

TritonMapRoute