Market Coverage Map

by Sarah Godoshian

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css">
<div id="map">

</div>

CSS

#map {
  height: 75vh;
  width: 75vw;
}

.marker {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background-color: #559b43 !important;
  /*border: 2px solid #194123;*/
  height: 10px;
  width: 10px;
}

JavaScript

const markets = [
	{
    market: "Atlanta",
    latitude: 33.79988400,
    longitude: -84.38580000,
  },
  {
    market: "Charlotte",
    latitude: 35.22633180,
    longitude: -80.84309000,
  },
  {
    market: "Chicago",
    latitude: 41.87493020,
    longitude: -87.65159620,
  },
  {
    market: "Cincinnati",
    latitude: 39.14878290,
    longitude: -84.52030910,
  },
  {
    market: "Columbus",
    latitude: 39.98656410,
    longitude: -83.04319770,
  },
  {
    market: "Dallas",
    latitude: 32.92576500,
    longitude: -97.07154490,
  },
  {
    market: "Denver",
    latitude: 39.73483600,
    longitude: -105.02039540,
  },
  {
    market: "Fort Lauderdale",
    latitude: 26.18258900,
    longitude: -80.13357850,
  },
  {
  	market: "Greensboro/Winston-Salem",
    latitude:	36.044659,
    longitude: -79.766235,
  },
  {
    market: "Houston",
    latitude: 29.75414970,
    longitude: -95.40949820,
  },
  {
    market: "Indianapolis",
    latitude: 39.78410210,
    longitude: -86.16347700,
  },
  {
    market: "Inland Empire",
    latitude: 34.00326640,
    longitude: -117.44200390,
  },
  {
    market: "Jacksonville",
    latitude: 30.31701440,
    longitude: -81.68081060,
  },
  {
    market: "Las Vegas",
    latitude: 36.15138250,
    longitude: -115.10864800,
  },
  {
    market: "Los Angeles",
    latitude: 34.00709000,
    longitude: -118.25860000,
  },
  {
    market: "Memphis",
    latitude: 35.10206000,
    longitude: -90.04686800,
  },
  {
    market: "Miami",
    latitude: 25.81317540,
    longitude: -80.20580000,
  },
  {
    market: "Nashville",
    latitude: 35.99928820,
    longitude: -86.78506250,
  },
  {
    market: "Oakland-East Bay",
    latitude: 37.77544700,
    longitude: -122.21870490,
  },
  {
    market: "Orlando",
    latitude: 28.48492330,
    longitude: -81.61930500,
  },
  {
    market: "Palm Beach",
    latitude: 26.71919600,
    longitude: -80.12450740,
  },
  {
    market: "Phoenix",
    latitude: 33.44761420,
    longitude:...