Dealer Locator | Towing Suppliers Near You | Blue Ox (2024)

'; var distance = turf.distance(searchLocation, feature.geometry.coordinates, { units: 'miles' }); // Add to left search box var html = ''; if (searchLocation != monument) html += '

' + distance.toFixed(2) + ' MI

'; html += '

' + feature.properties.Address + '

'; html += '

' + feature.properties.City + ' ' + feature.properties.State + ' ' + feature.properties.Zip + '

'; if (feature.properties.Phone != "") html += ''; if (feature.properties.Website != "") html += ''; if (feature.properties.Email != "") html += ''; html += `` // var marker = new mapboxgl.Marker(markerElement) // .setLngLat(feature.geometry.coordinates) // .addTo(map); //markers.push(marker); jQuery('#ulLocations').append('

' + html + '

'); }); // Remove existing layers that use the 'dealers' source if (map.getLayer('clusters')) { map.removeLayer('clusters'); } if (map.getLayer('cluster-count')) { map.removeLayer('cluster-count'); } if (map.getLayer('unclustered-point')) { map.removeLayer('unclustered-point'); } map.getSource('dealers').setData(data); map.addLayer({ id: 'clusters', type: 'circle', source: 'dealers', filter: ['has', 'point_count'], paint: { // Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step) // with three steps to implement three types of circles: // * Blue, 20px circles when point count is less than 100 // * Yellow, 30px circles when point count is between 100 and 750 // * Pink, 40px circles when point count is greater than or equal to 750 'circle-color': [ 'step', ['get', 'point_count'], '#51bbd6', 10, // Count '#f1f075', 25, // Count '#f28cb1' ], 'circle-radius': [ 'step', ['get', 'point_count'], 15, 10, // Count 17, 25, // Count 20 ] } }); map.addLayer({ id: 'cluster-count', type: 'symbol', source: 'dealers', filter: ['has', 'point_count'], layout: { 'text-field': ['get', 'point_count_abbreviated'], 'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'], 'text-size': 12 } }); // inspect a cluster on click map.on('click', 'clusters', (e) => { const features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] }); const clusterId = features[0].properties.cluster_id; map.getSource('dealers').getClusterExpansionZoom( clusterId, (err, zoom) => { if (err) return; map.easeTo({ center: features[0].geometry.coordinates, zoom: zoom }); } ); }); map.addLayer({ id: 'unclustered-point', type: 'symbol', source: 'dealers', filter: ['!', ['has', 'point_count']], layout: { 'icon-image': 'blueox-marker', // Use the custom marker image added to your style 'icon-size': 0.5, // Set the size of the marker (1 = 100%) 'icon-allow-overlap': true, // Allow markers to overlap 'icon-ignore-placement': true // Ignore collisions with other symbols on the map } }); // When a click event occurs on a feature in // the unclustered-point layer, open a popup at // the location of the feature, with // description HTML from its properties. map.on('click', 'unclustered-point', (e) => { const coordinates = e.features[0].geometry.coordinates.slice(); var featureProperties = e.features[0].properties; // Ensure that if the map is zoomed out such that // multiple copies of the feature are visible, the // popup appears over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } var distance = turf.distance(searchLocation, coordinates, { units: 'miles' }); var html = '

' + featureProperties.Name + '

'; if (searchLocation != monument) html += '

' + distance.toFixed(2) + ' MI

'; html += '

' + featureProperties.Address + '

'; html += '

' + featureProperties.City + ' ' + featureProperties.State + ' ' + featureProperties.Zip + '

'; if (featureProperties.Phone != "") html += ''; if (featureProperties.Website != "") html += ''; if (featureProperties.Email != "") html += ''; html += `` const popup = new mapboxgl.Popup() .setLngLat(coordinates) .setHTML(html) .addTo(map); openPopup = popup; var $element = jQuery('#liFeature' + featureProperties.Id); // set focus on the element $element.focus(); setTimeout(function() { var $list = jQuery('#divListBox'); var scrollTop = $element.offset().top - $list.offset().top + $list.scrollTop() - $list.height() / 2 + $element.outerHeight() / 2; $list.animate({ scrollTop: scrollTop }, 500); }, 100); // add border to the selected element jQuery('#ulLocations li').removeClass('selected'); $element.addClass('selected'); }); map.on('mouseenter', 'clusters', () => { map.getCanvas().style.cursor = 'pointer'; }); map.on('mouseleave', 'clusters', () => {map.getCanvas().style.cursor = '';}); map.on('mouseenter', 'unclustered-point', () => {map.getCanvas().style.cursor = 'pointer';}); map.on('mouseleave', 'unclustered-point', () => {map.getCanvas().style.cursor = '';}); // markers.forEach(function(marker, index) { // // Add click event listener to the marker // marker.getElement().addEventListener('click', function() { // // select the 15th element in the list // var elementIndex = index; // 0-based index // var $element = jQuery('#ulLocations li').eq(elementIndex); // // set focus on the element // $element.focus(); // setTimeout(function() { // var $list = jQuery('#divListBox'); // var scrollTop = $element.offset().top - $list.offset().top + $list.scrollTop() - $list.height() / 2 + $element.outerHeight() / 2; // $list.animate({ // scrollTop: scrollTop // }, 500); // }, 100); // // add border to the selected element // jQuery('#ulLocations li').removeClass('selected'); // $element.addClass('selected'); // }); // }); }; // Add zoom and rotation controls to the map. map.addControl(new mapboxgl.FullscreenControl()); map.addControl(new mapboxgl.NavigationControl()); function addProtocol(url) { const domain = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, ''); return `//${domain}`; } // Get user's location and set input value to city, state, or country document.getElementById('getLocationBtn').addEventListener('click', function() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // Reverse geocode coordinates to get city, state, or country fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${longitude},${latitude}.json?access_token=${mapboxgl.accessToken}`) .then(response => response.json()) .then(data => { console.log(data); var city, state, country; data.features.forEach(function(contextItem) { switch (contextItem.id.split('.')[0]) { case 'place': city = contextItem.text; break; case 'region': state = contextItem.short_code; break; case 'country': country = contextItem.short_code; break; } }); var parts = []; if (city) parts.push(city); if (state) parts.push(state); if (country) parts.push(country); var location = parts.join(', '); geocoder.query(location); setTimeout(function() { geocoder._inputEl.blur(); }, 100); }) .catch(error => { console.log(error); }); }); } else { console.log('Geolocation is not supported by this browser.'); } }); function getUniqueCategories(data) { var uniqueCategories = new Set(); // Iterate over each item in the data for (var i = 0; i < data.length; i++) { // Split the item into categories using "; " var categories = data[i].split(";").map(category => category.trim()); // Iterate over each category and add it to the uniqueCategories set for (var j = 0; j < categories.length; j++) { uniqueCategories.add(categories[j]); } } // Convert the set to an array and sort it in ascending order var sortedCategories = Array.from(uniqueCategories).sort(); return sortedCategories; }