<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Filter symbols by toggling a list</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.filter-group {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-weight: 600;
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
border-radius: 3px;
width: 120px;
color: #fff;
}
.filter-group input[type=checkbox]:first-child + label {
border-radius: 3px 3px 0 0;
}
.filter-group label:last-child {
border-radius: 0 0 3px 3px;
border: none;
}
.filter-group input[type=checkbox] {
display: none;
}
.filter-group input[type=checkbox] + label {
background-color: #3386c0;
display: block;
cursor: pointer;
padding: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.filter-group input[type=checkbox] + label {
background-color: #3386c0;
text-transform: capitalize;
}
.filter-group input[type=checkbox] + label:hover,
.filter-group input[type=checkbox]:checked + label {
background-color: #4ea0da;
}
.filter-group input[type=checkbox]:checked + label:before {
content: '✔';
margin-right: 5px;
}
</style>
<div id='map'></div>
<nav id='filter-group' class='filter-group'></nav>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamVtcyIsImEiOiJjaWtvZm0xZXQwd3QydWRtNmE5NnZwaDhzIn0.LOAVAPyPrc42UNHyoNn1hw';
var places = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"icon": "beer",
"name": "beer"
},
"geometry": {
"type": "Point",
"coordinates": [-110.913537, 32.266872]
}
}, {
"type": "Feature",
"properties": {
"icon": "car",
"name": "Parking"
},
"geometry": {
"type": "Point",
"coordinates": [-110.9, 32.276872]
}
}, {
"type": "Feature",
"properties": {
"icon": "toilet",
"name": "Restrooms"
},
"geometry": {
"type": "Point",
"coordinates": [-110.9, 32.266581]
}
}]
};
var filterGroup = document.getElementById('filter-group');
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/basic-v9',
center: [-110.9747, 32.2226],
zoom: 11.15
});
map.on('load', function() {
// Add a GeoJSON source containing place coordinates and information.
map.addSource("places", {
"type": "geojson",
"data": places
});
places.features.forEach(function(feature) {
var symbol = feature.properties['icon'];
var name = feature.properties['name'];
var layerID = 'poi-' + symbol;
// Add a layer for this symbol type if it hasn't been added already.
if (!map.getLayer(layerID)) {
map.addLayer({
"id": layerID,
"type": "symbol",
"source": "places",
"layout": {
"icon-image": symbol + "-15",
"icon-allow-overlap": true
},
"filter": ["==", "icon", symbol]
});
// Add checkbox and label elements for the layer.
var input = document.createElement('input');
input.type = 'checkbox';
input.id = layerID;
input.checked = true;
filterGroup.appendChild(input);
var label = document.createElement('label');
label.setAttribute('for', layerID);
label.textContent = name;
filterGroup.appendChild(label);
// When the checkbox changes, update the visibility of the layer.
input.addEventListener('change', function(e) {
map.setLayoutProperty(layerID, 'visibility',
e.target.checked ? 'visible' : 'none');
});
}
});
});
map.on('load', function () {
map.addLayer({
"id": "route",
"type": "line",
"source": {
"type": "geojson",
"data": {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[-110.87585, 32.2705],
[-110.87615, 32.26974],
[-110.87731, 32.26923],
[-110.87889, 32.26901],
[-110.88108, 32.26901],
[-110.88276, 32.26912],
[-110.88452, 32.26974],
[-110.88666, 32.27046],
[-110.88941, 32.27137],
[-110.8919, 32.27213],
[-110.89324, 32.27256],
[-110.89568, 32.27372],
[-110.89669, 32.27439],
[-110.89702, 32.27483],
[-110.89736, 32.27539],
[-110.90131, 32.27562],
[-110.90281, 32.27561],
[-110.9038, 32.27542],
[-110.9048, 32.27512],
[-110.90534, 32.27479],
[-110.90867, 32.27305],
[-110.90899, 32.27288],
[-110.9098, 32.27267],
[-110.91008, 32.2725],
[-110.91266, 32.27205],
[-110.91287, 32.27218],
[-110.91324, 32.27221],
[-110.91354, 32.27267],
[-110.91401, 32.27259],
[-110.91429, 32.27263],
[-110.91442, 32.27247],
[-110.91433, 32.27178],
[-110.91452, 32.27151],
[-110.91579, 32.27152],
[-110.91651, 32.27137],
[-110.91783, 32.27135],
[-110.91908, 32.27137],
[-110.92035, 32.27147],
[-110.92099, 32.27156],
[-110.92234, 32.27194],
[-110.92257, 32.27204],
[-110.9234, 32.27226],
[-110.9238, 32.27243],
[-110.92409, 32.27266],
[-110.92437, 32.27299],
[-110.92451, 32.2733],
[-110.92457, 32.27375],
[-110.9246, 32.27453],
[-110.92457, 32.27495],
[-110.92461, 32.27554],
[-110.92464, 32.27582],
[-110.92467, 32.27632],
[-110.92474, 32.27686],
[-110.92481, 32.27722],
[-110.92483, 32.27751],
[-110.92498, 32.27836],
[-110.92513, 32.27895],
[-110.92525, 32.27935],
[-110.92551, 32.27985],
[-110.92675, 32.2814],
[-110.92722, 32.28209],
[-110.92734, 32.28215],
[-110.92762, 32.28223],
[-110.92849, 32.28278],
[-110.92985, 32.28313],
[-110.93102, 32.28321],
[-110.93204, 32.28313],
[-110.93258, 32.283],
[-110.9347, 32.28245],
[-110.93487, 32.28247],
[-110.93537, 32.28239],
[-110.93557, 32.28235],
[-110.93699, 32.28222],
[-110.93886, 32.28202],
[-110.93942, 32.28211],
[-110.93999, 32.28233],
[-110.94021, 32.28253],
[-110.94217, 32.28395],
[-110.9423, 32.2841],
[-110.94249, 32.28413],
[-110.94313, 32.28451],
[-110.94402, 32.28495],
[-110.94438, 32.28521],
[-110.94609, 32.28623],
[-110.94687, 32.28669],
[-110.94719, 32.28698],
[-110.94765, 32.28716],
[-110.94871, 32.2876],
[-110.9498, 32.28785],
[-110.95036, 32.28787],
[-110.95116, 32.28799],
[-110.9515, 32.28797],
[-110.95191, 32.28789],
[-110.95232, 32.28791],
[-110.95274, 32.2882],
[-110.9529, 32.28822],
[-110.95324, 32.28806],
[-110.95356, 32.28795],
[-110.95443, 32.28795],
[-110.9555, 32.28805],
[-110.95664, 32.28829],
[-110.95767, 32.28863],
[-110.95806, 32.2887],
[-110.95918, 32.2891],
[-110.96047, 32.28946],
[-110.96101, 32.28951],
[-110.96146, 32.28965],
[-110.96198, 32.28992],
[-110.96308, 32.29014],
[-110.96417, 32.29018],
[-110.96508, 32.29026],
[-110.96562, 32.29019],
[-110.96915, 32.29009],
[-110.96978, 32.29019],
[-110.97057, 32.29039],
[-110.97091, 32.29063],
[-110.97212, 32.2914],
[-110.9724, 32.29149],
[-110.97411, 32.29261],
[-110.97473, 32.29311],
[-110.97495, 32.2934],
[-110.97638, 32.29421],
[-110.97717, 32.29448],
[-110.97806, 32.29462],
[-110.97869, 32.29472],
[-110.97885, 32.29483],
[-110.98065, 32.29509],
[-110.98122, 32.29512],
[-110.98247, 32.29505],
[-110.98322, 32.29521],
[-110.98368, 32.29506],
[-110.98415, 32.29503],
[-110.98439, 32.29488],
[-110.98472, 32.29481],
[-110.98517, 32.29481],
[-110.98539, 32.29471],
[-110.98559, 32.29454],
[-110.98576, 32.2945],
[-110.98609, 32.29448],
[-110.98632, 32.29433],
[-110.9866, 32.2941],
[-110.98889, 32.29331],
[-110.98965, 32.29315],
[-110.99077, 32.29325],
[-110.99138, 32.29341],
[-110.9922, 32.2938],
[-110.99347, 32.29441],
[-110.99399, 32.29468],
[-110.99449, 32.29478],
[-110.99476, 32.2948],
[-110.99564, 32.2951],
[-110.99643, 32.29554],
[-110.99678, 32.29566],
[-110.99735, 32.29575],
[-110.99922, 32.29649],
[-111.00005, 32.29698],
[-111.00032, 32.29707],
[-111.00094, 32.2971],
[-111.00117, 32.29717],
[-111.00343, 32.29815],
[-111.00402, 32.29864],
[-111.00468, 32.29898],
[-111.00504, 32.29932],
[-111.00523, 32.2995],
[-111.00579, 32.29979],
[-111.00628, 32.29999],
[-111.00762, 32.30086],
[-111.00773, 32.301],
[-111.0075, 32.30118],
[-111.00725, 32.3012],
[-111.00701, 32.30139],
[-111.00673, 32.30139],
[-111.00658, 32.30142],
[-111.00674, 32.30184],
[-111.00688, 32.30184],
[-111.00703, 32.30174],
[-111.0077, 32.30159],
[-111.00813, 32.30159],
[-111.0088, 32.30168],
[-111.00928, 32.3018],
[-111.00951, 32.30194],
[-111.00972, 32.30217],
[-111.00982, 32.30222],
[-111.01, 32.30216],
[-111.01016, 32.30221],
[-111.0108, 32.30253],
[-111.01117, 32.30276],
[-111.01165, 32.30286],
[-111.01224, 32.30312],
[-111.01248, 32.30332],
[-111.01303, 32.30364],
[-111.01334, 32.30387],
[-111.01348, 32.30399],
[-111.01405, 32.30427],
[-111.01614, 32.30508],
[-111.01627, 32.30523],
[-111.01643, 32.30536],
[-111.01657, 32.30539],
[-111.01672, 32.3053],
[-111.01763, 32.30565],
[-111.01841, 32.30578],
[-111.01915, 32.30582],
[-111.02095, 32.30588],
[-111.02159, 32.30595],
[-111.02259, 32.30623],
[-111.02352, 32.30649],
[-111.02438, 32.30697],
[-111.02494, 32.3074],
[-111.0254, 32.30779],
[-111.02606, 32.30822],
[-111.02663, 32.30858],
[-111.02742, 32.30899],
[-111.02761, 32.30908],
[-111.03101, 32.31047],
[-111.03174, 32.3106],
[-111.03492, 32.31062],
[-111.03572, 32.31074],
[-111.03662, 32.31103],
[-111.03719, 32.31132],
[-111.03729, 32.31159],
[-111.0375, 32.31168],
[-111.03769, 32.31158],
[-111.03919, 32.3123],
[-111.03935, 32.31236],
[-111.03982, 32.31269],
[-111.0403, 32.31327],
[-111.04201, 32.316],
[-111.04228, 32.31624],
[-111.04276, 32.31648],
[-111.04301, 32.31655],
[-111.04353, 32.31659],
[-111.04391, 32.31653]
]
}
}
},
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#9010AB",
"line-width": 5
}
});
});
</script>
</body>
</html>