Created
January 29, 2016 13:19
-
-
Save tristen/58b0c09a3d81766993aa to your computer and use it in GitHub Desktop.
Filtering with setData (testing popover after filter)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <title></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.13.1/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.13.1/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.eyJ1IjoibWFwYm94IiwiYSI6ImdQMzI4WjgifQ.d-Uyr7NBjrJVz9z82uk5Xg'; | |
| var markers = { | |
| "type": "FeatureCollection", | |
| "features": [{ | |
| "type": "Feature", | |
| "properties": { | |
| "marker-symbol": "theatre" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-77.038659, 38.931567] | |
| } | |
| }, { | |
| "type": "Feature", | |
| "properties": { | |
| "marker-symbol": "theatre" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-77.003168, 38.894651] | |
| } | |
| }, { | |
| "type": "Feature", | |
| "properties": { | |
| "marker-symbol": "bar" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-77.090372, 38.881189] | |
| } | |
| }, { | |
| "type": "Feature", | |
| "properties": { | |
| "marker-symbol": "bicycle" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-77.052477, 38.943951] | |
| } | |
| }, { | |
| "type": "Feature", | |
| "properties": { | |
| "marker-symbol": "music" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-77.031706, 38.914581] | |
| } | |
| }, { | |
| "type": "Feature", | |
| "properties": { | |
| "marker-symbol": "music" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-77.020945, 38.878241] | |
| } | |
| }, { | |
| "type": "Feature", | |
| "properties": { | |
| "marker-symbol": "music" | |
| }, | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [-77.007481, 38.876516] | |
| } | |
| }] | |
| }; | |
| var filterGroup = document.getElementById('filter-group'); | |
| var filtered = []; | |
| var map = new mapboxgl.Map({ | |
| container: 'map', | |
| style: 'mapbox://styles/mapbox/streets-v8', | |
| center: [-77.04, 38.907], | |
| zoom: 11.15 | |
| }); | |
| // Create a popup, but don't add it to the map yet. | |
| var popup = new mapboxgl.Popup({ | |
| closeButton: false, | |
| closeOnClick: false | |
| }); | |
| map.on('load', function() { | |
| // Add marker data as a new GeoJSON source. | |
| map.addSource("markers", { | |
| "type": "geojson", | |
| "data": markers | |
| }); | |
| markers.features.forEach(function(feature) { | |
| var symbol = feature.properties['marker-symbol']; | |
| 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", | |
| "interactive": true, | |
| "source": "markers", | |
| "layout": { | |
| "icon-image": symbol + "-15", | |
| "icon-allow-overlap": true | |
| }, | |
| "filter": ["==", "marker-symbol", 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 = symbol; | |
| filterGroup.appendChild(label); | |
| // When the checkbox changes, update the visibility of the layer. | |
| input.addEventListener('change', function(e) { | |
| if (e.target.checked && filtered.indexOf(layerID) >= 0) { | |
| filtered.splice(filtered.indexOf(layerID), 1); | |
| } else { | |
| filtered.push(layerID); | |
| } | |
| // Filter out any unchecked room selections | |
| map.getSource('markers').setData({ | |
| type: 'FeatureCollection', | |
| features: markers.features.filter(function(feature) { | |
| var id = 'poi-' + feature.properties['marker-symbol']; | |
| return filtered.indexOf(id) < 0; | |
| }) | |
| }); | |
| }); | |
| } | |
| }); | |
| }); | |
| map.on('mousemove', function(e) { | |
| map.featuresAt(e.point, { | |
| radius: 7.5, // Half the marker size (15px). | |
| includeGeometry: true, | |
| layer: markers.features.map(function(feature) { | |
| var symbol = feature.properties['marker-symbol']; | |
| return 'poi-' + symbol; | |
| }) | |
| }, function(err, features) { | |
| // Change the cursor style as a UI indicator. | |
| map.getCanvas().style.cursor = (!err && features.length) ? 'pointer' : ''; | |
| if (err || !features.length) { | |
| popup.remove(); | |
| return; | |
| } | |
| var feature = features[0]; | |
| // Initialize a popup and set its coordinates | |
| // based on the feature found. | |
| popup.setLngLat(feature.geometry.coordinates) | |
| .setHTML(feature.properties['marker-symbol']) | |
| .addTo(map); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment