JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://dl.dropboxusercontent.com/s/e6gge16nws1kuxl/LA.js"></script>
<script src="https://dl.dropboxusercontent.com/s/2rydcsgw5wei3cc/data.js"></script>

<div class="container" data-html="true">
  <div class="row">
      <div id = "mapid" class="col-sm-8"><p></p></div>
  </div>
  <div class="row">
      <div class="col-sm-8">
      <table>
        <tr>
        <th>Neighborhood</th>
        </tr>
        <tr onmouseover="highlight(santamonica)" onmouseout="reset(santamonica)">
        <td>Santa Monica</td>
        </tr>
      </table>
      </div>
  </div>
</div>

CSS

#mapid { 
height: 600px;
width: "100%";
position: relative;
}

JavaScript

var mymap = L.map('mapid').setView([34, -118.5], 11);
L.tileLayer('https://api.mapbox.com/styles/v1/mtheisen/citei76iz005f2jpac8g7ilcl/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibXRoZWlzZW4iLCJhIjoiY2l0ZWk0NTBoMDVmMDJ0bXlyNmxzZ3RnMyJ9.fErHtcHVcTsHCLMPN1ZcQg', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18,
    id: 'mtheisen',
    accessToken: 'pk.eyJ1IjoibXRoZWlzZW4iLCJhIjoiY2l0ZWk0NTBoMDVmMDJ0bXlyNmxzZ3RnMyJ9.fErHtcHVcTsHCLMPN1ZcQg'
}).addTo(mymap);
var geojson;

geojson=L.geoJson(neighbData, {style: style,
  onEachFeature: onEachFeature
  }).addTo(mymap);


var highlightStyle = {
        weight: 5,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    }

var normalStyle = {
        weight: 2,
        opacity: 1,
        color: 'gray',
        fillOpacity: 0.25
}

 function highlightFeature(e) {
    var layer = e.target;
    layer.setStyle(highlightStyle);
}

function resetHighlight(e) {
    geojson.resetStyle(e.target);
}

function style(feature) {
    return {
        fillColor: 'green',
        weight: 2,
        opacity: 1,
        color: 'gray',
        fillOpacity: 0.25
    };
}

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
    });
}

var santamonica = "santa-monica"

var layarr = {}
for (i=0;i<neighborder.length;i++) {
  for (var prop in geojson['_layers']) {
    if (!geojson['_layers'].hasOwnProperty(prop)) {
        continue;
    }
    if (geojson['_layers'][prop]["feature"]["properties"]["name"]==neighborder[i]) {
      layarr[neighborder[i]] = geojson['_layers'][prop]
    }
  }
}

function highlight(name) {
  var laytouse = layarr[name]
  laytouse.setStyle(highlightStyle)
}

function reset(name) {
  var laytouse = layarr[name]
 ...