Web:Adding layers

WORK IN PROGRESS

The Maria Map Api includes a range of different map and utility-layers, as tracks and GDK draw objects. This is an example of different layer initializations

import { TrackLayer, MapboxVectorLayer, TileGridLayer, GDKMapLayer, WMSLayer,
   TrackSpeedVectorSymLayerOptions, DrawObjectLayer, GenericCompositeLayer, GenericSimpleLayer, MapBoxElevationMapLayer } from '@mariateleplan/map-core/dist/layers';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const mapboxVectorLayer = new MapboxVectorLayer(
  {
  Id:"mapbox_light_v10",
  Name:"Mapbox light",
  StyleUrl:new URL("mapbox://styles/mapbox/light-v10"),
  AccessToken:"YOUR_MAPBOX_ACCESS_TOKEN",
  });

const mariaMapLayer = new GDKMapLayer({
  Id:"0b254a7a-ff92-4b98-b6a2-1cfb8d91e9f1",
  Name:"GDK Imagery",
  ServiceUrl:new URL("http://tpg-mariagdktst"), 
  BasemapId:"0b254a7a-ff92-4b98-b6a2-1cfb8d91e9f1"
});

const wmsLayer = new WMSLayer({      
  Id:"wms_test",
  Name:"WMS Raster",
  WmsUrl:new URL('https://ahocevar.com/geoserver/wms'),
  Layers:'ne:NE1_HR_LC_SR_W_DR'
});

const drawObjectLayer = new DrawObjectLayer(
  {
    Id:"drawobjs",
    StoreId:"test",
    Name:"GDK Objects",
    Description:"TPG test draw object layer",
    DrawObjectServiceUri:new URL("http://localhost:9008/drawobjects/web/"),
    RenderServiceUri:new URL("http://localhost:9008/drawobjectrendering/web/"),
  }
)

const trackLayer = new TrackLayer({      
  Id:"tracklayer_aistest", 
  Name:"Tracks ais",     
  TrackServiceUrl:new URL("http://localhost:9008/tracks"),      
  ListName:"ais.test",   
  SymbolPointServiceUrl:new URL("http://localhost:9008/symbolpoint"),   
  UpdateInterval:500, //ms
  SpeedVectorOptions:{
    Id:"ais_speedvector",
    SecondsAhead:120,
    VectorType:TrackSpeedVectorSymLayerOptions.VectorType.TimeDistance
  },
  WebGlPointsOptions:{
    Id:"tracklayer_aistest_webgl",
    ZoomRange:[0,11]
  },
});


const elevationMapLayer = new MapBoxElevationMapLayer({
  Id:"elev_mb",
  Name:"Mapbox elevation"
});

const osmLayer = new GenericSimpleLayer(new TileLayer({source:new OSM()}),{
  Id:"osm_map",Name:"OSM"});

const mapLayers = new GenericCompositeLayer({Id:"maps", Name:"Maps"},[mariaMapLayer, osmLayer, mapboxVectorLayer, wmsLayer, elevationMapLayer]);
maria.Layer.addLayer(mapLayers); 
maria.Layer.addLayer(drawObjectLayer);
maria.Layer.addLayer(new TileGridLayer({Id:"tilegrid", Name:"Tile grid"}));   
maria.Layer.addLayer(trackLayer);