A option/method to support: valid area feature.

On the web map client, for example, when open this page: http://localhost:3000/planters/940

The map area is trying to focus on the given planter, (there is a function in the core to calculate the initial area for this), but, the problem is, as shown in the picture, the map is partially covered by a drawer/panel, so, the map eventually in the end user's eys is not focused perfectly on the current planter.

We need to consider an option or function to make the map core aware of the 'valid' area of the current map, so it would take this in consideration when calculate the initial map view.

For example:
```
new Map({
validVisualArea: {top: ?px, left: ?px, bottom: ?px, right: ?px}
})
```
Here the for properties expresses the rectangle of the area on the current map screen.

---

Some hints:

- Please read our [readme](https://github.com/Greenstand/treetracker-web-map-core#treetracker-web-map-core) for more information/guide/tutorial.
- Here is [an engineering book](https://greenstand.gitbook.io/engineering/) in Greenstand.
- To know more about our organization, visit our [website](https://greenstand.org).
- If you want to join the slack community (some resources need the community member's permission), please leave your email address.

Start with the repository README, then locate the core function that calculates the initial map area and the Map constructor or options handling. Define how the validVisualArea rectangle affects the initial view, and verify that a planter is centered within the unobscured map area when a drawer or panel covers part of the screen.

Written by the indexing model from the issue text.