Leaflet을 사용하여 지도를 사용한 앱을 작성하고 있었습니다만, 화면 천이(혹은 리로드)했을 때에 반드시 디폴트의 좌표로 돌아 버려, 사용하기 어려움을 느끼고 있었습니다.
그래서, 화면 천이해도 천이 전에 보고 있던 지도 좌표를 유지하고 싶다 sessionStorage를 사용했습니다.

구체적으로 실현한 방법을 정리해 보겠습니다.

개발 환경

Ruby 2.6.5
Ruby on Rails 5.2.6
Leaflet.js 1.7.1

Leaflet 초기 설정

여기서 Leaflet.js의 도입은 생략합니다.
Leaflet.js
먼저 Leaflet에서 지도를 표시하기 위한 기본 설정을 합니다.
맵 타일은 오픈 소스 OpenStreetMap을 사용합니다.

index.html

<div id="mapid"></div>

<script>
 //デフォルトの位置座標とzoomを指定
 var mymap = L.map('mapid').setView([35.680196, 139.766746], 16);

//マップタイルを指定
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'c <a href="//osm.org/copyright">OpenStreetMap</a> contributors, <a href="//creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    maxZoom: 18,
    minZoom: 3,
}).addTo(mymap);
</script>

기본 좌표 35.680196, 139.766746 는 도쿄역을 중심으로 하는 지도를 표시합니다.

그러나, 이 설정이라고 지도를 스크롤 해 다른 지역을 표시하고 있어도, 화면을 천이(또는 리로드)할 때마다 또 도쿄역에 돌아가 버립니다. 앱에 따라 이 동작이 불편할 수 있습니다.

sessionStorage란?

그래서 sessionStorage라는 구조를 사용했습니다.

sessionStorage는 JavaScript를 사용하여 브라우저에 데이터를 저장할 수 있는 메커니즘입니다. HTML5에서 도입된 WebStorage의 하나입니다.
브라우저 화면을 열고 있는 세션에서만 데이터를 유지할 수 있고, 새로운 탭이나 윈도우를 열면 새로운 세션이 시작됩니다.
화면 천이나 리로드해도 데이터가 유지되는 것이 특징입니다.

sessionStorage

그 밖에 localStorage가 있습니다만, 이쪽은 브라우저를 닫아도 데이터 보관 유지가 지속해 버리므로, sessionStorage만큼 부담없이 사용할 수 없네요.

sessionStorage에서 화면 전환 전의 위치 정보 유지

지도의 위치 정보를 sessionStorage에 보관해 봅니다.

우선, 현재 표시하고 있는 지도의 중심의 위치 좌표를 JavaScript로 취득합니다.
다음 코드를 추가합니다.

index.html

<script>
//下記を追記
mymap.on('move', function(e){
　　　　currentPosi = mymap.getCenter();
  currentZoom = mymap.getZoom();
}
</script>

지도의 중심 좌표와 zoom 값을 변수에 저장합니다. 이제 지도를 이동할 때마다 위치 좌표를 가져와 변수에 유지할 수 있습니다.

다음에 취득한 위치 좌표의 데이터를 sessionStorage에 보관해 갑시다.

sessionStorage에 보관하려면 키와 값을 설정합니다.sessionStorage.setItem('key', value)
index.html

<script>
mymap.on('move', function(e){
　　　　currentPosi = mymap.getCenter();
  currentZoom = mymap.getZoom();
  //下記を追記
  sessionStorage.setItem('currentLat',currentPosi.lat);
  sessionStorage.setItem('currentLng',currentPosi.lng);
  sessionStorage.setItem('currentZoom',currentZoom);
}
</script>

GoogleChrome 확인 화면에서 sessionStorage 값이 유지되는지 확인할 수 있습니다.

Application > Storage > sessionStorage > http:~



설정한 키와 값이 세트가 되어 보관 유지되고 있는 것을 확인할 수 있었습니다.
이제 화면 전환으로 데이터를 이월할 수 있습니다.

sessionStorage의 값을 받고 다시로드 한 후지도에 반영

다음에 화면 천이했을 때에 이 위치 좌표를 받아, 지도에 반영시킵니다.

index.html

<script>
　　var sessionKey = sessionStorage.getItem('currentLat');

 //sessionStorageが空だった場合と値が存在する場合で分岐し、デフォルト値を動的に生成
 if( sessionKey == null ){
    var defaultLatlng = [35.678362, 139.715387];
    var defaultZoom = 13;
  } else {
    var defaultLatlng = [Number(sessionStorage.currentLat), Number(sessionStorage.currentLng)];
    var defaultZoom = Number(sessionStorage.currentZoom);
　　　　};
 　var mymap = L.map('mapid').setView(defaultLatlng, defaultZoom);//直書きだった座標とzoomの値を、変数にする

//以下省略

</script>

이제 화면 전환 전의 위치 정보를 화면 전환 후 (이번에는 다시로드 후)의지도에 반영 할 수있었습니다.