JSFiddle - React, Tailwind, and code Playground

by sabof

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js"></script>
<script src="http://www.amwebit.co.uk/maptest/json/country-json.js"></script>
	
<div id="map"></div>

CSS

#map { height: 1000px }

JavaScript

var colourCountries = ["United States of America","Brazil"];

var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/alexplummer.him2149i/{z}/{x}/{y}.png');

var map = L.map('map')
      .addLayer(mapboxTiles)
      .setView([30, 0], 3);

function style(feature) {
  for (var i=0; i < colourCountries.length; i++) {
    if (colourCountries[i] == feature.properties.name) {
      return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.3,
        fillColor: '#ff0000'
      };
    }
  }
  {
    return {
      weight: 1,
      opacity: 1,
      color: '#32B3EF',
      fillOpacity: 1,
      fillColor: '#F3F4E8'
    };
  }
}       

var geojson, thisCountry;

function onEachFeature(feature, layer) {}

geojson = L.geoJson(countryData, {
  onEachFeature: onEachFeature,
  style: style
}).addTo(map);