pral2a/fablabs-map.html

## fablabs-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>FabLabs in the World</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />


<div id='map'></div>

<script>


L.mapbox.accessToken = 'pk.eyJ1IjoidG9tYXNkaWV6IiwiYSI6ImNpaWcyMHU0bjAwM2x2emt1cG5iMzE3bXIifQ.wWNloP12TwdfeKyLHaXpSA';

var map = L.mapbox.map('map', 'mapbox.streets', { zoomControl: false, loadingControl: true })
    .setView([0, 0], 2);

var fablabs = new L.MarkerClusterGroup();

$.getJSON( "https://api.fablabs.io/v0/labs.json", function( data ) {
    data.labs.forEach(makeFabLab);
    map.fitBounds(fablabs);
    map.addLayer(fablabs);
});

var fablabIcon = L.icon({
    iconAnchor: [25, 25],
    popupAnchor: [0, -25],
    iconSize:[35, 35],
    className: "dot",
    iconUrl: 'https://www.fablabs.io/assets/map-icons/mini_fab_lab-0c359da97496f8c86e90faccd3a7cbe4.png'
});

function makeFabLab(lab) {
    if (!lab.name || !lab.latitude || !lab.longitude) return;
    var fablab = L.marker(new L.LatLng(lab.latitude, lab.longitude), {
        icon: fablabIcon,
        title: lab.name
    });
    fablab.bindPopup('<a href="'+lab.url+'">'+lab.name+'</a>');
    fablabs.addLayer(fablab);
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>FabLabs in the World</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
	<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>
	<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
	<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
	<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />


	<div id='map'></div>

	<script>


	L.mapbox.accessToken = 'pk.eyJ1IjoidG9tYXNkaWV6IiwiYSI6ImNpaWcyMHU0bjAwM2x2emt1cG5iMzE3bXIifQ.wWNloP12TwdfeKyLHaXpSA';

	var map = L.mapbox.map('map', 'mapbox.streets', { zoomControl: false, loadingControl: true })
	.setView([0, 0], 2);

	var fablabs = new L.MarkerClusterGroup();

	$.getJSON( "https://api.fablabs.io/v0/labs.json", function( data ) {
	data.labs.forEach(makeFabLab);
	map.fitBounds(fablabs);
	map.addLayer(fablabs);
	});

	var fablabIcon = L.icon({
	iconAnchor: [25, 25],
	popupAnchor: [0, -25],
	iconSize:[35, 35],
	className: "dot",
	iconUrl: 'https://www.fablabs.io/assets/map-icons/mini_fab_lab-0c359da97496f8c86e90faccd3a7cbe4.png'
	});

	function makeFabLab(lab) {
	if (!lab.name \|\| !lab.latitude \|\| !lab.longitude) return;
	var fablab = L.marker(new L.LatLng(lab.latitude, lab.longitude), {
	icon: fablabIcon,
	title: lab.name
	});
	fablab.bindPopup('<a href="'+lab.url+'">'+lab.name+'</a>');
	fablabs.addLayer(fablab);
	}

	</script>
	</body>
	</html>