zross/businesses.json

## businesses.json

      
                Raw

        
              businesses.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
    #map {
        width: 600px;
        height: 400px;
    }
    </style>
</head>

<body>
    <div id="map"></div>

    <script type="text/javascript">
    var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
        attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
    });


    var map = L.map('map')
        .addLayer(mapboxTiles)
        .setView([42.444508, -76.499491], 12);


    var promise = $.getJSON("businesses.json");
    promise.then(function(data) {


        var allbusinesses = L.geoJson(data);

        // THIS IS NEW
        var cafes = L.geoJson(data, {
            filter: function(feature, layer) {
                return feature.properties.BusType == "Cafe";
            }
        });

        var others = L.geoJson(data, {
            filter: function(feature, layer) {
                return feature.properties.BusType != "Cafe";
            }
        });

        map.fitBounds(allbusinesses.getBounds(), {
            padding: [50, 50]
        });

        // THIS IS NEW
        cafes.addTo(map)
        others.addTo(map)
    });
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<style type="text/css">
	#map {
	width: 600px;
	height: 400px;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>

	<script type="text/javascript">
	var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
	attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms & Feedback</a>'
	});


	var map = L.map('map')
	.addLayer(mapboxTiles)
	.setView([42.444508, -76.499491], 12);


	var promise = $.getJSON("businesses.json");
	promise.then(function(data) {


	var allbusinesses = L.geoJson(data);

	// THIS IS NEW
	var cafes = L.geoJson(data, {
	filter: function(feature, layer) {
	return feature.properties.BusType == "Cafe";
	}
	});

	var others = L.geoJson(data, {
	filter: function(feature, layer) {
	return feature.properties.BusType != "Cafe";
	}
	});

	map.fitBounds(allbusinesses.getBounds(), {
	padding: [50, 50]
	});

	// THIS IS NEW
	cafes.addTo(map)
	others.addTo(map)
	});
	</script>
	</body>

	</html>