DELETEDGetting started: Difference between revisions

From Maria GDK Wiki
Jump to navigation Jump to search
No edit summary
(Blanked the page)
Tag: Blanking
 
(9 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 ===
<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 mariaMapLayer = new GDKMapLayer({
    Id:"0b254a7a-ff92-4b98-b6a2-1cfb8d91e9f1",
    Name:"GDK Imagery",
    ServiceUrl:new URL("http://tpg-mariagdktst"),
    BasemapId:"0b254a7a-ff92-4b98-b6a2-1cfb8d91e9f1"
  });
  maria.Layer.addLayer(mariaMapLayer);
}
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 15:27, 20 October 2021

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