JSFiddle - React, Tailwind, and code Playground

by alekzonder

HTML

<link rel="stylesheet" href="http://10125.selcdn.com/js/gis/leaflet-1.0.0.css">
<script src="http://10125.selcdn.com/js/gis/script.full.3.js"></script>
<table>
  <tr>
    <td>id</td>
    <td id="id"></td>
  </tr>
  <tr>
    <td>alias</td>
    <td id="code"></td>
  </tr>
</table>

<button id="go">В Красноярск!</button>

<div id="map"></div>

CSS

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

JavaScript

var osm = L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: null
  }
);


var map = DG.map(document.getElementById('map'), {
  center: [55.0415, 82.9346],
  zoom: 10
});


map.on('projectleave', () => {
  setTimeout(() => {
    map.removeLayer(map.baseLayer);
    map.addLayer(osm);
  }, 0);
});


map.on('projectchange', () => {
  setTimeout(() => {
    map.removeLayer(osm);
    map.addLayer(map.baseLayer);
  }, 0);
});

var project = map.projectDetector.getProject();
document.getElementById('id').innerHTML = project.id;
document.getElementById('code').innerHTML = project.code;

document.getElementById("go").addEventListener("click", function(e) {
  map.setView([56.01839, 92.86717]);
  var project = map.projectDetector.getProject();
  document.getElementById('id').innerHTML = project.id;
  document.getElementById('code').innerHTML = project.code;
  e.preventDefault();
});