title: leaflet display all items from article attr data on map
body: <p><strong>Hi,</strong> 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.</p>
  <p>i want use html list for items instead of json.</p>
  <pre><code>&lt;div class=&quot;articles&quot;&gt;
    &lt;article data-coordinates=&quot;[-17.981680132859903, -70.22885519135282]&quot; data-title=&quot;title 1&quot;&gt;
          &lt;h2&gt;Title 1&lt;/h2&gt;
          &lt;p&gt;
                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?
          &lt;/p&gt;
    &lt;/article&gt;
    &lt;article data-coordinates=&quot;[-17.982343728408157, -70.22992798111379]&quot; data-title=&quot;title 2&quot;&gt;
          &lt;h2&gt;Title 2&lt;/h2&gt;
          &lt;p&gt;
                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?
          &lt;/p&gt;
    &lt;/article&gt;
    &lt;article data-coordinates=&quot;[-18.00728838751793, -70.24685472283247]&quot; data-title=&quot;title 3&quot;&gt;
          &lt;h2&gt;Title 3&lt;/h2&gt;
          &lt;p&gt;
                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?
          &lt;/p&gt;
    &lt;/article&gt;
  </code></pre>
  
   
  <pre class="lang-js prettyprint-override"><code>// 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(&quot;map&quot;, 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(&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;, {
      attribution: '&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors',
  }).addTo(map);
  // reactivate zoom at the desired location
  // [topleft, topright, bottomleft, bottomright]
  L.control.zoom({
      position: &quot;topright&quot;
  }).addTo(map);
  // holder for all articles
  const articles = document.querySelectorAll(&quot;article&quot;);
  // 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(&quot;active&quot;);
      // 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 &gt; 0) {
              // center map
              centerMap(JSON.parse(data), change.target, title);
              // add class to article
              change.target.classList.add(&quot;active&quot;);
          }
      });
  }
  // checking if IntersectionObserver is supported
  if (&quot;IntersectionObserver&quot; in window) {
      const config = {
          root: null,
          rootMargin: &quot;0px&quot;,
          threshold: [0, 0.25, 0.5, 0.75, 1],
      };
      let observer = new IntersectionObserver(onChange, config);
      articles.forEach(function(article) {
          observer.observe(article);
      });
  }
  </code></pre>
  <p><strong>Ref:</strong>
  <a href="https://tomik23.github.io/leaflet-examples/36.story-maps-IntersectionObserver/index.html" rel="nofollow noreferrer">https://tomik23.github.io/leaflet-examples/36.story-maps-IntersectionObserver/index.html</a></p>