greenstand/treetracker-web-map-core

The basic and core module of Greenstand web map application.

treetracker-web-map-core's Issues

Making the highlight & selected more accurate.

When the mouse moves on to the point and clicks it, the highlight and selected effect have some tiny difference from the original icon.

https://dadior.s3.ap-northeast-1.amazonaws.com/Screen%20Recording%202022-02-07%20at%204.46.07%20PM.mp4

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Make the release and build works for every push/merge

So we can generate new version when we merge PR.
Refer to: https://github.com/Greenstand/treetracker-web-map-core/blob/main/.github/workflows/main.yml

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Migrate some code from `treetracker-web-map` to this repo

This is pretty easy, please code the code change in the PR to this repo, this embarrassing situation is just because that the web client is still using the Map.js in its repo rather than invoke the core

Greenstand/treetracker-web-map-client#221

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Map core support new icons and config for set it up

The new suite of icons looks like this:

The goal of this issue:

• The core provide a setting for this, like: icon_style: 'orange|green|greenB' the default is the icons now on http://map.treetracker.org (the orange one)
• Note, need to support the mouse hover action ( when the mouse is over the icon, we will dynamically render an icon by CSS/JS) using leaflet's API

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Install test library and make sure existing tests passed.

Install Jest for test tool, and set the Jest appropriately, and pass all those tests (under src folder)

And add simple guide into readme explaining how to use these commands.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Map displays wrong icons if a request is made to a new tileServerUrl within 50-60sec of the first request

When the first request is made to  tileServerUrl: https://{s}.treetracker.org/tiles/ , the map shows correct icons with no problems. Now if a second request is made to a new tileServerUrl tileServerUrl: https://{s}.treetracker.org/tiles/new/ within 50-60 seconds of the first request, the map will still show the old icons. If zoomed in, the map may display the correct new icons (but not always)...

If a new request is made after 1min, the map shows correct icons with no problems

New implementation to jump the initial map view for planter/orgs

When we open the map for a single planter or org, we need to calculate the initial bounds/map view for the first jump, the previous algorithm is fetching the cluster from API and calculate the view at client side, now we are trying to use a new API to do it: prerequisite: Greenstand/treetracker-query-api#79

So with this API, we simply request the bounds by filter, then manipulate the leaflet to jump to the bounds.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

add a new suite of icon for Greenstand map

We have designed a new suite of icons, need to be integrated into the map core.
We need:

• Make it configurable, means we can chose the suite of icon to use when client set up the core.
• The new suite of icon is here (just for dev env): https://dev-k8s.treetracker.org/tiles/new/1/1/1.png
• Build the sandbox (index.js) to control/test it, like list the icon style in a selection form input and chose a new one.
• Please make the current/previous version of the icon the default.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Change publishing to npm to manually action

Do not publish the npm lib on every merge, just do it manually, so we can choose which version to publish.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Cypress test runner supports auto-refresh

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Improve the encapsulation level of the Map.js

This issue is about removing unnecessary knowledge from Map.js, to make it more reusable. Please check the Map.js and remove unnecessary relying on in this class, as far as I know, now Map.js know the window, and window.location object, to update the URL, we need to remove it and open a new event or parameter to leave this work to an outsider caller.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

A problematic case of calculation the initial map view.

When open and zoom in to the map area, nothing is showing, have to zoom out to show tree data.

https://www.treetown.finorx.com/map/?all

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Migrate event system to use node events lib.

We impletement the event system by simply call onXXX function parten, in this PR #20 #21 we try to use events lib to provide a solid and battle checked approach to implement event system, please migrate all other onXXX event to use
These listner is like onError, onLoad...

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Let the core support geojson input

Make the core is able to show a geojson source.

The API should be map.addGeoJson(urlToGeoJson | GeoJson) so some else.

The goal is to pass in a geojson

Possible workflow:

const map = new Map(...);
const geoJsonObject = map.addGeoJson(url);
// jump the the map bounds to fit the geoJson area.
geoJsonObject.focus();

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Replace the old icon for highlighted and selected icon with new ones.

https://www.figma.com/file/XdYFdjlsHvxehlrkPVYq0l/Greenstand-Webmap?node-id=6133%3A21315
https://www.figma.com/file/XdYFdjlsHvxehlrkPVYq0l/Greenstand-Webmap?node-id=6131%3A20768

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

The loading animation running forever

Even the map seems to have been loaded:
https://dadior.s3.ap-northeast-1.amazonaws.com/Screen%20Recording%202021-12-15%20at%203.07.53%20PM.mp4

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Highlight(mark as selected) the marker/icon when click on the marker/icon.

When clicking the tree marker/icon, should show a highlighted/selected marker/icon on the tree position.

Please note, there are two approach to show icons in the map core repo, 1. tile server 2. leaflet API
So, the things is: to show the icon without highlighting on the map, we use tile server png to show them, if we need to highlight a marker, get the latitude and longitude on the event (hover/click) and use leaflet API to show the icon, check the branch master in treetracker-web-map-client for details.

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Automatically pack the core with webpack

Currently, the way to release a new version is:

1. run npm run pre-publish to build the bundle with webpack.
2. commit the code
3. run the github action to release the tag

It's inconvenient and easy to make mistakes (forgot to run the command), so we need to pack the code automatically every time we release a version.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Automate the NPM module release with Github Action

With: auto-sematic-release and Github Action, and husky, we should be able to release the map core to npm automatically, after tagging a new version of the core.

Prerequisite, #23 #2 #13

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Can not update the version in package.json

Now in the github action, the main.yaml (please run it with branch main) will make a release and create correct tag in the repo, but the problem is that the package.json 's version can not be updated automatically.

treetracker-web-map-core/package.json

Lines 1 to 6 in ab4d306

	{
	"name": "treetracker-web-map-core",
	"version": "1.0.1",
	"description": "This is the core module for Greenstand web map application.",
	"main": "dist/main.js",
	"files": [

So the version tag doesn't match the npm package.json version.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

geography calculation problem

pleae check this video

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Next/prev tree need some feedback when hovering on it.

https://dadior.s3.ap-northeast-1.amazonaws.com/Screen%20Recording%202022-02-09%20at%2011.48.57%20AM.mp4

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Sometimes, zoom in/out button do not work.

https://www.loom.com/share/1b62bfc64a9a4fc780142cd208dc04d8

Expose options for spin/loading icon

treetracker-web-map-core/src/Map.js

Lines 365 to 366 in 1fbaa63

	showLoadingThreshold: 4000,
	slowThreshold: 8000,

So for clients which are going to use the web map core, they can set up the spin behaviors via:
new Map({
disableSpinIcon: boolean,
slowThreshold: [ms],
showLoadingThreshold: [ms],
})

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Semantic release bot support

This repository might be the best case for semantic version support. Now there would be 3 places using this core as underlying lib: wallet-web, web-map-client master branch, and web-map-site branch.
So they need a precise version to install the core lib, to avoid chaos.

This issue might be related to #2

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Be able to highlight the tree icon after clicking (jump to single tree page)

Screen.Recording.2021-11-04.at.11.31.39.AMsmall.mov

Just like what we do on https://map.treetracker.org

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Install husky and commit message plugin

So we can check the commit message following the rule like: feat: some feature

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Support the new icon spec.

Now we defined a new spec for the icon URL/route rule:

Use icon=o' query pamaeter rather than the path /new/` to choose the icon suite.

The spec details is here: https://greenstand.gitbook.io/wallet-web-app/tile-server-specification

So we need to modify the core to follow the new rule.

Here are some links for the design elements:

https://www.figma.com/file/XdYFdjlsHvxehlrkPVYq0l/Greenstand-Webmap?node-id=5336%3A19844

Tree icon:
https://www.figma.com/file/XdYFdjlsHvxehlrkPVYq0l/Greenstand-Webmap?node-id=6131%3A21214

Highlighted tree:
https://www.figma.com/file/XdYFdjlsHvxehlrkPVYq0l/Greenstand-Webmap?node-id=6133%3A21308

Selected tree:
https://www.figma.com/file/XdYFdjlsHvxehlrkPVYq0l/Greenstand-Webmap?node-id=6133%3A26944

Small size:
https://www.figma.com/file/XdYFdjlsHvxehlrkPVYq0l/Greenstand-Webmap?node-id=5336%3A19844

Basically, the big and small icons are just different in size, the shape is the same. The way I'm doing in tile server is: export the element from Figma, choose 3x size png, so the icon would be clear when I display it. I just need to shrink the image to get the correct icon:
for desktop:
transform: scale(0.33);

for mobile:
transform: scale(0.27);

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Map object support changing the initial status

Currently, we init the Map object by bounds or filters, like: userid=1
Now we should be able to make the Map object being able to switch between these states, like change from userid=1 to treeid=xxx, vice verse

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Spin icon can not disappear when the map apparently get loaded or timeout

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Shouldn't update the url in this way

The map object will automatically update the URL with the changing bounds of the map.
This feature works for the previous/old version of the map because we don't have a further path for the map, but now we have multiple levels of route/path, so this behavior is inappropriate:

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

expose an option of the Map: zoom in/out button

Map({
enableControlPanel: true,
})

So we got the zoom in/out button on the bottom right corner.

leaflet already has this feature, so we just need to expose it.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Publish the web map core to npm cloud

So we can install this repo by npm install @greenstand/treetracker-web-map-core

Please ask me for the greenstand official npm account.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

new feature: setting to control loading animation.

Please add a setting to control the animation showing up when loading the map.
It could be: duration=1000 so if we set duration=0, the map will show up without any animation, and there should be a default duration, simply set this value to the default value if the user didn't set it explicitly, (it's good to set current value in the code as the default value)

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Make the repo publishable to the npm cloud

So when can install it by npm install @greenstand/treetracker-web-map-core

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Find a good way to test/check the map app with Cypress

Our test looks like this picture below, we need to find a good way to verify the map result, like, the data on the map was loaded correctly, say, there are several cluster icons on the map, it's not a normal/traditional case for testing, also, those cluster on the map isn't css+html, they are pictures.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Migrate the code for nearest tree to query API new spec.

Prerequisite: Greenstand/treetracker-query-api#78

Currently the nearest tree feature (the arrow icon indicating the nearest tree on the map when people get lost on the map) is using the old API, now we need to switch to the new API.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

A new option to switch between different icon suits.

We need to use an option to set the icon style (switch between icons suits), it could be like:

new Map({
  iconSuite: 'old' | 'green',
}

In the near future, we at least have three suites of icon:

1. the old orange icon for current online version.
2. The green icon we already support now.
3. A eclipse green version for destop (big screen side)

In the future, it's possible we are going to design a new icon for our VIP partner.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

A guide of how to publish the core to npm

By executing github action.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Release web map core as a NPM module

We can not use/import the leaflet css when we installing the core to other project, like the treetracker-web-map-client next.js will throw error:

the reason:
https://nextjs.org/docs/messages/css-npm

Seems because we didn't import the bin/dist of the bundle, we directly import the src file in client, please figure out the correct way to install this package/lib to other clients.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Previous (big) circles not disposed properly upon zoom in

Upon zooming in (fast) or clicking on regions, the previous big circles with number of trees in regions are disappearing very slowly most of the time. The big circle is zoomed in and is covering big part of the screen and at the same time we are already loading another/detailed regions with tree numbers. This doesn't look nice for a user. We should dispose/dismiss the previous circle more effectively.

Details:
Mobile and Desktop devices

slow_circles.mov

Build/pack the lib automatically

Now, every time we want to release/publish new version, we need to pack the file to bundle js, by executing: npm run pre-publish
we need to find a convenient way to do it automatically, which means, every time we do the publish to npm action, we can get the pack job done automatically.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Migrate the `nearest` feature from the web-map-client to core

we need to migrate the code below to the core:
https://github.com/Greenstand/treetracker-web-map-client/blob/9257c09f6d56d8a041b28e26f7eb52dbde7f33bf/src/components/App.js#L321-L340

because it is more about a pure map operation.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

A good way to give feedback when tile server failed.

The case is when the tile-server getting slow or even crashed, then on the map, the user can not tell what happened, just a map with satellite background and without any tree data.
So we need to find a good way to inform the user something went wrong.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Emit the core with lower JS standards

Ran into problem when client trying to integrate the core (a react project):

   82 File was processed with these loaders:
   83  * ./node_modules/[email protected]@babel-loader/lib/index.js
   84 You may need an additional loader to handle the result of these loaders.
   85 |           }
   86 |
   87 >           _handleLoading = t => {
   88 |             i.warn("start loading tile..."), i.warn("wait for show loading for %d sed"
   89 , this.options.showLoadingThreshold), this.showLoadingTimer = setTimeout(() => {
   90 |               i.warn("show loading..."), this.options.onShowLoading();

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Move the number on the icon downward a bit

Otherwise move the mouse over the icon, the highlighted icon has some difference with the original icon
https://dadior.s3.ap-northeast-1.amazonaws.com/Screen%20Recording%202022-02-10%20at%202.51.33%20PM.mp4

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Tree pagination feature

This feature is for navigating between tree point on the map, refer to this link: https://map.treetracker.org/?&bounds=-13.218893967568878,8.427470595924952,-13.187994919717314,8.444408553605653 the load is slow, be patient. ( when you click the tree icon, a panel will show up, on the panel, there is the next/prev button)
Basically, we need to be able to know from the map core: if there are multiple tree points showing up on the map, then, tell the map core to jump to (select) the next tree point.

So the API of this feature would be like:

function treeCountOnTheMap() : number // return the number of tree on the map

function goNextTree() : void // indicate core to jump to the next tree.

function getPreviousTree() : void // jump to previous tree

Actually, we almost implemented this feature in the master branch of web map client https://github.com/Greenstand/treetracker-web-map-client so please refer to code there.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Set up project tools like husky, eslint, prettier

Need to:

• Install eslint and rules (.eslintrc)
• Install prettier and rules
• Install husky for:
  • auto check and fix eslint error/warning when commiting.
  • auto format code when committing.
• add simple guide into readme explaining how to use these commands.

This project should be the same as this repo: https://github.com/Greenstand/treetracker-web-map-client
So please refer to it.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

The first Cypress integration test

Should be able to:

• Open the map
• Mock the tile server layer (png and urfGrid)
• Being able to zoom in by clicking a cluster icon.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Add feature: previous tree and next tree button

Actually, the function of this feature has been finished in the https://github.com/Greenstand/treetracker-web-map-client/tree/master also you can find it in the website online : map.treetracker.org

The goal of this issue is to:

• Migrate this feature to the core
• Temporarily add two button (as shown in the picture) and add the logic of clicking these two buttons.
• We will open a new issue when our designer has finished the design of the buttons, and replace the UI with new design.

---

Some hints:

• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.