PostCSS and CSSNext

Custom selectors and properties

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">
<div class="cont">
  <div id="image-wrap">
    <div id="photo"></div>
  </div>
</div>

SCSS

#image-wrap {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  width: 100%;
}

.cont {
  margin: 0 auto;
  display: flex;
  max-width: 700px;
  width: 100%;
}

#photo {
  width: 100%;
  height: 500px;
  background-color: transparent;
  cursor: auto;
}

.leaflet-control-attribution {
 display: none;
}

Babel + JSX

/*
 * L.TileLayer.Zoomify display Zoomify tiles with Leaflet
 */

L.TileLayer.Zoomify = L.TileLayer.extend({
  options: {
    continuousWorld: true,
    tolerance: 0.8
  },

  initialize: function(url, options) {
    options = L.setOptions(this, options);
    this._url = url;

    var imageSize = L.point(options.width, options.height),
      tileSize = options.tileSize;

    this._imageSize = [imageSize];
    this._gridSize = [this._getGridSize(imageSize)];

    while (parseInt(imageSize.x) > tileSize || parseInt(imageSize.y) > tileSize) {
      imageSize = imageSize.divideBy(2).floor();
      this._imageSize.push(imageSize);
      this._gridSize.push(this._getGridSize(imageSize));
    }

    this._imageSize.reverse();
    this._gridSize.reverse();

    this.options.maxZoom = this._gridSize.length - 1;
  },

  onAdd: function(map) {
    L.TileLayer.prototype.onAdd.call(this, map);

    var mapSize = map.getSize(),
      zoom = this._getBestFitZoom(mapSize),
      imageSize = this._imageSize[zoom],
      center = map.options.crs.pointToLatLng(L.point(imageSize.x / 2, imageSize.y / 2), zoom);

    map.setView(center, zoom, true);
  },

  _getGridSize: function(imageSize) {
    var tileSize = this.options.tileSize;
    return L.point(Math.ceil(imageSize.x / tileSize), Math.ceil(imageSize.y / tileSize));
  },

  _getBestFitZoom: function(mapSize) {
    var tolerance = this.options.tolerance,
      zoom = this._imageSize.length - 1,
      imageSize, zoom;

    while (zoom) {
      imageSize = this._imageSize[zoom];
      if (imageSize.x * tolerance < mapSize.x && imageSize.y * tolerance < mapSize.y) {
        return zoom;
      }
      zoom--;
    }

    return zoom;
  },

  _tileShouldBeLoaded: function(tilePoint) {
    var gridSize = this._gridSize[this._map.getZoom()];
    return (tilePoint.x >= 0 && tilePoint.x < gridSize.x && tilePoint.y >= 0 && tilePoint.y < gridSize.y);
  },

  _addTile: function(tilePoint, container) {
    var tilePos =...