Old school D3 from simpler times

All examples By author By category About

nokiko

Full window Github gist

Leaflet.js Tips, Step 7 (filter buttons)

forked from zross's block: Leaflet.js Tips, Step 7 (filter buttons)

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

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>

<style type="text/css">
    #map {
        width: 600px;
        height: 400px;
    }
    /* This is new */
    
    button {
        width: 100px;
    }
    </style>
</head>

<body>
    
    <div class="btn-group">
        <button type="button" id="allbus" class="btn btn-success">All</button>
        <button type="button" id="others" class="btn btn-primary">Others</button>
        <button type="button" id="cafes" class="btn btn-danger">Cafes</button>
    </div>

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

<script type="text/javascript">
    var mapboxTiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '<a href="https://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
    });
    //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.bindPopup(feature.properties.Name).openPopup();
                });
            }
        });
        var others = L.geoJson(data, {
            filter: function(feature, layer) {
                return feature.properties.BusType != "Cafe";
            },
            pointToLayer: function(feature, latlng) {
                return L.marker(latlng, {
                }).on('mouseover', function() {
                    this.bindPopup(feature.properties.Name).openPopup();
                });
            }
        });
        map.fitBounds(allbusinesses.getBounds(), {
            padding: [50, 50]
        });
        cafes.addTo(map)
        others.addTo(map)
        // The JavaScript below is new
        $("#others").click(function() {
            map.addLayer(others)
            map.removeLayer(cafes)
        });
        $("#cafes").click(function() {
            map.addLayer(cafes)
            map.removeLayer(others)
        });
        $("#allbus").click(function() {
            map.addLayer(cafes)
            map.addLayer(others)
        });
    });
    </script>
</body>

</html>

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

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js to https://cdnjs.cloudflare.com/ajax/libs/leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js

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

https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js