JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css">
<div id='map'></div>
<div class="inputContainer">
  <p> Click on the circle to activate a popup. After scaling the container (&nbsp;
    <input type="checkbox" id="checkScale" />
    <label for="checkScale"> scale the map </label>&nbsp;), all mouse events will have an offset on the map object : it's no longer possible to zoom correctly or activate the popup.
    <p>

</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  outline: 1px solid red;
}

.inputContainer {
  top: 0;
  left: 0;
  position: absolute;
  padding: 30px;
}

JavaScript

var elInput = document.getElementById("checkScale");

elInput.addEventListener("change", function(e) {
  var mapContainer = map.getContainer();
  if (e.target.checked) {
    mapContainer.style.transform = "scale(0.5)";
  } else {
    mapContainer.style.transform = "";
  }
  map.resize();
})


var map = new mapboxgl.Map({
  container: 'map',
  style: {
    "version": 8,
    "name": "simple",
    "zoom": 8,
    "center": [
      0,
      0
    ],
    "sources": {},
    "layers": []

  },
  center: [0, 0],
  zoom: 3
});

map.on('click', 'points', function(e) {
  new mapboxgl.Popup()
    .setLngLat(e.features[0].geometry.coordinates)
    .setHTML(e.features[0].properties.title)
    .addTo(map);
});


map.on('mouseenter', 'points', function() {
  map.getCanvas().style.cursor = 'pointer';
});


map.on('mouseleave', 'points', function() {
  map.getCanvas().style.cursor = '';
});

map.on('load', function() {

  map.addLayer({
    "id": "points",
    "type": "circle",
    "source": {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [0, 0]
          },
          "properties": {
            "title": "you are here"
          }
        }]
      }
    },
    "paint": {
      "circle-radius": 10
    }
  });
});