WebGettingStarted: Difference between revisions

From Maria GDK Wiki
Jump to navigation Jump to search
(Created page with "== 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 a...")
 
(Blanked the page)
Tag: Blanking
 
Line 1: Line 1:
== 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>
Example .npmrc:
<source lang="Bash">
//registry.npmjs.org/:_authToken=YOUR_ACCESS_TOKEN
</source>
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.
<source lang="Bash">
npm i @mariateleplan/map-core
</source>
== 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.
<source lang="c#">
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)
</source>
The Maria object also supports the functions SetupLayersFromUri("url/to/setup/file.json") and SetupLayersFromJson("yourJsonFileAsString").
[[Category:Web]]

Latest revision as of 08:46, 3 May 2022

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