JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&quot;"></script>
<div id="map"></div>
<div id="data"></div>

CSS

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

#data {
  background: rgba(255,255,255,.7);
  position: absolute;
  top: 10px;
  right: 10px;
  width: 200px;
  padding: 10px;
  font: 400 14px/2 Arial;
}

Babel + JSX

function createData(centerX, centerY, mapDelta, mapMass, valueMass) {
  return Array(mapMass).fill(1)
    .map(() => [centerX + Math.random() * mapDelta, centerY + Math.random() * mapDelta])
    .concat(
      Array(mapMass)
      .fill(1)
      .map(() => [centerX - Math.random() * mapDelta, centerY - Math.random() * mapDelta])
    )
    .map(coords => {
      return {
        value: ~~(Math.random() * valueMass),
        coords
      }
    });
}

function fillMap(myMap, data) {
  data.forEach(({
    coords,
    value
  }) => {
    const placemark = new ymaps.Placemark(coords, {
      iconContent: value
    }, {
      preset: "islands#yellowStretchyIcon"
    });
    myMap.geoObjects.add(placemark);
  });
}

function insideBounds([lat, lon], [leftBottom, rightTop]) {
  return lat > leftBottom[0] && lat < rightTop[0] &&
    lon > leftBottom[1] && lon < rightTop[1];
}

function renderLimits(bounds, data, globalMin, globalMax) {
  let [min, max] = [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY];
  data.forEach(({
    coords,
    value
  }) => {
    if (insideBounds(coords, bounds)) {
      if (min > value) {
        min = value;
      }
      if (value > max) {
        max = value;
      }
    }
  });
  document.getElementById('data').innerHTML = [
  	`Глобальный минимум  - ${globalMin}`,
    `Глобальный максимум - ${globalMax}`,
    `Локальный минимум   - ${min}`,
    `Локальный максимум  - ${max}`,
  ].join('<br>');
}

ymaps.ready(function() {
  const lat = 55.77; // широта
  const lon = 37.59; // долгота
  const myMap = new ymaps.Map('map', {
    center: [lat, lon],
    zoom: 15,
    controls: ['zoomControl']
  });
  const data = createData(lat, lon, 0.02, 40, 1000);
  const max = Math.max.apply(null, data.map(({
    value
  }) => value));
  const min = Math.min.apply(null, data.map(({
    value
  }) => value));
  fillMap(myMap, data);

  renderLimits(myMap.getBounds(), data, max, min);
  myMap.events.add('boundschange', (e) => {
    const newBounds =...