${feature.properties.name} 2s4ky
${feature.properties.description} 4o2s5r
` if (feature.properties.schedule) { buttonsHTML += `Schedule`; } if (feature.properties.online_wagering_link) { buttonsHTML += `Bet Online`; } if (feature.properties.website) { buttonsHTML += `Website`; } if (feature.properties.nearby_attractions_link) { buttonsHTML += `Nearby Attractions`; } if (feature.properties.directions_link) { buttonsHTML += `Get Directions`; addressHTML = `${feature.properties.address}`; } if (feature.properties.phone) { phoneHTML += `${feature.properties.formatted_phone}`; } const popup = new mapboxgl.Popup({ offset: [0, -15] }) .setLngLat(feature.geometry.coordinates) .setHTML(popupHTML + `` + addressHTML + phoneHTML) .addTo(map); popup.on('close', () => { resetMapView(); }); }); mapFilter.addEventListener('change', (e) => { const filterType = e.target.value; // e.g. "racetrack", "harness", or "" addLayerUsingFilter(filterType); }); function clearMap() { if (map.getLayer('racetracks')) { map.removeLayer('racetracks'); } if (map.getLayer('off-tracks')) { map.removeLayer('off-tracks'); } } function populateAllMarkers() { map.addLayer({ id: 'racetracks', source: 'phra-tracks-v2', type: 'symbol', filter: ['in', 'racetrack', ['get', 'tags']], layout: { 'icon-image': 'flag-icon', 'icon-size': 0.75, 'icon-allow-overlap': true, } }); map.addLayer({ id: 'off-tracks', source: 'phra-tracks-v2', type: 'symbol', filter: ['in', 'off-track', ['get', 'tags']], layout: { 'icon-image': 'map-pin-icon', 'icon-size': 0.75, 'icon-allow-overlap': true, } }); } function addLayerUsingFilter(filterValue) { clearMap(); if (filterValue == "off-track") { map.addLayer({ id: 'off-tracks', source: 'phra-tracks-v2', type: 'symbol', filter: ['in', 'off-track', ['get', 'tags']], layout: { 'icon-image': 'map-pin-icon', 'icon-size': 0.75, 'icon-allow-overlap': true, } }); } else if (filterValue == "") { populateAllMarkers(); } else { map.addLayer({ id: 'racetracks', source: 'phra-tracks-v2', type: 'symbol', filter: ['in', filterValue, ['get', 'tags']], layout: { 'icon-image': 'flag-icon', 'icon-size': 0.75, 'icon-allow-overlap': true, } }); } } function resetMapView() { map.flyTo({ center: desktopCenterPos, zoom: startingZoom, duration: zoomDuration, }); }
