Storepoint Locator Widget JavaScript API

var storepoint = new StorepointWidget('YOUR_PUBLIC_WIDGET_ID', '#storepoint-widget', {
    initialState: {
        search_text: 'New York, NY',    // Pre-fill search bar
        lat: 40.7128,                   // Latitude to search from
        lng: -74.0060,                  // Longitude to search from
        radius: 50,                     // Search radius (uses widget's distance unit)
        auto_detect_location: true      // Automatically detect user's location via IP
    }
});

var storepoint = new StorepointWidget('YOUR_PUBLIC_WIDGET_ID', '#storepoint-widget', {
    initialState: {
        search_text: 'Los Angeles',
        lat: 34.0522,
        lng: -118.2437,
        radius: 25
    }
});

var storepoint = new StorepointWidget('YOUR_PUBLIC_WIDGET_ID', '#storepoint-widget', {
    initialState: {
        auto_detect_location: true,
        radius: 10
    }
});

// Listen for search events
Storepoint.on('search', function(data) {
    console.log('Search performed');
});

// Listen for location clicks
Storepoint.on('location-result-item-click', function(data) {
    console.log('Location clicked:', data.name);
});

// Call inside load callback or in response to user action
Storepoint.on('load', function() {
    Storepoint.setLanguage('fr');
});

// Or on a button click
document.getElementById('lang-btn').addEventListener('click', function() {
    Storepoint.setLanguage('es');
});

// Filter to show only 'premium' locations on button click
document.getElementById('premium-btn').addEventListener('click', function() {
    Storepoint.setFilters(['premium']);
});

// Clear all filters
document.getElementById('clear-btn').addEventListener('click', function() {
    Storepoint.setFilters([]);
});

// Get locations after widget loads
Storepoint.on('load', function() {
    var locations = Storepoint.getCurrentLocations();
    console.log('Loaded', locations.length, 'locations');
});

// Or get locations after a search
Storepoint.on('search', function() {
    var locations = Storepoint.getCurrentLocations();
    console.log('Found', locations.length, 'locations');
});

// Add a custom polygon layer after widget loads
Storepoint.on('load', function() {
    Storepoint.addCustomLayer('my-custom-layer', {
        type: 'fill',
        fillColor: '#FF5733',
        fillOpacity: 0.2,
        strokeWidth: 2,
        strokeColor: '#FF5733',
        strokeOpacity: 0.8,
        data: {
            type: 'FeatureCollection',
            features: [{
                type: 'Feature',
                geometry: {
                    type: 'Polygon',
                    coordinates: [[
                        [-74.006, 40.713],
                        [-74.006, 40.717],
                        [-73.998, 40.717],
                        [-73.998, 40.713],
                        [-74.006, 40.713]
                    ]]
                }
            }]
        }
    });
});

Storepoint.removeCustomLayer('my-custom-layer');

// Add a custom range filter after widget loads
Storepoint.on('load', function() {
    Storepoint.addCustomFilter({
    // Unique identifier for this filter
    id: 'price_range',
    
    // Filter type (always 'custom' for custom filters)
    type: 'custom',
    
    /**
     * Filtering function that determines which locations to display
     * @param {Array} locations - Array of locations matching the current query before custom filters
     * @param {any} filterValue - Current value of the filter (from defaultValue or updateValue)
     * @return {Array} - Filtered array of locations that should be displayed
     */
    filter: function(locations, filterValue) {
        if (!filterValue) return locations;
        
        const min = filterValue[0];
        const max = filterValue[1];
        
        return locations.filter(location => {
            // Custom logic to filter locations based on a property
            const price = parseFloat(location.custom_fields.text.find(
                field => field.name === 'price'
            ).value);
            return !isNaN(price) && price >= min && price <= max;
        });
    },
    
    /**
     * HTML template for the filter UI
     * Can be provided as a string or as a getter function: get template() { return '...'; }
     * This defines the visual structure of your custom filter component
     */
    template: `
        <div class="price-filter">
            <div class="filter-header">Price Range</div>
            <div class="range-inputs">
                <input type="number" class="min-input" placeholder="Min">
                <span>to</span>
                <input type="number" class="max-input" placeholder="Max">
            </div>
        </div>
    `,
    
    /**
     * Setup function to initialize the filter UI and handle events
     * @param {HTMLElement} container - The DOM element where your filter HTML is mounted
     * @param {Function} updateValue - Callback function that must be called with the new filter value. This new value will be passed to the filter function to filter locations
     */
    setup: function(container, updateValue) {
        const minInput = container.querySelector('.min-input');
        const maxInput = container.querySelector('.max-input');
        
        // Handle input changes
        function handleChange() {
            const min = parseFloat(minInput.value) || 0;
            const max = parseFloat(maxInput.value) || 1000;
            updateValue([min, max]);
        }
        
        minInput.addEventListener('input', handleChange);
        maxInput.addEventListener('input', handleChange);
        
        // Initialize with default values
        minInput.value = 0;
        maxInput.value = 1000;
        updateValue([0, 1000]);
    },
    
    // Default filter value
    defaultValue: [0, 1000],
    
    // Optional CSS styles for the filter
    styles: `
        .price-filter {
            padding: 10px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        .filter-header {
            font-weight: bold;
            margin-bottom: 8px;
        }
        .range-inputs {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .min-input, .max-input {
            width: 80px;
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    `
    });
});

// Add radius circles around locations after each search
Storepoint.on('search', function() {
    var locations = Storepoint.getCurrentLocations();
    
    // Remove existing layer
    Storepoint.removeCustomLayer('radius-circles');
    
    // Create circle features for each location
    var features = locations.map(function(location) {
        return createCircleFeature(
            [location.loc_long, location.loc_lat],
            50 // radius in miles
        );
    });
    
    // Add the layer
    Storepoint.addCustomLayer('radius-circles', {
        type: 'fill',
        fillColor: '#000000',
        fillOpacity: 0.15,
        strokeWidth: 1,
        strokeColor: '#000000',
        strokeOpacity: 0.3,
        data: {
            type: 'FeatureCollection',
            features: features
        }
    });
});

// Helper: Create a circle as a GeoJSON polygon
function createCircleFeature(center, radiusInMiles) {
    var points = 64;
    var lng = center[0];
    var lat = center[1];
    var coordinates = [];
    
    var distanceX = radiusInMiles / (111.320 * Math.cos(lat * Math.PI / 180) * 0.621371);
    var distanceY = radiusInMiles / (110.574 * 0.621371);
    
    for (var i = 0; i < points; i++) {
        var angle = (i / points) * (2 * Math.PI);
        coordinates.push([
            lng + distanceX * Math.cos(angle),
            lat + distanceY * Math.sin(angle)
        ]);
    }
    coordinates.push(coordinates[0]); // Close the polygon
    
    return {
        type: 'Feature',
        geometry: { type: 'Polygon', coordinates: [coordinates] }
    };
}

// Add a custom dual range filter after widget loads
Storepoint.on('load', function() {
    Storepoint.addCustomFilter({
        type: 'custom',
        id: 'sq_ft_range',
    
    // Filtering function
    filter: function(locations, filterValue) {
        if (!filterValue) return locations;
        
        const min = filterValue[0];
        const max = filterValue[1];
        
        return locations.filter(location => {
            // Find square footage values in custom fields
            let sqFt = null;
            
            // Check if custom_fields exist
            if (location.custom_fields && location.custom_fields.text) {
                // Find the square footage field by its token
                const sqFtField = location.custom_fields.text.find(
                    field => field.token === "square_footage_token"
                );
                
                if (sqFtField) {
                    sqFt = parseFloat(sqFtField.value);
                }
            }
            
            // If square footage exists and is in range, include the location
            if (!isNaN(sqFt)) {
                return sqFt >= min && sqFt <= max;
            }
            
            // If no square footage data, don't filter out
            return true;
        });
    },
    
    // Configuration for the filter
    rangeConfig: {
        minValue: 0,
        maxValue: 10000,
        defaultMin: 0,
        defaultMax: 10000,
        step: 100
    },
    
    // HTML template for the filter UI
    template: `
        <div class="range-filter">
            <div class="filter-header">Square Footage</div>
            <div class="range-inputs">
                <input type="number" class="min-input" placeholder="Min">
                <span>to</span>
                <input type="number" class="max-input" placeholder="Max">
                <span>sq ft</span>
            </div>
            <div class="range-slider">
                <input type="range" class="min-slider" min="0" max="10000" step="100" value="0">
                <input type="range" class="max-slider" min="0" max="10000" step="100" value="10000">
            </div>
        </div>
    `,
    
    // Setup function (simplified version)
    setup: function(container, updateValue) {
        const minInput = container.querySelector('.min-input');
        const maxInput = container.querySelector('.max-input');
        const minSlider = container.querySelector('.min-slider');
        const maxSlider = container.querySelector('.max-slider');
        
        // Handle input changes and update the filter value
        function handleChange() {
            const min = parseInt(minInput.value) || 0;
            const max = parseInt(maxInput.value) || 10000;
            updateValue([min, max]);
        }
        
        // Set up event listeners
        minInput.addEventListener('input', handleChange);
        maxInput.addEventListener('input', handleChange);
        minSlider.addEventListener('input', function() {
            minInput.value = this.value;
            handleChange();
        });
        maxSlider.addEventListener('input', function() {
            maxInput.value = this.value;
            handleChange();
        });
        
        // Initialize with default values
        minInput.value = 0;
        maxInput.value = 10000;
        updateValue([0, 10000]);
    },
    
    // Default filter value
    defaultValue: [0, 10000],
    
    // CSS styles for the filter (simplified)
    styles: `
        .range-filter {
            padding: 10px;
            background: #f5f5f5;
            border-radius: 4px;
        }
        .filter-header {
            font-weight: bold;
            margin-bottom: 8px;
        }
        .range-inputs {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .min-input, .max-input {
            width: 80px;
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .range-slider {
            position: relative;
            height: 30px;
        }
        .min-slider, .max-slider {
            position: absolute;
            width: 100%;
            pointer-events: none;
        }
        .min-slider::-webkit-slider-thumb, .max-slider::-webkit-slider-thumb {
            pointer-events: auto;
        }
    `
    });
});

// Google Analytics GTM Events
// Add this anywhere on your page

Storepoint.on('load', function() {
    gtag('event', 'storepoint_widget_load');
});

Storepoint.on('search', function() {
    gtag('event', 'storepoint_search');
});

Storepoint.on('location-result-item-click', function() {
    gtag('event', 'storepoint_location_click', {
        click_source: 'list'
    });
});

Storepoint.on('map-marker-click', function() {
    gtag('event', 'storepoint_location_click', {
        click_source: 'map'
    });
});

Storepoint.on('load', function() {
    dataLayer.push({ event: 'storepoint_widget_load' });
});

Storepoint.on('search', function() {
    dataLayer.push({ event: 'storepoint_search' });
});

Storepoint.on('location-result-item-click', function() {
    dataLayer.push({ event: 'storepoint_location_click' });
});

Storepoint.on('map-marker-click', function() {
    dataLayer.push({ event: 'storepoint_location_click' });
});