treetracker-web-map-core

This is the core module for Greenstand web map application.

Dev Server

npm run dev

Testing

Integration Tests With Cypress

npm run cy

Debuging

To open detailed log (default is WARN), set the loglevel as below:

Linting and Formatting

Note: All of these actions will be automatically run when appropriate with lint-staged during the git pre-commit stage.

check for lint errors

npm run lint

check for lint errors with auto fix

npm run lint:fix

format with prettier

npm run format

sort package.json

npx sort-package-json

Publishing

build project as production module

npm run pre-publish

execute the github action to release the tag.

check issue 41 here

Usage

import module in different app

import { Map } from 'treetracker-web-map-core'

API

• construction:

map = new Map({
    onLoad: () => console.log("onload"),
    onClickTree: () => console.log("onClickTree"),
    onFindNearestAt: () => console.log("onFindNearstAt"),
    onError: () => console.log("onError"),
});

• listen to map events:

  map.on("moveEnd", handleMoveEnd);

• set the filter for the map:

map.setFilters({
  userid: 940,
})

this function will trigger rerendering of the map.

• manipulate the map:

  • gotoView(lat, lon, zoomLevel)
  • gotoBounds(bounds)
  • getInitialViewer() // get an appropriate view for the current map with filters
  • selectTree(treeObject)

check dist/index.html for a demo

how to debug the core on the client side

The scenario: sometimes we need to find an easy way to debug the core web map in the parent client side application (for example, the web map client repo). The web map client repo is installing web map core as a npm package using npm, so it's hard to change code in core and see the results in the parent client application. One way around this is by installing web map core by a reference to its local folder, which allows changes made to web map core locally to propagate to the parent client application immediately. To do so:

1. Download the web map core repository: git clone https://github.com/Greenstand/treetracker-web-map-core.git
2. Change to code you want in core
3. Change the version number in package.json (this is necessary, if don't do it, it's possible the client will ignore/skip the installment)
4. Generate the bundle: npm run pre-publish (this is necessary, the npm will fetch the bundle file rather than the src files)
5. Install the core in web map client: npm install --save [relative path to the core folder]
6. Restart the web map client