As a user, after I allow access to my location, the map should center on my location and a marker should pop up for the results of search
AC
WHEN the user allows access to the location
THEN the map should center on their location
AND a marker should pop up
ALSO after they search a term
THEN markers should pop up at the places locations
Development
Add a state of markersData: [] to Home.js
In the yelpData call for business then, after the results state is set, map thru the results and set state of the markers data using like so : this.setState({ markersData: [ ...this.state.markersData, { title: result.name, latLng: { lat: result.coordinates.latitude, lng: result.coordinates.longitude }, image: result.image_url, }], })
To get markers to work you must delete L.Icon.Default.prototype._getIconUrl; at the top of the Map.js
Then create new markers by then L.Icon.Default.mergeOptions({ iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), iconUrl: require('leaflet/dist/images/marker-icon.png'), shadowUrl: require('leaflet/dist/images/marker-shadow.png'), });
After this.map.locate call this.layer = L.layerGroup().addTo(this.map); this.updateMarkers(this.props.markersData);
In onLocationFound after this.props.findDude call L.marker(e.latlng).addTo(this.map).
Then at the end of the componentDidMount() call this.map.on('locationfound', onLocationFound);
Create a function popUpData that takes in (marker) and then returns <div><img style="max-width: 80%;" src="${marker.image}"></img><p>${marker.title}</p></div>
User Story
As a user, after I allow access to my location, the map should center on my location and a marker should pop up for the results of search
AC
WHEN the user allows access to the location THEN the map should center on their location AND a marker should pop up ALSO after they search a term THEN markers should pop up at the places locations
Development
Add a state of
markersData: []toHome.jsIn the yelpData call for business then, after the results state is set, map thru the results and set state of the markers data using like so :
this.setState({ markersData: [ ...this.state.markersData, { title: result.name, latLng: { lat: result.coordinates.latitude, lng: result.coordinates.longitude }, image: result.image_url, }], })To get markers to work you must
delete L.Icon.Default.prototype._getIconUrl;at the top of theMap.jsThen create new markers by then
L.Icon.Default.mergeOptions({ iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), iconUrl: require('leaflet/dist/images/marker-icon.png'), shadowUrl: require('leaflet/dist/images/marker-shadow.png'), });After
this.map.locatecallthis.layer = L.layerGroup().addTo(this.map); this.updateMarkers(this.props.markersData);In
onLocationFoundafterthis.props.findDudecall L.marker(e.latlng).addTo(this.map).Then at the end of the
componentDidMount()callthis.map.on('locationfound', onLocationFound);Create
componentDidUpdate({ markersData }) { if (this.props.markersData !== markersData) { this.updateMarkers(this.props.markersData); } }Create a function
popUpDatathat takes in(marker)and then returns<div><img style="max-width: 80%;" src="${marker.image}"></img><p>${marker.title}</p></div>Create
updateMarkers(markersData) { this.layer.clearLayers(); markersData.forEach((marker) => { L.marker(marker.latLng, { title: marker.title }).addTo(this.layer).bindPopup(this.popUpData(marker)); }); }