Не исчезает кнопка "Назад" после возвращения обратно на главный слой карты

Question

Я новичок в leaflet карте и пока только изучаю. Внедрил себе на сайт, реализовал на данный момент все, что хотел. Но вот никак не получается убрать кнопку, если нажать на область откроется другая карта, а после возвращения назад кнопка не убирается и дублируется по мере открывания карт.

<link rel="stylesheet" href="http://eso-wiki.ru/resources/assets/leaflet.css" />
<script src="http://eso-wiki.ru/resources/assets/leaflet/js/thereach/leaflet.js"></script>
<link rel="stylesheet" href="http://eso-wiki.ru/resources/assets/leaflet/Control.FullScreen.css" />
<script src="http://eso-wiki.ru/resources/assets/leaflet/Control.FullScreen.js"></script>

<div align="center" id="map" style="height: 600px;width: 600px;" allowfullscreen="allowfullscreen"></div>

<script>

    const bounds = [
        [0, 1280],
        [1280, 0]
    ];

    const dungeonIcon = L.icon({
      iconUrl: 'http://eso-wiki.ru/resources/assets/leaflet/icons/dungeon.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

    const areafinterestIcon = L.icon({
      iconUrl: 'http://eso-wiki.ru/resources/assets/leaflet/icons/poi_areaofinterest_complete.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

    const houseIcon = L.icon({
      iconUrl: 'http://eso-wiki.ru/resources/assets/leaflet/icons/poi_group_house_owned.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

    const arenaIcon = L.icon({
      iconUrl: 'http://eso-wiki.ru/resources/assets/leaflet/icons/poi_solotrial_complete.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

    const campfireIcon = L.icon({
      iconUrl: 'http://eso-wiki.ru/resources/assets/leaflet/icons/poi_camp_complete.png',
      iconSize: [48, 48],
      iconAnchor: [22, 14],
    });

  const map = L.map('map', {
    crs: L.CRS.Simple,
    minZoom: -1,
    maxZoom: 4,
    maxBounds: bounds,
    center: [640, 640],
    fullscreenControl: true,
    fullscreenControlOptions: {position: 'topleft'},
    forcePseudoFullscreen: true,
    zoom: 0
  }).setView([640, 640], 0);

  const mainBounds = [[0, 0], [1280, 1280]];
  const mainLayer = L.imageOverlay('http://eso-wiki.ru/images/6/67/Reach_base.jpg', mainBounds).addTo(map);
  map.fitBounds(mainBounds);

// events are fired when entering or exiting fullscreen.
map.on('enterFullscreen', function () {
    console.log('entered fullscreen');
    map.setZoom(0);
});

map.on('exitFullscreen', function () {
    console.log('exited fullscreen');
    map.setZoom(-1);
});

  function addZones() {
L.marker([1064, 478], {icon: dungeonIcon}).addTo(map).bindPopup("<div align=center><a href=http://eso-wiki.ru/index.php/test>test</a><hr>test</div>");
  }
  addZones();

const MarkarthZone = L.polygon([
    [628, 242],
    [635, 243],
    [640, 254],
    [637,275],
    [639,278],
    [657,287],
    [663,296],
    [663,296],
    [659,324],
    [665,337],
    [656,360],
    [647,373],
    [646,384],
    [632,396],
    [616,389],
    [606,369],
    [601,352],
    [596,344],
    [581,351],
    [573,336],
    [572,320],
    [574,302],
    [571,287],
    [574,264],
    [583,249],
    [596,252]
], {className: "leaflet-polygon"}).bindTooltip("Markarth");

MarkarthZone.addTo(map);
MarkarthZone.on('click', function () {
  map.eachLayer(function (layer) {
    map.removeLayer(layer);
  });
  const MarkarthBounds = [[0, 0], [1280, 1280]];
  L.imageOverlay('http://eso-wiki.ru/images/d/d4/Markarthcity_base.jpg', MarkarthBounds).addTo(map);
  map.fitBounds(MarkarthBounds);

  const backButton = L.control({position: 'topright'});
      backButton.onAdd = function () {
        const div = L.DomUtil.create('div', 'leaflet-bar');
        div.innerHTML = '<a href="#" title="Back">←</a>';
        div.onclick = function () {
          map.eachLayer(layer => map.removeLayer(layer));
          mainLayer.addTo(map);
          map.fitBounds(mainBounds);
          MarkarthZone.addTo(map);
          addZones();
          return false;
          remove();
        };
       return div;
      };
      backButton.addTo(map);
    const MarkarthIcon = L.icon({
      iconUrl: 'http://eso-wiki.ru/resources/assets/leaflet/icons/Markarth.png',
      iconSize: [252, 74],
      iconAnchor: [22, 14],
    });
L.marker([1064, 478], {icon: MarkarthIcon}).addTo(map);

});
</script>

Answer 1

Я решил данную проблему, добавив div.remove(); в кнопку:

  const backButton = L.control({position: 'topright'});
      backButton.onAdd = function () {
        const div = L.DomUtil.create('div', 'leaflet-bar');
        div.innerHTML = '<a href="#" title="Back">←</a>';
        div.onclick = function () {
          map.eachLayer(layer => map.removeLayer(layer));
          mainLayer.addTo(map);
          map.fitBounds(mainBounds);
          MarkarthZone.addTo(map);
          addZones();
          div.remove();
          return false;
        };
       return div;
      };

Теперь все работает.

БЛОГ НА HUSL

Не исчезает кнопка "Назад" после возвращения обратно на главный слой карты

Ответы (1 шт):