|
|
| (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>
| |