Update URL with bounding box so that current location of the map can be shared about treetracker-web-map-client HOT 7 CLOSED

https://dev.treetracker.org/@zaven?focus=3.882756877719757,0.17578125,2z

from treetracker-web-map-client.

I think in our case, the easiest way is to just rewrite the path with the parameter we are using, so it's easy for us to get them from the path and then setting the map in correct state then request the server.
like, this is the code we generate the request for server:

So, if we can fetch the parameter and put then in the path, the next, when we open the app with the same url/parameters, we just need to pass then to the map object and request the server. Something like:

http://treetracker.org/?map_name=freetown&bounds=x,x,x,x

An extra thing that needs to do is to move the map to the bounds by the client.

from treetracker-web-map-client.

@dadiorchen Yes, all other filters are reserved and not influenced

from treetracker-web-map-client.

we found some issues with this PR. query parameters are not retained in the URL when present.

from treetracker-web-map-client.

this PR follows google maps, which was indeed our spec.. but upon review I see that @ also has a special meaning in our platform, the wallet handles, so we have to think differently about how we update the location in the URL.

Some ideas for URLs, not sure which is best

Wallet:
https://dev.treetracker.org/@zaven,3.882756877719757,0.17578125,2z
OR
https://dev.treetracker.org/@zaven?location=3.882756877719757,0.17578125,2z

General query parameters:
https://dev.treetracker.org?map_name=freetown&location=3.882756877719757,0.17578125,2z

from treetracker-web-map-client.

I think in our case, the easiest way is to just rewrite the path with the parameter we are using, so it's easy for us to get them from the path and then setting the map in correct state then request the server.
like, this is the code we generate the request for server:

treetracker-web-map-client/src/map.js

Lines 186 to 205 in a9a02cc

	var queryUrl = treetrackerApiUrl + "trees?clusterRadius=" + clusterRadius;
	queryUrl = queryUrl + "&zoom_level=" + zoomLevel;
	if (
	currentZoom >= 4 &&
	!(
	(token != null ||
	mapName != null ||
	treeid != null ||
	userid !== null) &&
	firstRender == true
	)
	) {
	queryUrl = queryUrl + "&bounds=" + viewportBounds;
	}
	queryUrl = queryUrl + getTreeQueryParametersFromRequestedFilters();
	timeline = getQueryStringValue("timeline");
	timeline && (queryUrl += `&timeline=${timeline}`);
	log.log("request:", queryUrl);

So, if we can fetch the parameter and put then in the path, the next, when we open the app with the same url/parameters, we just need to pass then to the map object and request the server. Something like:

http://treetracker.org/?map_name=freetown&bounds=x,x,x,x

An extra thing that needs to do is to move the map to the bounds by the client.

@dadiorchen Thanks for the suggestion, but there is some potential problem reusing bounds query param. When we get bounds information from URL, we cannot use it directly in mapOptions (needs zoom level and center info) in initializationn period, therefore we can only use map.fitBounds() later on to move the map position. But at the same time, we already started to track current bounds and rewrite the bound query param, therefore there would be some potential conflicts with reading and writing.
Currently use a new query param "focus=" in PR #32, let me know you have some other thoughts, thanks.

from treetracker-web-map-client.

@Maxfrank sounds reasonable. Please hold on to this PR for a while, cause I am refactoring the workflow to fit the new cluster tile layer, and I will keep your idea in mind, and let's see how to figure it out when I reach the point.
In your code, did you reserve the filter like map_name=freetown in the URL?

from treetracker-web-map-client.