geografa/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Create markers from HTML</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<style>
.count-icon {
  background:#ff8888;
  border:5px solid rgba(255,255,255,0.5);
  color:#fff;
  font-weight:bold;
  text-align:center;
  border-radius:50%;
  line-height:30px;
  }
  .count-icon:hover {
    background:#bbb;
    }
  /* Show popups on hover so hide the close link */
  .leaflet-popup-close-button { display:none; }
</style>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZmFsbHNlbW8yIiwiYSI6IjhsbHFBMkEifQ.OMXud5BW3OAF-_usSJjy0Q';
var map = L.mapbox.map('map', 'examples.map-i86nkdio');
var geojson = [
  {
      "type": "Feature",
      "properties": {
        "title": "Toronto",
        "num": 1
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -79.39712047576904,
          43.62669447164394
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Chicago",
        "num": 2
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -87.63072967529297,
          41.874673839758
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Victoria",
        "num": 3
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -123.37234497070311,
          48.45106561953216
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Qualicum Beach",
        "num": 4
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -124.44419860839844,
          49.34883548204658
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "title": "Tofino",
        "num": 5
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -125.8985137939453,
          49.12691530777389
        ]
      }
    }
];

var locations = L.mapbox.featureLayer().addTo(map);
    // Add the data above to the featureLayer.
    locations.setGeoJSON(geojson);

    // Add each point as a divIcon and bind a popup to it.
    locations.eachLayer(function(l) {
        var props = l.feature.properties;
        var m = L.divIcon({
            className: 'count-icon',
            iconSize: [40,40],
            html: props.num,
            popupAnchor: [0, -10]
        });

        l.setIcon(m);
        l.bindPopup(props.title);
    });

    // Optionally show tooltips on hover
    locations.on('mouseover', function(e) {
        e.layer.openPopup();
    });
    locations.on('mouseout', function(e) {
        e.layer.closePopup();
    });

    // Set map coordinates to capture all markers in view.
    map.fitBounds(locations.getBounds());
</script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Create markers from HTML</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<style>
	.count-icon {
	background:#ff8888;
	border:5px solid rgba(255,255,255,0.5);
	color:#fff;
	font-weight:bold;
	text-align:center;
	border-radius:50%;
	line-height:30px;
	}
	.count-icon:hover {
	background:#bbb;
	}
	/* Show popups on hover so hide the close link */
	.leaflet-popup-close-button { display:none; }
	</style>
	<div id='map'></div>
	<script>
	L.mapbox.accessToken = 'pk.eyJ1IjoiZmFsbHNlbW8yIiwiYSI6IjhsbHFBMkEifQ.OMXud5BW3OAF-_usSJjy0Q';
	var map = L.mapbox.map('map', 'examples.map-i86nkdio');
	var geojson = [
	{
	"type": "Feature",
	"properties": {
	"title": "Toronto",
	"num": 1
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	-79.39712047576904,
	43.62669447164394
	]
	}
	},
	{
	"type": "Feature",
	"properties": {
	"title": "Chicago",
	"num": 2
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	-87.63072967529297,
	41.874673839758
	]
	}
	},
	{
	"type": "Feature",
	"properties": {
	"title": "Victoria",
	"num": 3
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	-123.37234497070311,
	48.45106561953216
	]
	}
	},
	{
	"type": "Feature",
	"properties": {
	"title": "Qualicum Beach",
	"num": 4
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	-124.44419860839844,
	49.34883548204658
	]
	}
	},
	{
	"type": "Feature",
	"properties": {
	"title": "Tofino",
	"num": 5
	},
	"geometry": {
	"type": "Point",
	"coordinates": [
	-125.8985137939453,
	49.12691530777389
	]
	}
	}
	];

	var locations = L.mapbox.featureLayer().addTo(map);
	// Add the data above to the featureLayer.
	locations.setGeoJSON(geojson);

	// Add each point as a divIcon and bind a popup to it.
	locations.eachLayer(function(l) {
	var props = l.feature.properties;
	var m = L.divIcon({
	className: 'count-icon',
	iconSize: [40,40],
	html: props.num,
	popupAnchor: [0, -10]
	});

	l.setIcon(m);
	l.bindPopup(props.title);
	});

	// Optionally show tooltips on hover
	locations.on('mouseover', function(e) {
	e.layer.openPopup();
	});
	locations.on('mouseout', function(e) {
	e.layer.closePopup();
	});

	// Set map coordinates to capture all markers in view.
	map.fitBounds(locations.getBounds());
	</script>


	</body>
	</html>