SeaMon.graphics.leaflet.*

Description

Graphical helper functions for plotting route forecast data on Leaflet maps.

Functions

SeaMon.graphics.leaflet.waypoints

Adds waypoints from a SeaMon forecast data object to a Leaflet map. Returns a handle (Leaflet feature group) containing the graphical markers on the map.

featureGroup = SeaMon.graphics.leaflet.waypoints(data, map)

SeaMon.graphics.leaflet.forecastPath

Adds a forecast path from a SeaMon forecast data object to a Leaflet map. Returns a handle (Leaflet feature group) containing the collection of polylines on the map.

featureGroup = SeaMon.graphics.leaflet.forecastPath(data, model, map, opts={critical: critical,
                                                                            criticalStyle: criticalStyle})

SeaMon.graphics.leaflet.positionMarker

Adds a position marker to a Leaflet map. The marker will be placed at the first waypoint location in the SeaMon-API data object. The marker position and its label contents are afterwards controlled with the SeaMon.graphics.leaflet.updatePosition function. Only one position marker is allowed with this feature. If the marker has already been added, then this function call is a no-opt. An optional custom SVG icon can be passed for styling the marker.

SeaMon.graphics.leaflet.positionMarker(data, map, svgIcon=null)

Attention

This feature will soon be improved, so that the position marker is returned for more flexible manipulation.

SeaMon.graphics.leaflet.updatePosition

Updates the position and label contents of the position marker if it is available.

SeaMon.graphics.leaflet.updatePosition(latlon, content="")

Attention

This feature will soon be improved, so that it is specifically attached to the relevant position marker that has been added to the map.

Parameters

Parameter	Value	Description
data	json data object	SeaMon-API forecast data from SeaMon.forecast.* methods
map	leaflet map object	Leaflet map
model	string	Forecast model name in forecast data, e.g. 'gfs'
critical	array of ints	Array of critical level values, same length and one2one with the forecast data length. Used for selecting a color and style on the forecast path line. Requires the criticalStyle option to be provided as well. The form looks as follows: [0, 0, 0, 1, 1, 2, 0 ...forecast data length]
criticalStyle	critical value - line style pairs	An object mapping critical values to a line style. Used for controlling line style along a forecast path. This allows for highlighting critical areas along the forecast path, such as if wind exceeds a certain threshold. The form looks as follows: {0:{color: 'black', weight: 1}}, 1:{color: 'orange', weight:3}, ...}
svgIcon	SVG string	SVG XML code defining an icon shape
latlon	array(2)	An array pair definings a latitude, longitude position, e.g. [64.5,-19.5]
content	HTML string	HTML formatted content for inserting into a position label

Return values

Parameter	Value	Description
featureGroup	Leaflet feature group	Leaflet feature group contains route lines or waypoints that can be manipulated, and updated at later time

Example

Fetch road weather forecast data from SeaMon and plot the forecast route on a Leaflet map, including waypoint markers.

<div id="mapid"></div>

<style>
#mapid {
 position: absolute;
 width: 100%;
 height: 100%;
}
</style>

<script>
var map = L.map('mapid', {zoomControl: false,
                          attributionControl: false,
                          maxZoom: 10,
                          minZoom: 4}).setView([51.505, -0.09], 13);
map.setView(new L.LatLng(65, -19), 6); // view over Iceland
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map);


// fetch forecast data and plot forecast path and waypoints on the map
let wp = [['Reykjavik','now'], ['Akureyri','80kph']];
let par = ['harm|wind', 'temp'];

SeaMon.forecast.drive(wp, par)
.then(data => {
  // add route line to map
  let path = SeaMon.graphics.leaflet.forecastPath(data, 'harm', map);

  // add waypoint markers to map
  SeaMon.graphics.leaflet.waypoints(data, map);

  // zoom and scale map to fit forecast path
  map.fitBounds(path.getBounds());
})
.catch( e => {
  console.log("error", e.message);
});
</script>