DELETEDGetting started: Difference between revisions

From Maria GDK Wiki
Jump to navigation Jump to search
(→)
(Blanked the page)
Tag: Blanking
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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.<br>


Example .npmrc:
<source lang="Bash">
//registry.npmjs.org/:_authToken=YOUR_ACCESS_TOKEN
</source>
The .npmrc file should not be checked in to version control.
== Web Components ==
To install the Web Component packages, install the following NPM-packages.
<source lang="Bash">
npm i @mariateleplan/map-core @mariateleplan/map-components
</source>
== React Components ==
To install the Web Component packages, install the following NPM-packages.
<source lang="Bash">
npm i @mariateleplan/map-core @mariateleplan/map-react-components
</source>
=== 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 is populated with and can use the maria map api.
<source lang="javascript">
import React, { useEffect } from "react";
import { MariaMap, MapLayerSelect } from '@mariateleplan/map-react-components';
import { Maria as MariaCore} from '@mariateleplan/map-core/dist/Maria';
import {  GDKMapLayer } 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;
</source>
The MariaMap component will fill its parent, so remember to set the size of the parent component large enough.
For example:
<source lang="css">
#parent-id{
  width: 100%;
  height: 100vh;
  background: rgb(64,64,64);
  overflow: hidden;
}
</source>

Latest revision as of 14:27, 20 October 2021

Retrieved from "http://docs.maria.teleplanglobe.com/index.php?title=DELETEDGetting_started&oldid=3655"