Leaflet.js Tips, Step 6 (add hovers)

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

</style>
</head>

<body>

//possible colors 'red', 'darkred', 'orange', 'green', 'darkgreen', 'blue', 'purple', 'darkpuple', 'cadetblue'
    var cafeIcon = L.AwesomeMarkers.icon({
        prefix: 'fa', //font awesome rather than bootstrap
        markerColor: 'red', // see colors above
        icon: 'coffee' //https://fortawesome.github.io/Font-Awesome/icons/
    });

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);

var cafes = L.geoJson(data, {
            filter: function(feature, layer) {
                return feature.properties.BusType == "Cafe";
            },
            pointToLayer: function(feature, latlng) {
                return L.marker(latlng, {
                    icon: cafeIcon

}).on('mouseover', function() {//this is new
                    this.bindPopup(feature.properties.Name).openPopup();
                });
            }
        });

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

cafes.addTo(map)
        others.addTo(map)

});
    </script>
</body>

</html>

Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url

https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js

https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js

https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js