Web: Difference between revisions

From Maria GDK Wiki
Jump to navigation Jump to search
m (Elu moved page Web to Web)
No edit summary
 
(41 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.
== 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.<br>
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>


Line 7: Line 9:
</source>
</source>
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 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...
To add the Maria map to to your existing project, install the @mariateleplan/map-core npm package.
 
== React Components ==
To install the react component packages, install the following NPM-packages.
<source lang="Bash">
<source lang="Bash">
npm i @mariateleplan/map-core @mariateleplan/map-react-components
npm i @mariateleplan/map-core  
</source>
</source>


=== Minimal React Example ===
== Example ==
The following example renders the map component with a WMS-map layer, which is one of many available map layers.
Included in map-core is an example project using the package located in ./examples.
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.
=== maria-map ===
<source lang="javascript">
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 React, { useEffect } from "react";
To run the example, follow the readme in the example project.
 
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({     
== Simple setup of the Maria Map from scratch ==
    Id:"wms_test",
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.
    Name:"WMS Raster",
<source lang="c#">
    WmsUrl:new URL('https://ahocevar.com/geoserver/wms'),
import { Maria, Layers } from '@mariateleplan/map-core';
    Layers:'ne:NE1_HR_LC_SR_W_DR'
  });
  maria.Layer.addLayer(wmsLayer);  


}
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);


function App() {
const layerOptions: Layers.ILayerInfo = {
 
    "Services": {},
  useEffect(() => {
    "Layers": [
      addMapLayers();
        {
  }, [])
            "Visible": false,
 
            "LayerType": "WmsMapLayer",
  return (
            "Id": "wms_test",
      <MariaMap MariaApi={maria}>
            "Name": "WMS Raster",
        <MapLayerSelect></MapLayerSelect>
            "WmsUrl": "https://ahocevar.com/geoserver/wms",
      </MariaMap>
            "Layers": "ne:NE1_HR_LC_SR_W_DR"
  );
        }
}
    ]
export default App;
};
maria.SetupLayers(layerOptions)
</source>
</source>
 
The Maria object also supports the functions SetupLayersFromUri("url/to/setup/file.json") and SetupLayersFromJson("yourJsonFileAsString").
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]]

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"