index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>turfjs census dotmap</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0;}
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>
<div id='map'></div>
<script>
geoId = '15000US080470138003';
$.getJSON('https://api.censusreporter.org/1.0/geo/tiger2013/' + geoId + '?geom=true', function(data) {
var block = JSON.parse(JSON.stringify(data));
L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
var map = L.mapbox.map('map', 'faraday2.5905fe9b')
.fitBounds(L.geoJson(block).getBounds());
var polyStyle = {
color: "#351f72",
weight: 2,
fillOpacity: 0,
opacity: 0.8
};
var blockFeature = L.geoJson(block, {
style: polyStyle
});
blockFeature.addTo(map);
var blockBox = [blockFeature.getBounds()._southWest.lng,blockFeature.getBounds()._southWest.lat,blockFeature.getBounds()._northEast.lng,blockFeature.getBounds()._northEast.lat];
var markerStyle = {
radius: 1.4,
fillColor: "#634ea0",
color: "#000",
weight: 0,
opacity: 0,
fillOpacity: 0.7
};
var randomCount = block.properties.population;
for (var i = 0; i < randomCount; i++) {
var point = turf.random('points', 1, {
bbox: blockBox
});
if (turf.inside(point.features[0], block) == false ) {
i = i - 1;
continue;
}
L.geoJson(point, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, markerStyle);
}
}).addTo(map);
}
});
</script>
</body>
</html>