JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
    <div id="map">
    </div>
    <div class="info">
      <div id="sliders">
        <fieldset>
          <legend>basemap transparency</legend>
          <div id="sliderBasemap"></div>
        </fieldset>
        <fieldset>
          <legend>demographic color</legend>
          <div>
            <label>red</label> <div id="sliderR" class="slider"></div>
            <label>green</label> <div id="sliderG" class="slider"></div>
            <label>blue</label> <div id="sliderB" class="slider"></div>
            <label>transparency</label> <div id="sliderA" class="slider"></div>
          </div>
        </fieldset>
      </div>
      <h1>Voting Districts by %</h1>
      <div id="demographic">
        <input type="radio" id="optWhite" name="demographic" value="1" checked /><label for="optWhite">White</label>
        <input type="radio" id="optBlack" name="demographic" value="2" /><label for="optBlack">Black</label>
        <input type="radio" id="optAsian" name="demographic" value="3" /><label for="optAsian">Asian</label>
        <input type="radio" id="optHispanic" name="demographic" value="4" /><label for="optHispanic">Hispanic</label>
      </div>
      <h2 data-text="Name"></h2>
      <div data-html="Description" style="display: none;">
      </div>
    </div>

CSS

html
{
  font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
}

.info 
{
  background: #fff;
  border-radius: 8px;
  box-shadow: -4px 4px #444;
  opacity: .8;
  padding: 8px;
  width: 95%;
}

    #map
    {
      background: #fff;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }

    #sliders
    {
      margin-top: 32px;
    }
    .slider
    {
      margin: 8px;
    }

    h1, #demographic { display: inline-block; }

    td:first-child { font-weight: bold }

JavaScript

// create a map
      var data, // GeoJSON data of voting districts
          selection, // reference to current selection highlight
          map = $( "#map" ).geomap( {
            center: [ -71.0595678, 42.3604823 ],
            zoom: 8,
            click: function( e, geo ) {
              // remove any previous selection graphic
              if ( selection ) {
                map.geomap( "remove", selection );
              }

              // find a voting district at the clicked location
              var district = map.geomap( "find", geo, 1 );

              if ( district.length > 0 ) {
                // make a copy of the feature for selection highlight
                selection = $.extend( true, { }, district[ 0 ] );

                // display some info about the voting district
                $( "[data-text='Name']" ).text( selection.properties.Name );
                var $descTable = $( selection.properties.Description );
                $descTable.find( "tr:eq(5)" ).remove( );
                $descTable.find( "tr:eq(4) td:first-child" ).text( "Hispanic Origin" );
                $( "[data-html='Description']" ).empty().append( $descTable ).show();

                // set the map's bbox to the bbox of the feature
                // but scale the bbox by 2x first to zoom out a little
                map.geomap( "option", "bbox", $.geo.scaleBy( $.geo.bbox( selection ), 2 ) );

                // append the selection highlight shape with a thick red border
                map.geomap( "append", selection, { opacity: 1, fillOpacity: 0, color: "red", strokeWidth: "4px" } );
              }
            }
          } );

      // set an initial shapeStyle for the demographic display, all white, no border
      map.geomap( "option", "shapeStyle", { strokeWidth: "0px", opacity: 1, color: "#fff" } );

      // jQuery UI for pretty sliders

      $( "#sliderBasemap" ).slider( {
        value: 100,
        slide: function ( e, ui ) {
          // when the...