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
},
},]
Open Popup
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>',
},
};
}
Open Popup
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)',
}
}
Open Popup
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> </td><td>01.11.2022</td></tr>
<tr><td>Location</td><td> </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 | - |