3

I have a Blazor(web-assembly) page that has a map(Leaflet) which is heavily loaded items on it. When user moves to another page then returns to the map page(with routing not reloading) the map div element cleared and I have to fill the map again with the items. Is it possible to somehow keep those items on the map(memory) so no redrawing is needed when the user comes back to the MapPage?

current scenario:

  1. User goes to MapPage
  2. So many items loaded on the map via javascript call in OnAfterRenderAsync method
  3. user goes to another page
  4. user comes back to MapPage
  5. MapPage component is cleared now and should be rendered again
  6. page will be rendered again So many items loaded again on the map(step 2)

what I want :

  1. User goes to MapPage
  2. So many items loaded on the map via javascript call in OnAfterRenderAsync method
  3. user goes to another page
  4. user comes back to MapPage
  5. MapPage will be loaded from memory and everything from step 2

here is my MapPage code :

  protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        await js.InvokeVoidAsync("showMapItems");
        await base.OnAfterRenderAsync(firstRender);
    }

Update (for bounty): Suppose that the page is loading locations and show them on the map. If user clicks on the each location he should be redirected to a detail page and the he will go back to search page.

Hacky solution : I decided to hide the map by setting its display:none and show the detail component. But I want detail to be also accessible through URL, and when user clicks on detail on the map the URL should be changed. So I used the following route but I get an error while loading the page :

@page "/location/search"
@page "/location/search#{LocationId:int}"

@code{
     [Parameter] public string LocationId { get; set; }
}

and I get the following error in browser:

Invalid template 'location/search#{*LocationId}'. Missing '{' in parameter segment 'search#{*LocationId}'.

nAviD
  • 2,784
  • 1
  • 33
  • 54
  • I don't know blazor but maybe you have access to the [localStorage](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage) – Falke Design Dec 15 '20 at 17:32
  • @FalkeDesign thank you for your comment but that's not the case. – nAviD Dec 15 '20 at 17:36
  • What if the map is part of the layout? Based on the actual page, the map is visible or not. So, the first time the MapPage is loaded, you run your code and save it via a static variable. The user goes to a different page, and the map is not visible anymore. The user revisits the MapPage, and because the static variable is true, you wouldn't call your script? – Just the benno Dec 15 '20 at 17:53
  • @Justthebenno No the map div element completely will be deleted after routing. Also I can not use the map in layout. the map is not saveable into variables easyly. see leaflet documentations – nAviD Dec 15 '20 at 18:22
  • There are multiple solutions you can use: 1- use location hash like "mainpage.html#newpage" and you can load your details page with an ajax request and print it to the page after hiding the map, now the details will be accessible through URL 2- use js "window.history.pushState" 3-(the simplest solution) using "iframe" and do the #hashing approach like solution number (1) 4- using any "Client-side storage" API like (local storage API, indexeddb API, Web Storage API) to store the map resources If you want more details, I can post a full detailed answer – Mohamed Sa'ed Dec 22 '20 at 12:51

0 Answers0