JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="map"></div>

CSS

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

/* sample matrix transform on the building layer */
.building {
  transform: scale(.163, .163) rotate(28.65deg) translate(479px, 0px)
}

JavaScript

// create the map object itself
centerCoordinates = new L.LatLng(41.307, -72.928);

var map = new L.Map("map", {
  center: centerCoordinates,
  zoom: 14,
  zoomControl: false
});

// position the zoom controls in the bottom right hand corner
L.control.zoom({
  position: 'bottomright',
  zoom: 14,
  maxZoom: 20,
  minZoom: 12,
}).addTo(map);

map.addLayer(new L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
  subdomains: 'abcd',
  maxZoom: 19
}));

// specify the coordinates of the overlay's bounding box
var upperLeft = L.latLng(41.329785, -72.927220);
var lowerLeft = L.latLng(41.304414, -72.945686);
var upperRight = L.latLng(41.319186, -72.903268);
var lowerRight = L.latLng(41.293816, -72.921718);

// create a red polyline from an array of LatLng points
var polyline = L.polyline(
  [upperLeft, upperRight, lowerRight, lowerLeft, upperLeft], {
    color: 'red',
    className: 'overlay-bounding-box',
    weight: 2
  }
).addTo(map);

d3.json("https://s3-us-west-2.amazonaws.com/gathering-a-building/projected_buildings.json",
  function(rawJson) {
  
  	// each member of this array describes a building
  	for (var i=0; i<rawJson.length; i++) {
   
   		var buildingPoints = rawJson[i];
   
   		// initialize an empty array of L.latLng elements
      var latLngArray = [];
   
   		// each member of this array describes a set of points
      for (var j=0; j<buildingPoints.length; j++) {
      
      	var buildingPoint = rawJson[i][j];
      
      	// j is an array with index 0 = x position
        // and index 1 = y position of a projected point
        var xPosition = buildingPoint[0];
        var yPosition = buildingPoint[1];
        var latLngPoint = L.latLng(xPosition, yPosition);
      	latLngArray.push(latLngPoint);
      }
      
      // to close the loop, we must add the first point to...