JSFiddle - React, Tailwind, and code Playground

by shriek

HTML

<script src="https://npmcdn.com/[email protected]"></script>
<script src="https://npmcdn.com/[email protected]"></script>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css">
<div id="map">
</div>

CSS

#map {
  width: 400px;
  height: 500px;
}
svg {
  border: 1px solid red;
  width:400px;
  height:500px;
}

Babel + JSX

var data = {
  "results": [{
    "geometry": {
      "location": {
        "lat": -33.86755700000001,
        "lng": 151.201527
      }
    }
  }, {
    "geometry": {
      "location": {
        "lat": -33.867591,
        "lng": 151.201196
      }
    }
  }, {
    "geometry": {
      "location": {
        "lat": -33.8686058,
        "lng": 151.2018207
      }
    }
  }, {
    "geometry": {
      "location": {
        "lat": -33.867551,
        "lng": 151.200817
      }
    }
  }, {
    "geometry": {
      "location": {
        "lat": -33.86724419999999,
        "lng": 151.2017012
      }
    }
  }]
};
var latArr = data.results.map(function(d){
	return d.geometry.location.lat;
});
var lonArr = data.results.map(function(d){
	return d.geometry.location.lng;
});

var topBnd = d3.max(latArr);
var bottomBnd = d3.min(latArr);
var leftBnd = d3.min(lonArr);
var rightBnd = d3.max(lonArr);
var map = L.map('map', {
	zoomControl: false
}).setView([-33.86755700000001, 151.201527], 11);
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
	attribution: 'leafshit'
}).addTo(map);
var svg = d3.select(map.getPanes().overlayPane).append('svg');
var g = svg.append('g').attr('class', 'leaflet-zoom-hide');
var markers = g.selectAll('circle')
							 .data(data.results)
               .enter()
               .append('circle')
               .attr('r', 20)
               .style('fill', 'red');
function latLngToLayer(d){
	return map.latLngToLayerPoint(new L.LatLng(d.geometry.location.lat, d.geometry.location.lng));
}
function project(x) {
    var point = map.latLngToLayerPoint(x);
    return [point.x, point.y];
}
function reset(){
/*	console.log('resetingg..');
  var bottomLeft = project([leftBnd, bottomBnd]);
  var topRight = project([rightBnd, topBnd]);
  console.log("bottomLeft " + bottomLeft);
  console.log("topRight " + topRight);
  */
  var bounds = map.getBounds();
  var topLeftX = project(bounds.getNorthWest())[0];
  var topLeftY = project(bounds.getNorthWest())[1];
  var...