leaflet display all items from article attr data on map

Question

Hi, I found a great code for map, but i would like to show all items in map, in the example shows when scroll only, how can i display all items from article attr data.

i want use html list for items instead of json.

<div class="articles">
  <article data-coordinates="[-17.981680132859903, -70.22885519135282]" data-title="title 1">
        <h2>Title 1</h2>
        <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel praesentium aliquam animi nisi eius
              sequi autem obcaecati hic itaque sint labore incidunt officiis, veritatis modi corporis unde. Eos,
              accusantium odit?
        </p>
  </article>
  <article data-coordinates="[-17.982343728408157, -70.22992798111379]" data-title="title 2">
        <h2>Title 2</h2>
        <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel praesentium aliquam animi nisi eius
              sequi autem obcaecati hic itaque sint labore incidunt officiis, veritatis modi corporis unde. Eos,
              accusantium odit?
        </p>
  </article>
  <article data-coordinates="[-18.00728838751793, -70.24685472283247]" data-title="title 3">
        <h2>Title 3</h2>
        <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel praesentium aliquam animi nisi eius
              sequi autem obcaecati hic itaque sint labore incidunt officiis, veritatis modi corporis unde. Eos,
              accusantium odit?
        </p>
  </article>

// config map
let config = {
    minZoom: 7,
    maxZoom: 18,
    zoomControl: false, // zoom control off
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 52.22977;
const lng = 21.01178;
// calling map
const map = L.map("map", config).setView([lat, lng], zoom);
// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// reactivate zoom at the desired location
// [topleft, topright, bottomleft, bottomright]
L.control.zoom({
    position: "topright"
}).addTo(map);
// holder for all articles
const articles = document.querySelectorAll("article");
// setting a marker
function setMarker([lat, lng], title) {
    const marker = L.marker([lat, lng], {
        title
    });
    // add a marker to the map and create a popup
    marker.addTo(map).bindPopup(title);
}
// map centering
function centerMap([lat, lng], target, title) {
    const active = target.classList.contains("active");
    // set the map to lat coordinates, lng
    map.setView([lat, lng], 16);
    // checking if the active class is already
    // set, if not, set the marker
    if (!active) {
        setMarker([lat, lng], title);
    }
}
// helper function to intersectionObserver
function onChange(changes) {
    changes.forEach(function(change) {
        // get data from html coordinates element
        const data = change.target.dataset.coordinates;
        // get title from html
        const title = change.target.dataset.title;
        if (change.intersectionRatio > 0) {
            // center map
            centerMap(JSON.parse(data), change.target, title);
            // add class to article
            change.target.classList.add("active");
        }
    });
}
// checking if IntersectionObserver is supported
if ("IntersectionObserver" in window) {
    const config = {
        root: null,
        rootMargin: "0px",
        threshold: [0, 0.25, 0.5, 0.75, 1],
    };
    let observer = new IntersectionObserver(onChange, config);
    articles.forEach(function(article) {
        observer.observe(article);
    });
}

Ref: https://tomik23.github.io/leaflet-examples/36.story-maps-IntersectionObserver/index.html

Answer 1

Hope that's enough?
It was enough to use another example :) matching-all-markers-to-the-map-view

// config map
let config = {
  minZoom: 7,
  maxZoom: 18,
  zoomControl: false, // zoom control off
};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 52.22977;
const lng = 21.01178;
// calling map
const map = L.map("map", config).setView([lat, lng], zoom);
// Used to load and display tile layers on the map
// Most tile servers require attribution, which you can set under `Layer`
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
// reactivate zoom at the desired location
// [topleft, topright, bottomleft, bottomright]
L.control
  .zoom({
    position: "topright",
  })
  .addTo(map);
// holder for all articles
const articles = document.querySelectorAll("article");

const group = L.featureGroup();

articles.forEach((article) => {
  const coordinates = article.dataset.coordinates;
  const title = article.dataset.title;

  const marker = L.marker(JSON.parse(coordinates));

  marker.addTo(group).bindPopup(title);
});

group.addTo(map);

map.fitBounds(group.getBounds(), {
  padding: [50, 50], // adding padding to map
});

*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,
html,
#map {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

.story-content {
  width: 100%;
  height: 100%;
}

.flex {
  display: flex;
  flex-direction: row;
}

.story {
  background: #fff;
  width: 550px;
  overflow-y: auto;
}

.story article {
  padding: 30px 10px;
}

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet" />
<div class="story-content flex">
  <div class="story">
    <article data-coordinates="[-17.981680132859903, -70.22885519135282]" data-title="title 1">
      <h2>Title 1</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel praesentium aliquam animi nisi eius sequi autem obcaecati hic itaque sint labore incidunt officiis, veritatis modi corporis unde. Eos, accusantium odit?
      </p>
    </article>
    <article data-coordinates="[-17.982343728408157, -70.22992798111379]" data-title="title 2">
      <h2>Title 2</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel praesentium aliquam animi nisi eius sequi autem obcaecati hic itaque sint labore incidunt officiis, veritatis modi corporis unde. Eos, accusantium odit?
      </p>
    </article>
    <article data-coordinates="[-18.00728838751793, -70.24685472283247]" data-title="title 3">
      <h2>Title 3</h2>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel praesentium aliquam animi nisi eius sequi autem obcaecati hic itaque sint labore incidunt officiis, veritatis modi corporis unde. Eos, accusantium odit?
      </p>
    </article>
  </div>
  <div id="map"></div>
</div>