Web

Getting Started

Maria web map components can be used as standard Web Components, and as React components. 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.

import React, { useEffect } from "react";

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



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


function addMapLayers():void{

  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'
  });
  maria.Layer.addLayer(wmsLayer); 

}

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

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

The MariaMap component will fill its parent, so remember to set the size of the parent component large enough. For example:

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