Web

Getting Started

Maria web map components can be used as standard Web Components, and as React components. This wiki will start out with a minimal example of how you can get started using the Maria Map Component from scratch in React using the Create React App-project.

An access token from Teleplan is needed to access these NPM-packages. The access token can be placed in a local .npmrc file in the root of the project using the packages.

Example .npmrc:

//registry.npmjs.org/:_authToken=YOUR_ACCESS_TOKEN

The .npmrc file should not be checked in to version control.

Web Components

To install the Web Component packages, install the following NPM-packages.

npm i @mariateleplan/map-core @mariateleplan/map-components

To be continued...

React Components

To install the react component packages, install the following NPM-packages.

npm i @mariateleplan/map-core @mariateleplan/map-react-components

Minimal React Example

The following example renders the map component with a WMS-map layer, which is one of many available map layers. It also includes a map layer selector, which is utilizing that all children of the map component automatically is populated with and can use the maria map api.
You can choose to include this in your own project, or start from scratch using Create React App. We will show the latter here.

Create React App

Create React App is a simple way to initialize a new single page application using react. We will also use the typescript option included, to automatically set up the project to use typescript. The first thing you need is to install NPM (node package manager), see Install Node and NPM.

To create the new react app called my-maria-map, navigate to the desired folder an run:

npx create-react-app my-maria-map --template typescript

Add Maria map components

Navigate to my-maria-map/src/App.tsx, and delete the content. Add the following to the file instead:

import './App.css';

import React, { useEffect } from "react";

import { MariaMap, MapLayerSelect } from '@mariateleplan/map-react-components';
import  {Maria as MariaCore, Layers} from '@mariateleplan/map-core';



let maria=new MariaCore({
  "viewState": {
    "zoom": 10,
    "center": [1197567, 8380058], // Oslo
    "projection": 'EPSG:3857'
  },
  "layersState": {
  }
});


function addMapLayers():void{

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

  maria.Layer.addLayer(wmsLayer); 
}

function App() {
  
  useEffect(() => {
      addMapLayers();
  }, [])

  return (
      <MariaMap MariaApi={maria}>
        <MapLayerSelect></MapLayerSelect>
      </MariaMap>
  );
}
export default App;

Styling

The MariaMap component will fill its parent, so we need to remember to set the size of the parent component large enough. In our Create React App-examlpe, the maria-map-component is hosted by a div-component with id "root", so you can add the following to my-maria-map/src/index.css:

#root{
  width: 100%;
  height: 100vh;
  background: rgb(64,64,64);
  overflow: hidden;
}

Assets and static data

The packages contains icons and images that you need to include in your project. For our Create React App project, you can let Webpack handle this by using the CopyFile-plugin:

npm install copy-webpack-plugin --save-dev

config/webpack.config.js:

...
const CopyPlugin = require("copy-webpack-plugin");
...

module.exports = function (webpackEnv) {
    ...
    return {
        ...
        plugins: [
            new CopyPlugin({
            patterns: [
                { from: path.resolve(paths.appNodeModules, '@mariateleplan/map-react-components/assets'), to: path.resolve(paths.appPublic, 'assets') },
                { from: path.resolve(paths.appNodeModules, '@mariateleplan/map-core/data'), to: path.resolve(paths.appPublic, 'data')}
            ]
        }),
        ...
  };

Then run the build command:

npm run build

You can also manually copy the asset and data folder to your public package, but this will break if changes are added to the packages.

Map 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);