JSFiddle - React, Tailwind, and code Playground

by social_quotient

HTML

<form>
<h2>
  Input data
</h2>
Points :
<input type="textarea" name="inputPoints" id="inputPoints"><br />
Width :
<input type="text" name="width" id="width"><br />
Height :
<input type="text" name="height" id="height"><br />
<input type="button" name="compute" id="compute" value="compute" onclick="javascript:computeData();">

<h2>
Output data
</h2>
Mid point : 
<input type="text" name="midpoint" id="midpoint"><br />
Zoom :
<input type="text" name="zoom" id="zoom">
</form>

JavaScript

function getBoundsZoomLevel(minlat, maxlat, minlong, maxlong, width, height) {
    var WORLD_DIM = { height: 256, width: 256 };
    var ZOOM_MAX = 21;

    function latRad(lat) {
        var sin = Math.sin(lat * Math.PI / 180.0);
        var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
        return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
    }

    function zoom(mapPx, worldPx, fraction) {
        return Math.floor(Math.log(Math.abs(mapPx / worldPx / fraction)) / Math.LN2);
    }

    var latFraction = (latRad(maxlat) - latRad(minlat)) / Math.PI;

    var lngDiff = maxlong - minlong;
    var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
    var latZoom = zoom(height, WORLD_DIM.height, latFraction);
    var lngZoom = zoom(width, WORLD_DIM.width, lngFraction);
    return Math.min(latZoom, lngZoom, ZOOM_MAX);
}

function computeData() {
		var json = document.getElementById("inputPoints").value;
    var result = JSON.parse(json);
    var init = true;
    var latmin = 0;
    var latmax = 0;
    var longmin = 0;
    var longmax = 0;
    if (result && $.isArray(result)) {
      for (var i = 0; i < result.length; i++) {
        if (init || result[i][0] < longmin)
        	longmin = result[i][0];
        if (init || result[i][0] > longmax)
        	longmax = result[i][0];
        if (init || result[i][1] < latmin)
        	latmin = result[i][1];
        if (init || result[i][1] > latmax)
        	latmax = result[i][1];        
        init = false;
      }
      document.getElementById("midpoint").value = "[" + (longmin+longmax) / 2.0 + "," + (latmin + latmax) / 2.0 + "]";
      var dataWidth = document.getElementById("width").value;
      var dataHeight = document.getElementById("height").value;
      
      document.getElementById("zoom").value = getBoundsZoomLevel(latmin, latmax, longmin, longmax, dataWidth,dataHeight);

    }


}