${props.name || 'Unknown'}
${props.full_address ? `
${props.full_address}
` : ''}
${props.category_primary ? `
${props.category_primary}
` : ''}
`).addTo(map);
}
});
map.on('mouseleave', 'place-results', () => {
map.getCanvas().style.cursor = '';
if (popupRef.current) popupRef.current.remove();
});
});
mapRef.current = map;
};
loadMapbox();
return () => {
if (mapRef.current) {
mapRef.current.remove();
mapRef.current = null;
}
};
}, []);
useEffect(() => {
if (!mapRef.current || !mapRef.current.isStyleLoaded()) return;
const radiusSource = mapRef.current.getSource('search-radius');
if (radiusSource) {
radiusSource.setData(createCircleGeoJSON(latitude, longitude, radius));
}
}, [latitude, longitude, radius, createCircleGeoJSON]);
const handleSearch = async () => {
setIsLoading(true);
setError(null);
try {
const requestBody = {
location_filter: {
latitude: latitude,
longitude: longitude,
radius: radius
}
};
if (category.trim()) {
const categories = category.split(',').map(c => c.trim()).filter(c => c);
if (categories.length > 0) {
requestBody.categories = categories;
}
}
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
};
const response = await fetch('https://api.reprompt.io/v2/find-places', {
method: 'POST',
headers,
body: JSON.stringify(requestBody)
});
if (!response.ok) {
const errorText = await response.text();
if (response.status === 401) {
throw new Error('Invalid API key. Please check your key and try again.');
}
throw new Error(`API returned ${response.status}: ${errorText}`);
}
const data = await response.json();
setResults(data);
if (mapRef.current) {
const placesSource = mapRef.current.getSource('place-results');
if (placesSource) {
const features = (data.results || []).map(place => ({
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [place.longitude, place.latitude]
},
properties: {
name: place.name,
full_address: place.full_address,
category_primary: place.category_primary
}
}));
placesSource.setData({
type: 'FeatureCollection',
features
});
if (features.length > 0) {
const bounds = new window.mapboxgl.LngLatBounds();
features.forEach(f => bounds.extend(f.geometry.coordinates));
bounds.extend([longitude, latitude]);
mapRef.current.fitBounds(bounds, {
padding: 50,
maxZoom: 15
});
}
}
}
} catch (err) {
setError(err.message || 'Failed to search places');
} finally {
setIsLoading(false);
}
};
return
{}
{}
setLatitude(parseFloat(e.target.value) || 0)} style={{
width: '100%',
padding: '8px',
border: '1px solid #D1D5DB',
borderRadius: '6px',
fontSize: '13px'
}} />
setLongitude(parseFloat(e.target.value) || 0)} style={{
width: '100%',
padding: '8px',
border: '1px solid #D1D5DB',
borderRadius: '6px',
fontSize: '13px'
}} />
setRadius(parseInt(e.target.value) || 1000)} style={{
width: '100%',
padding: '8px',
border: '1px solid #D1D5DB',
borderRadius: '6px',
fontSize: '13px'
}} />
setCategory(e.target.value)} placeholder="e.g., restaurant, cafe" style={{
width: '100%',
padding: '8px',
border: '1px solid #D1D5DB',
borderRadius: '6px',
fontSize: '13px'
}} />
{}
{}
{error &&
{error}
}
{}
{}
{results && results.results && results.results.length > 0 &&
Found {results.results.length} {results.results.length === 1 ? 'place' : 'places'} in this area
}
{}
{results && results.results && results.results.length > 0 &&
{JSON.stringify({
results: results.results.slice(0, 3)
}, null, 2)}
}