JSFiddle - React, Tailwind, and code Playground

by Pavlos Tsagkis

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
<script src="https://www.intermezzo-coop.eu/mapping/geostats/lib/geostats.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.6.5/ol-debug.css">
<select id="methodselector" class="form-control">
  <option value="method_EI" >Equal Interval</option>
  <option value="method_Q" selected>Quantile</option>
  <option value="method_SD" >Standard Deviation</option>
  <option value="method_AP" >Arithmetic Progression</option>
  <option value="method_GP" >Geometric Progression</option>
  <option value="method_CJ">Class Jenks</option>                  
</select>
Number of Classes:
<input type="number" id="classcount" min="1" value="5" max="10">
<input type="button" id="drawitbtn"  value='draw thematic'/>

<div id="map" class="map"></div>

<div id='legend'></div>

CSS

.geostats-legend div {
      margin: 3px 10px 5px 10px
    }
    
    .geostats-legend-title {
      font-weight: bold;
      margin-bottom: 4px;
    }
    
    .geostats-legend-block {
      border: 1px solid #555555;
      display: block;
      float: left;
      height: 12px;
      margin: 0 5px 0 20px;
      width: 20px;
    }
    
    .geostats-legend-counter {
      font-size: 0.8em;
      color: #666;
      font-style: italic;
}

JavaScript

$('#drawitbtn').click(drawIt);

//some global vars here
var classSeries;
var classColors;
//color start from
var colorFrom ='FFFFFF';
//color end to
var colorTo = '1A8B16';
var defaultStyle = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.3)'
  }),
  stroke: new ol.style.Stroke({
    color: 'rgba(0, 255, 0, 1)',
    width: 1
  }),
  text: new ol.style.Text({
    font: '12px Calibri,sans-serif',
    fill: new ol.style.Fill({
      color: '#000'
    }),
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
    })
  })
});


//our methods here

var vectorLayer = new ol.layer.Vector({
  style:defaultStyle,
  source: new ol.source.Vector({
    url: 'https://gist.githubusercontent.com/ptsagkis/dacbe5a42856dee041294b54579095d4/raw/730879d0d4909622b273818235b9c7f510bab5ee/countries_siplified.geojson',
   format: new ol.format.GeoJSON({
              defaultDataProjection:'EPSG:4326',
              featureProjection:'EPSG:3857'
            })
  })
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});



/**
 * do the themmatic
 */
function drawIt(){
var countryPopVals = new Array();
vectorLayer.getSource().getFeatures().forEach(function(feat) {
countryPopVals.push(feat.get("POP2005"))
});
console.info("countryPopVals",countryPopVals);
getAndSetClassesFromData(countryPopVals, getClassNum(), getMethod());
vectorLayer.setStyle(setStyle);
}


/**
 * get the array of numbers (these are the pop data for all countries)
 * get the classification method
 * get the number of classes
 * 
 *
 * set geostats object
 * set the series
 * set the colors ramp        
 * 
 */
function getAndSetClassesFromData(data, numclasses, method) {
  var serie = new geostats(data);
  var legenLabel = ""; 
  if (method === "method_EI") {
    serie.getClassEqInterval(numclasses);
    methodLabel =...