|
|
| 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>
| |
|
| |
| To be continued...
| |
|
| |
| == React Components ==
| |
| To install the react 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 automatically 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 { 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;
| |
| </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>
| |
|
| |
| [[Category:Web]]
| |