Basic map with Leaflet.js and OpenStreetMap

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Here data is provided by OpenStreetMap

by rcravens

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://leafletjs.com/examples/choropleth/us-states.js"></script>
<div id="map"></div>

CSS

#map {
  height: 500px;
}

.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}

.legend {
    line-height: 18px;
    color: #555;
}
.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

JavaScript

// City Data
//
var city_data = [
  {
    "city": "New York", 
    "growth_from_2000_to_2013": "4.8%", 
    "latitude": 40.7127837, 
    "longitude": -74.0059413, 
    "population": "8405837", 
    "rank": "1", 
    "state": "New York"
  }, 
  {
    "city": "Los Angeles", 
    "growth_from_2000_to_2013": "4.8%", 
    "latitude": 34.0522342, 
    "longitude": -118.2436849, 
    "population": "3884307", 
    "rank": "2", 
    "state": "California"
  }, 
  {
    "city": "Chicago", 
    "growth_from_2000_to_2013": "-6.1%", 
    "latitude": 41.8781136, 
    "longitude": -87.6297982, 
    "population": "2718782", 
    "rank": "3", 
    "state": "Illinois"
  }, 
  {
    "city": "Houston", 
    "growth_from_2000_to_2013": "11.0%", 
    "latitude": 29.7604267, 
    "longitude": -95.3698028, 
    "population": "2195914", 
    "rank": "4", 
    "state": "Texas"
  }, 
  {
    "city": "Philadelphia", 
    "growth_from_2000_to_2013": "2.6%", 
    "latitude": 39.9525839, 
    "longitude": -75.1652215, 
    "population": "1553165", 
    "rank": "5", 
    "state": "Pennsylvania"
  }, 
  {
    "city": "Phoenix", 
    "growth_from_2000_to_2013": "14.0%", 
    "latitude": 33.4483771, 
    "longitude": -112.0740373, 
    "population": "1513367", 
    "rank": "6", 
    "state": "Arizona"
  }, 
  {
    "city": "San Antonio", 
    "growth_from_2000_to_2013": "21.0%", 
    "latitude": 29.4241219, 
    "longitude": -98.49362819999999, 
    "population": "1409019", 
    "rank": "7", 
    "state": "Texas"
  }, 
  {
    "city": "San Diego", 
    "growth_from_2000_to_2013": "10.5%", 
    "latitude": 32.715738, 
    "longitude": -117.1610838, 
    "population": "1355896", 
    "rank": "8", 
    "state": "California"
  }, 
  {
    "city": "Dallas", 
    "growth_from_2000_to_2013": "5.6%", 
    "latitude": 32.7766642, 
    "longitude": -96.79698789999999, 
    "population": "1257676", 
    "rank": "9", 
    "state": "Texas"
  }, 
  {
    "city": "San Jose", 
    "growth_from_2000_to_2013":...