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 :

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

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.