Leaflet.js and full page reloading with Liveview 0.18?

Phoenix Forum Questions / Help
,
1

Hi,

It seems that by mistake I submitted the same topic before and apologize for that.

I’m using Liveview 0.18 and trying to integrate Leaflet to provide maps to users and for that I’m using Hooks. The problem is when I move to the page having the div container loaded by Leaflet, this cause full page reloads. This problem led me to test my app on Firefox (a thing that I have never done before ) and surprise : whether with or without the map, all my sidebar links cause full page reload !

The records below show the sidbar navigation accros the diffrent pages of the app.

On Chrome, the Dashboard link redirect to a page containing the map and you can notice the full page reload effect which is not the case with the other links :

safir

On Fixefox, all the links are causing full page reload and I have turned off the Leaflet code :

safir firefox

Here is the hook code :

Hooks.locationMap = {

  mounted() {

    const mapid = this.el.id;
    let map = leaflet.map(mapid).setView([51.505, -0.09], 2);
    leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    
    }).addTo(map);

    leaflet.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    map.attributionControl.setPrefix(false)

    window.addEventListener("open-map", event => {
      setTimeout(function(){ map.invalidateSize()}, 10);
    })
  }
}

The heex code that contains the div conatiner :

<.live_component module={LayoutComponent} id="layout" selected={:dashboard} current_user={@current_user}>
    <section class="ml-4 min-h-min p-2 bg-gray-50 rounded shadow ">
        <div phx-update="ignore" id="map">
            <div id="map-container" phx-hook="locationMap" class="h-96 w-96 rounded shadow-custom"></div>
        </div>
    </section>
</.live_component>

On the Sidebar I’m using simple redirect links like this one :

<.link navigate={Routes.live_path(@socket, MyWeb.DashboardLive)}>
   <div @click="active = 'dashboard'" class="menu-item" >
         <h1 x-bind:class="!$store.sidebar.full ? 'sm:hidden' : '' ">
              Dashboard
         </h1>
    </div>
</.link>

Please note that for Chrome when I turn off Leaflet, the full page reloading problem disappears. So here I end up with two problems : Leaflet causing full page reload with Chrome and same thing with Firefox but with all nav links independently of leaflet.

Thanks for your help.

1 Like
2

Can you try adding a wrapper div with the PHX ignore instead of putting the PHX ignore directly on the div with Id=‘map’?

Don’t know if it is related but worth a try Mapbox & LiveView - map immediately disappears after the liveview updates the DOM with autocomplete search results

2 Likes
3

You’re using navigate so aren’t you asking for a page reload? Are you thinking that it is a full page reload just because you see the topbar?

navigate Navigates from a LiveView to a new LiveView. The browser page is kept, but a new LiveView process is mounted and its content on the page is reloaded. It is only possible to navigate between LiveViews declared under the same live_session. Otherwise, a full browser redirect is used.

4

@babouinette the solution you mention is about the map that dispappears after the liveview updates the DOM. For my case, the map is showing correctly :

safir

many thanks.

5

@cmo I’m using navigate with all links in the sidbar but if you look at the my previous records when I click on the Objects menu, only the tobar is showing and this is a normal behaviour. However, when I click on the Dashboard menu that open a page containing the map, all the page is refreching, you can look at how the toggle button is behaving for both cases and how the sidebar is flashing. Thanks

6

for those who encounter the same problem the solution is in this link . But this resolve partially my problem. With Firefox all the links on the sidebar are causing full page reload independently of Leaflet.js