Web: Difference between revisions

From Maria GDK Wiki
Jump to navigation Jump to search
(→)
No edit summary
 
(17 intermediate revisions by the same user not shown)
Line 10: Line 10:
The .npmrc file should not be checked in to version control.
The .npmrc file should not be checked in to version control.


== Web Components ==
To add the Maria map to to your existing project, install the @mariateleplan/map-core npm package.
To add the Maria Web Components to your existing project, install the following NPM-packages.
<source lang="Bash">
<source lang="Bash">
npm i @mariateleplan/map-core @mariateleplan/map-components
npm i @mariateleplan/map-core  
</source>
</source>


In our examples we are using typescript, but this is optional. Create a new source file to contain the map component setup. <br>
== Example ==
map-component-setup.ts:
Included in map-core is an example project using the package located in ./examples.  
<source lang="javascript">
=== maria-map ===
import {defineCustomElements} from "@mariateleplan/map-components/dist/custom-elements";
The maria-map example is written in React using create-react-app. It shows how the map-component can be used in a react component, and an example of how to set up map layers. It also shows an implementation of a map layer selector, a header and a status bar footer that uses the api of the map component.
import  {Maria, Layers} from '@mariateleplan/map-core';
To run the example, follow the readme in the example project.
defineCustomElements(); //Custom-elements-bundling demands that the client defines the custom web-component elements


export function init():void{
== Simple setup of the Maria Map from scratch ==
  const mapElement = document.getElementById('map');
The simplest setup of the Maria Map is the following, which sets up a map with one wms map layer. This example will have no extra components other than the map. To see how components can be added, see the MariaMap example project.
<source lang="c#">
import { Maria, Layers } from '@mariateleplan/map-core';


  if (mapElement) {
const mapHtmlElement = document.getElementById('map'); // Given you have a <div> with id "map" to put the map in
    const maria=new Maria({"Zoom": 10,"Center": [1197567, 8380058],"Projection": 'EPSG:3857'},
const mapOptions = {"Zoom": 10,"Center": [1197567, 8380058],"Projection": 'EPSG:3857'};
      mapElement);
const maria = new Maria(mapOptions, mapHtmlElement);


    const wmsLayer = new Layers.WMSLayer({    
const layerOptions: Layers.ILayerInfo = {
      Id:"wms_test",
    "Services": {},
      Name:"WMS Raster",
    "Layers": [
      WmsUrl:new URL('https://ahocevar.com/geoserver/wms'),
        {
      Layers:'ne:NE1_HR_LC_SR_W_DR'
            "Visible": false,
    });
            "LayerType": "WmsMapLayer",
 
            "Id": "wms_test",
    maria.Layer.addLayer(wmsLayer);
            "Name": "WMS Raster",
    document.querySelector('map-layer-select').Maria=maria;
            "WmsUrl": "https://ahocevar.com/geoserver/wms",
  }
            "Layers": "ne:NE1_HR_LC_SR_W_DR"
}
        }
 
     ]
document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
     init();
  }
};
};
maria.SetupLayers(layerOptions)
</source>
</source>
 
The Maria object also supports the functions SetupLayersFromUri("url/to/setup/file.json") and SetupLayersFromJson("yourJsonFileAsString").
index.html:
<source lang="html">
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css" type="text/css">
 
    <title>Maria Web Components</title>
    <style>
    </style> 
    <script src="./path/to/map-component-setup.ts"></script>
</head>
  <body style="background-color: black;">   
    <div id="map">
      <basic-status-bar></basic-status-bar>
      <map-layer-select></map-layer-select>
    </div>
  </body>
</html>
</source>
 
index.css:
<source lang="css">
// Optional, depends on existing container css
html, body {
    width: 100%;
    height: 100vh;
    margin: 0;
    background: rgb(0,0,0);
    overflow: hidden;
}
#map{
    height: calc(100%);
    z-index: -1
}
</source>
 
= 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.
<br>
You can choose to include this in your own project, or start from scratch using Create React App. We will show the latter here.
 
=== Create React App ===
Create React App is a simple way to initialize a new single page application using react. We will also use the typescript option included, to automatically set up the project to use typescript.
The first thing you need is to install NPM (node package manager), see [https://docs.npmjs.com/downloading-and-installing-node-js-and-npm Install Node and NPM].
 
 
To create the new react app called my-maria-map, navigate to the desired folder an run:
<source lang="bash">
npx create-react-app my-maria-map --template typescript
</source>
 
=== Add Maria map components ===
Navigate to '''my-maria-map/src/App.tsx''', and delete the content. Add the following to the file instead:
<source lang="javascript">
import './App.css';
 
import React, { useEffect } from "react";
 
import { MariaMap, MapLayerSelect } from '@mariateleplan/map-react-components';
import  {Maria as MariaCore, Layers} from '@mariateleplan/map-core';
 
 
 
let maria=new MariaCore({
  "viewState": {
    "zoom": 10,
    "center": [1197567, 8380058], // Oslo
    "projection": 'EPSG:3857'
  },
  "layersState": {
  }
});
 
 
function addMapLayers():void{
 
  const wmsLayer = new Layers.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>
 
=== Styling ===
The MariaMap component will fill its parent, so we need to remember to set the size of the parent component large enough.
In our Create React App-examlpe, the maria-map-component is hosted by a div-component with id "root", so you can add the following to '''my-maria-map/src/index.css''':
<source lang="css">
#root{
  width: 100%;
  height: 100vh;
  background: rgb(64,64,64);
  overflow: hidden;
}
</source>
 
=== Assets and static data ===
The packages contains icons and images that you need to include in your project. For this example, you should manually copy the assets files to the public folder of your project.
Example for linux:
<source lang="bash">
cp -R nodemodules/@mariateleplan/map-react-components/assets public/assets
cp -R nodemodules/@mariateleplan/map-core/data public/data
</source>
 
Another alternative to manually copying is to eject the Create React App project, and let Webpack handle this by using the CopyFile-plugin:
<source lang="bash">
npm install copy-webpack-plugin --save-dev
</source>
'''config/webpack.config.js''':
<source lang="js">
...
const CopyPlugin = require("copy-webpack-plugin");
...
 
module.exports = function (webpackEnv) {
    ...
    return {
        ...
        plugins: [
            new CopyPlugin({
            patterns: [
                { from: path.resolve(paths.appNodeModules, '@mariateleplan/map-react-components/assets'), to: path.resolve(paths.appPublic, 'assets') },
                { from: path.resolve(paths.appNodeModules, '@mariateleplan/map-core/data'), to: path.resolve(paths.appPublic, 'data')}
            ]
        }),
        ...
  };
 
</source>
Then run the build command:
<source lang="bash">
npm run build
</source>
 
= Map Layers =
WORK IN PROGRESS <br>
 
The Maria Map Api includes a range of different map and utility-layers, as tracks and GDK draw objects.
This is an example of different layer initializations
 
<source lang="javascript">
import { TrackLayer, MapboxVectorLayer, TileGridLayer, GDKMapLayer, WMSLayer,
  TrackSpeedVectorSymLayerOptions, DrawObjectLayer, GenericCompositeLayer, GenericSimpleLayer, MapBoxElevationMapLayer } from '@mariateleplan/map-core/dist/layers';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
 
const mapboxVectorLayer = new MapboxVectorLayer(
  {
  Id:"mapbox_light_v10",
  Name:"Mapbox light",
  StyleUrl:new URL("mapbox://styles/mapbox/light-v10"),
  AccessToken:"YOUR_MAPBOX_ACCESS_TOKEN",
  });
 
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"
});
 
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'
});
 
const drawObjectLayer = new DrawObjectLayer(
  {
    Id:"drawobjs",
    StoreId:"test",
    Name:"GDK Objects",
    Description:"TPG test draw object layer",
    DrawObjectServiceUri:new URL("http://localhost:9008/drawobjects/web/"),
    RenderServiceUri:new URL("http://localhost:9008/drawobjectrendering/web/"),
  }
)
 
const trackLayer = new TrackLayer({     
  Id:"tracklayer_aistest",
  Name:"Tracks ais",   
  TrackServiceUrl:new URL("http://localhost:9008/tracks"),     
  ListName:"ais.test", 
  SymbolPointServiceUrl:new URL("http://localhost:9008/symbolpoint"), 
  UpdateInterval:500, //ms
  SpeedVectorOptions:{
    Id:"ais_speedvector",
    SecondsAhead:120,
    VectorType:TrackSpeedVectorSymLayerOptions.VectorType.TimeDistance
  },
  WebGlPointsOptions:{
    Id:"tracklayer_aistest_webgl",
    ZoomRange:[0,11]
  },
});
 
 
const elevationMapLayer = new MapBoxElevationMapLayer({
  Id:"elev_mb",
  Name:"Mapbox elevation"
});
 
const osmLayer = new GenericSimpleLayer(new TileLayer({source:new OSM()}),{
  Id:"osm_map",Name:"OSM"});
 
const mapLayers = new GenericCompositeLayer({Id:"maps", Name:"Maps"},[mariaMapLayer, osmLayer, mapboxVectorLayer, wmsLayer, elevationMapLayer]);
maria.Layer.addLayer(mapLayers);
maria.Layer.addLayer(drawObjectLayer);
maria.Layer.addLayer(new TileGridLayer({Id:"tilegrid", Name:"Tile grid"})); 
maria.Layer.addLayer(trackLayer); </source>
 
== Run project ==
<source lang="bash">
npm start
</source>

Latest revision as of 10:22, 3 May 2022

Getting Started

The Maria web map component is published as a pure javascript/typescript library. It can be used with the framework of the developrers own choosing.

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.

To add the Maria map to to your existing project, install the @mariateleplan/map-core npm package. 

npm i @mariateleplan/map-core

Example

Included in map-core is an example project using the package located in ./examples.

maria-map

The maria-map example is written in React using create-react-app. It shows how the map-component can be used in a react component, and an example of how to set up map layers. It also shows an implementation of a map layer selector, a header and a status bar footer that uses the api of the map component. To run the example, follow the readme in the example project.

Simple setup of the Maria Map from scratch

The simplest setup of the Maria Map is the following, which sets up a map with one wms map layer. This example will have no extra components other than the map. To see how components can be added, see the MariaMap example project. 

import { Maria, Layers } from '@mariateleplan/map-core';

const mapHtmlElement = document.getElementById('map'); // Given you have a <div> with id "map" to put the map in
const mapOptions = {"Zoom": 10,"Center": [1197567, 8380058],"Projection": 'EPSG:3857'};
const maria = new Maria(mapOptions, mapHtmlElement);

const layerOptions: Layers.ILayerInfo = {
    "Services": {},
    "Layers": [
        {
            "Visible": false,
            "LayerType": "WmsMapLayer",
            "Id": "wms_test",
            "Name": "WMS Raster",
            "WmsUrl": "https://ahocevar.com/geoserver/wms",
            "Layers": "ne:NE1_HR_LC_SR_W_DR"
        }
    ]
};
maria.SetupLayers(layerOptions)

The Maria object also supports the functions SetupLayersFromUri("url/to/setup/file.json") and SetupLayersFromJson("yourJsonFileAsString").

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