JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/default-skin/default-skin.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe-ui-default.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.js"></script>
<div class="content">
  <figure class="quire-figure">
    <div class="q-figure__wrapper">
      <a href="#" data-type="leaflet" data-leaflet="<figure class=&quot;quire-figure leaflet-outer-wrapper&quot;><div id=&quot;js-map-1539299741693554917&quot; class=&quot;quire-map leaflet-inner-wrapper inset&quot; data-lat=&quot;48.8566&quot;data-long=&quot;2.3522&quot; data-geojson=&quot;/data/sample-geojson.json&quot;></div></figure>"
        data-size="560x500">
        <img class="quire-figure__image" src="https://leafletjs.com/docs/images/logo.png">
        </a>
    </div>
  </figure>
  <figure class="quire-figure">
    <div class="q-figure__wrapper">
      <a href="#" data-type="leaflet" data-leaflet="<figure class=&quot;quire-figure leaflet-outer-wrapper&quot;><div id=&quot;js-map-153929974169355491&quot; class=&quot;quire-map leaflet-inner-wrapper inset&quot; data-lat=&quot;48.8566&quot;data-long=&quot;2.3522&quot; data-geojson=&quot;/data/sample-geojson.json&quot;></div></figure>"
        data-size="560x500">
        <img class="quire-figure__image" src="https://leafletjs.com/docs/images/logo.png">
        </a>
    </div>
  </figure>
</div>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

  <!-- Background of PhotoSwipe. 
         It's a separate element, as animating opacity is faster than rgba(). -->
  <div...

CSS

$dark: #363636 !default;
$gap: 16px !default;
$quire-deepzoom-height: 500px !default;
$color_1: white;
$color_2: #fff;
$color_3: #000;
$background_color_1: #2da0e2;
.quire-deepzoom {
  height: $quire-deepzoom-height;
  margin-bottom: $gap;
  .leaflet-control-zoom {
    .leaflet-bar {
      a {
        color: $dark;
      }
      .leaflet-control-layers-toggle {
        background-image: url(https://i.stack.imgur.com/3keSg.png) !important;
        background-color: $background_color_1;
        background-size: 20px 20px;
      }
    }
  }
}

.leaflet-touch {
  .leaflet-control-layers-toggle {
    background-image: url(https://i.stack.imgur.com/3keSg.png) !important;
    background-color: $background_color_1;
  }
}

.leaflet-control-layers-expanded {
  color: $color_1;
  background-color: $background_color_1;
}

div.leaflet-container {
  background: $color_3;
}

div.leaflet-control-container {
  background: $color_3;
  >div.leaflet-top.leaflet-left {
    >div.leaflet-bar {
      box-shadow: none;
      border: none;
    }
    >div.leaflet-control-zoom.leaflet-bar.leaflet-control {
      >a {
        background: transparent;
        color: $color_2;
        border-bottom: none;
      }
    }
    >div.leaflet-control-fullscreen.leaflet-bar.leaflet-control {
      >a {
        background: transparent;
        color: $color_2;
        border-bottom: none;
        background: transparent url(../img/fullscreen-leaflet.png) no-repeat 0 0;
        background-size: 32px 52px;
      }
    }
  }
}

div.leaflet-control {
  >a {
    background: transparent;
  }
}

.leaflet-outer-wrapper {
  line-height: 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045;
  height: 500px;
  width: 500px;
}

.leaflet-inner-wrapper {
  // position: relative;
  //padding-bottom: 56.25%;
  /* 16:9 */
  // padding-top: 25px;
  // height: 500px;
  //  width: 500px;
}

.leaflet-container {
  width: 500px !important;
 ...

Babel + JSX

class Map {
  constructor(id) {
    // remove and refresh before init
    let container = L.DomUtil.get(id)
    let myNode = document.getElementById(id);
    while (myNode.firstChild) {
      myNode.removeChild(myNode.firstChild);
    }
    if (container != null) {
      container._leaflet_id = null
    }
    this.el = id
    this.tiles = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    this.attribution = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
    this.data = `https://jsbin-user-assets.s3.amazonaws.com/naeluh/sample-geojson.json`
    this.center = this.getCoordinates()
    this.defaultZoom = 6
    this.map = this.createMap()
    this.addTiles()


    this.map.on('fullscreenchange', function() {
      this.invalidateSize(true)
    })

    this.map.on('click', e => {
      this.map.invalidateSize(true)
    })

    this.map.on('dragstart', e => {
      this.map.invalidateSize(true)
    })

    if (this.data) {
      this.getData()
    }

    setTimeout(() => {
      this.map.invalidateSize()
    }, 100)
  }


  createMap() {
    return L.map(this.el, {
      // add leaflet options here
      fullscreenControl: true,
      noMoveStart: true,
      preferCanvas: true
    }).setView(this.center, this.defaultZoom, {
      duration: 10
    })
    .invalidateSize({
      animate: true,
      pan: false,
      debounceMoveend: true
    })
  }

  addTiles() {
    L.tileLayer(this.tiles, {
      // options
      attribution: this.attribution
    }).addTo(this.map)
  }

  getCoordinates() {
    let lat = $('#' + this.el).data('lat')
    let long = $('#' + this.el).data('long')
    return [lat, long]
  }

  getData() {
    $.getJSON(this.data, json => {
      L.geoJson(json, {
        // Change the style here as desired
        pointToLayer: (feature, latlng) => {
          return L.circleMarker(latlng, {
            radius: 8,
            fillColor: '#333',
            color: '#000',
            weight: 1,
            opacity:...