JSFiddle - React, Tailwind, and code Playground

by Trufi

HTML

<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full&lazy=true"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quia non voluptates excepturi. Deleniti maxime earum, repellat enim porro sapiente ullam eum veritatis. Dolorem officia atque libero voluptatum voluptatibus maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quia non voluptates excepturi. Deleniti maxime earum, repellat enim porro sapiente ullam eum veritatis. Dolorem officia atque libero voluptatum voluptatibus maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quia non voluptates excepturi. Deleniti maxime earum, repellat enim porro sapiente ullam eum veritatis. Dolorem officia atque libero voluptatum voluptatibus maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quia non voluptates excepturi. Deleniti maxime earum, repellat enim porro sapiente ullam eum veritatis. Dolorem officia atque libero voluptatum voluptatibus maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quia non voluptates excepturi. Deleniti maxime earum, repellat enim porro sapiente ullam eum veritatis. Dolorem officia atque libero voluptatum voluptatibus maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quia non voluptates excepturi. Deleniti maxime earum, repellat enim porro sapiente ullam eum veritatis. Dolorem officia atque libero voluptatum voluptatibus maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quia non voluptates excepturi. Deleniti maxime earum, repellat enim porro sapiente ullam eum veritatis. Dolorem officia atque libero voluptatum voluptatibus maxime!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem quia non voluptates excepturi. Deleniti maxime earum, repellat enim porro sapiente ullam eum veritatis. Dolorem officia atque libero...

CSS

#map {
  width: 500px;
  height: 500px;
}

JavaScript

var options = {
    root: document.getElementById('map'),
    rootMargin: '0px',
    threshold: 1.0
}
var callback = function(entries, observer) {
DG.then(function() {
	DG.config.projectLeaveMaxZoom = 16;
  var map = DG.map('map', {
    center: [54.980156831455, 82.897440725094],
    zoom: 13
  });
});
};
var observer = new IntersectionObserver(callback, {
    root: document.getElementById('map'),
    rootMargin: '0px',
    threshold: 1.0
});