I am fetching data from my device storage and want to display the data on a map. But when I update my state object this.coords.path inside my function showPics() only the testing marker at {lat:1,lng:1} is displayed all the other coordinates are pushed to this.coords.path but not displayed...
I have tried it with the sampleData-array for testing the basic code -> the loop and everything works - just not when updating the state object with new data...
Here is the code:
class Map extends React.Component {
constructor(props) {
super(props);
this.coords = {
path: [
{lat:1, lng:1}
]
}
}
showPics = async() => {
let {value} = await Storage.get({key: 'path' })
let arrayPath = JSON.parse(value)
for( let i=0; i < arrayPath.length; i++) {
let newArray = {lat: arrayPath[i].latitude, lng: arrayPath[i].longitude}
this.coords.path.push(newArray)
}
}
render() {
const sampleData = [{
"Id": 1,
"lat": 54.083336,
"lng: 12.108811
},
{
"Id": 2,
"lat": 54.084336,
"lng": 12.109811
}]
return (
<div className="leaflet-container">
<MapContainer id="map" center={center} zoom={zoom} scrollWheelZoom={false}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{ this.coords.path.map(eachData => (
<Marker
position= {[eachData.lat, eachData.lng]}
/>
))}
<IonFab vertical="bottom" horizontal="end" slot="fixed">
<IonFabButton onClick={() => this.showPics()}>
<IonIcon icon={image}></IonIcon>
</IonFabButton>
</IonFab>
</div>
)
}
}
You are trying to set the data to this.coords. This is not tracked by react and will not be able to update the DOM. Instead you can set your data to the component state as below
state = {
coords: {
path: [
{lat:1, lng:1}
]
}
}
Function showPics can be modified as below to set the data to the state using setState which should be picked by the virtualDOM and update accordingly
showPics = async() => {
const {coords:{path}} = this.state;
let {value} = await Storage.get({key: 'path' })
let arrayPath = JSON.parse(value);
const paths = [...path];
for( let i=0; i < arrayPath.length; i++) {
let newArray = {lat: arrayPath[i].latitude, lng:
arrayPath[i].longitude}
paths.push(newArray)
}
this.setState({
coords: {
path: [...paths]
}
})
}
Related
I am having trouble using setStates. I stored an array of markers for my Google Map in my state and I am using a for loop to iterate through each marker in order to change the position state of the marker using Google's Geocode API.
Here is my state:
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
markers: [
{
name: "Costco Wholesale",
address: "9151 Bridgeport Rd, Richmond, BC V6X 3L9",
position: { lat: 0, lng: 0 },
placeID: 'ChIJWc2NzuF0hlQRDu0NNhdQCjM'
} //just trying to get this one to work first before I add in the others
],
busy: []
};
Here is the function(declared inside the class):
findLatLong(){
for(let i = 0; i < this.state.markers.length; i++){
Geocode.fromAddress(this.state.markers[i].address).then(
response => {
const { lati, lngi } = response.results[0].geometry.location;
this.state.markers[i].position.setState({lat: lati, lng: lngi})
}
);
}
}
As you can see, I am passing the address contained in the same array element into the .fromAddress function and then using setState to set the lat and lng to the returned value.
I later call the function after the map renders but before the markers do:
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{ lat: 49.166590, lng: -123.133569 }}
>
{this.findLatLong}
{this.state.markers.map((marker, index) => (
<Marker
key={index}
onClick={this.onMarkerClick}
name={marker.name}
position={marker.position}
/>
))}
However marker's position state is not changing and is instead remaining as the filler values I passed during the initial state declaration.
Full code if it helps:
import React, { Component } from 'react';
import { Map, GoogleApiWrapper, InfoWindow, Marker } from 'google-maps-react';
import Geocode from 'react-geocode';
const key = '';
Geocode.setApiKey(key);
const mapStyles = {
width: '100%',
height: '100%'
};
export class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
markers: [
{
name: "Costco Wholesale",
address: "9151 Bridgeport Rd, Richmond, BC V6X 3L9",
position: { lat: 0, lng: 0 },
placeID: 'ChIJWc2NzuF0hlQRDu0NNhdQCjM'
}
],
busy: []
};
findLatLong(){
for(let i = 0; i < this.state.markers.length; i++){
Geocode.fromAddress(this.state.markers[i].address).then(
response => {
const { lati, lngi } = response.results[0].geometry.location;
this.state.markers[i].position.setState({lat: lati, lng: lngi})
}
);
}
}
componentDidMount() {
this.getList();
}
getList = () => {
fetch('/api/getList')
.then(res => res.json())
.then(percent => this.setState({ busy: percent }))
}
onMarkerClick = (props, marker, e) =>
this.setState({
selectedPlace: props,
activeMarker: marker,
showingInfoWindow: true
});
onClose = props => {
if (this.state.showingInfoWindow) {
this.setState({
showingInfoWindow: false,
activeMarker: null
});
}
};
render() {
return (
<Map
google={this.props.google}
zoom={14}
style={mapStyles}
initialCenter={{ lat: 49.166590, lng: -123.133569 }}
>
{this.findLatLong}
{this.state.markers.map((marker, index) => (
<Marker
key={index}
onClick={this.onMarkerClick}
name={marker.name}
position={marker.position}
/>
))}
<InfoWindow
marker={this.state.activeMarker}
visible={this.state.showingInfoWindow}
onClose={this.onClose}
>
<div>
<h4>{this.state.selectedPlace.name}</h4>
<h4>{this.state.busy}</h4>
</div>
</InfoWindow>
</Map>
);
}
}
Thank you in advance!
Attempt to fix #1
.then(
response => {
const { lati, lngi } = response.results[0].geometry.location;
this.setState(oldState => {
const newMarkers = [oldState.markers];
const modifiedMarker = newMarkers[i];
modifiedMarker.lat = lati;
modifiedMarker.lng = lngi;
return {oldState, markers: [newMarkers]};
//How do i implement the modifiedMarkers?
})
UPDATE
Actually it is better if you mutate the state just once and not inside the loop
findLatLong(){
const newMarkers = [...this.state.markers]
for(let i = 0; i < this.state.markers.length; i++){
Geocode.fromAddress(this.state.markers[i].address).then(
response => {
const { lati, lngi } = response.results[0].geometry.location;
newMarkers[i].position.lat = lati;
newMarkers[i].position.lng = lngi;
}
);
}
this.setState(oldState => {
return { ...oldState, markers: [...newMakers] };
});
}
That's no how you mutate the state, it should be something like this:
this.setState(oldState => {
const newMakers = [...oldState.makers];
const modifiedElement = newMakers[i];
modifiedElement.lat = lati;
modifiedElement.lng = lngi;
return { ...oldState, makers: [...newMakers] };
});
I want to display all the coordinates at the same time received via MQTT, but currently the code only displays the newest latitude and longitude pair. Does anyone have any advice?
constructor(props) {
super(props);
this.state = {
coordinates: [
{latitude: 0, longitude: 0}
]
};
};
componentDidMount() {
client.on('connect', () => {
client.subscribe('topic');
});
client.on('message', (_topic, message) => {
var parsedBody = JSON.parse(message.toString());
var mqttLat = parsedBody["latitude"];
var mqttLong = parsedBody["longitude"];
this.setState({
coordinates: [
{latitude: mqttLat, longitude: mqttLong}
]
});
});
};
<View>
<MapView>
{this.state.coordinates.map((marker, i) => (
<Marker
key = {i}
coordinate = {{
latitude: marker.latitude,
longitude: marker.longitude
}}>
</Marker>
))}
</MapView>
</View>
I guess that the problem is with the way you save your coordinates in the state. If you want to keep more coordinates than just one, push them to the coordinates array instead of overriding previous one.
client.on('connect', () => {
client.subscribe('topic');
});
client.on('message', (_topic, message) => {
var parsedBody = JSON.parse(message.toString());
var mqttLat = parsedBody["latitude"];
var mqttLong = parsedBody["longitude"];
this.setState({
coordinates: [
...this.state.coordinates,
{latitude: mqttLat, longitude: mqttLong}
]
});
});
};```
I have a screen that loads and places markers on a map based on a search form in the previous screen. I want the map window to also centre itself in the middle of all the markers. So when I use initialRegion, I set the latitude and longitude to state values whose states are set after fetching JSON from a URL. The lat and long are set to values at the centre of the markers. I want the map window to go to these coordinates, but instead, I get an error when the screen loads.
Here is the code:
import React, { Component } from 'react';
import { View, Text, AsyncStorage, Alert, FlatList, StyleSheet } from 'react-native';
import { PrimaryButton } from '../Buttons';
import styles from './styles';
import { ListItem } from '../ListItem';
import MapView, { Marker } from 'react-native-maps';
class RestOptions extends Component {
constructor() {
super();
this.state = {
jsonResults: [],
userPlaces: [],
lat_center: null,
lng_center: null
}
}
renderItem = ({ item }) => {
return (
<View>
<Text>{item.rest_name}</Text>
<Text>{item.counter}</Text>
<Text>Distance: {item.distance} Miles</Text>
<PrimaryButton
label="Set Reservation"
onPress={() => this.setReservation(item.rest_id)}
/>
</View>
)
}
componentDidMount() {
this.getSearchResults();
}
getSearchResults() {
fetch('fetch url here')
.then((response) => response.json())
.then((responseJson) => {
var placesArray = [];
var latArray = [];
var lngArray = [];
for (key = 0; key < responseJson.rest_array.length; key = key + 1) {
var lati_str = responseJson.rest_array[key].lat;
var long_str = responseJson.rest_array[key].lng;
var count_str = responseJson.rest_array[key].counter;
var lati = parseFloat(lati_str);
var long = parseFloat(long_str);
var count = parseFloat(count_str);
latArray.push(lati);
lngArray.push(long);
placesArray.push ({
coordinates: {
latitude: lati,
longitude: long
},
id: count
});
}
var max_lat = Math.max.apply(null, latArray);
var min_lat = Math.min.apply(null, latArray);
var max_lng = Math.max.apply(null, lngArray);
var min_lng = Math.min.apply(null, lngArray);
var latCenter = (max_lat + min_lat) / 2;
var lngCenter = (max_lng + min_lng) / 2;
this.setState({lat_center: latCenter}); //setting latitude state here
this.setState({lng_center: lngCenter}); //setting longitude state here
this.setState({userPlaces: placesArray});
this.setState({jsonResults: responseJson.rest_array});
}).catch((error) => {
console.error(error);
});
}
setReservation(rest_id) {
Alert.alert(rest_id);
//this.props.navigation.navigate('SetReservation');
}
render() {
return (
<View>
<View style={mapStyles.mapContainer}>
<MapView
style={mapStyles.map}
initialRegion={{
latitude: this.state.lat_center, //using latitude state here
longitude: this.state.lng_center, //using longitude state here
latitudeDelta: 0.1022,
longitudeDelta: 0.0821
}}
>
{this.state.userPlaces.map(userPlace => (
<MapView.Marker
coordinate={userPlace.coordinates}
key={userPlace.id}
/>
))}
</MapView>
</View>
<FlatList
data={this.state.jsonResults}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
};
const mapStyles = StyleSheet.create({
mapContainer: {
width: '100%',
height: 200,
},
map: {
width: '100%',
height: '100%',
},
});
export default RestOptions;
I get this error:
And this warning:
I have already verified that the lat_center and lng_center successfully change state to the appropriate coordinates.
It’s probably because your initial values for the lat_center and lng_center are null in your state object in the constructor.
compondentDidMount gets called after the initial render.
https://reactjs.org/docs/react-component.html#mounting
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
This means that for a moment in time the values of your latitude and longitude will be null leading to these errors. You either need to set an initial value that is not null or not render your map until the coordinates have need set.
Also those 4 setState calls could be reduced to one, in something like this.
this.setState({
lat_center: latCenter,
lng_center: lngCenter,
userPlaces: placesArray,
jsonResults: responseJson.rest_array
});
I'm trying to display location coordinates (of vehicles) on a map with data that I'm fetching every 3 seconds. Every time I fetch the data (array of objects with attribute "Longitude" and "Latitude"), the state will update and I want to update the "markers" on a map to reflect the vehicles' latest positions.
I know I'm fetching the data but the markers are not showing up. Is there something wrong with the way I loop?
class Mapbox extends Component {
constructor(props){
super(props)
this.state = {
active_vehicles: {},
};
}
componentDidMount() {
this.interval = setInterval(() => this.fetchData(), 3000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
fetchData = async () => {
let url = `${request_url}`
const response = await fetch(url, {
method: "GET",
headers: {
"Accept": "application/json",
}
});
const body = await response.json()
this.setState({ active_vehicles: body })
}
createMarkers = () => {
let markers = []
if(this.state.active_vehicles){
for (let i = 0; i < this.state.active_vehicles.length; i++) {
markers.push(
<Marker latitude={this.state.active_vehicles[i]["Latitude"]} longitude={this.state.active_vehicles[i]["Longitude"]}>
<div>x</div>
</Marker>
)
}
return markers
}
}
render() {
return (
<ReactMapGL
// mapbox API access token
mapboxApiAccessToken={MAPBOX_TOKEN}
mapStyle="mapbox://styles/mapbox/dark-v9"
{...this.state.viewport}
onViewportChange={(viewport) => this.setState({viewport})}>
<div>
{this.createMarkers()}
</div>
</ReactMapGL>
);
}
}
Correct this.active_vehicles to this.state.active_vehicles (OP has corrected after I posted my comment)
Add key attribute to the Marker component inside the for loop: <Maker key={i} ...
I am new to react-leaflet. Need little help to fix my issue. Follow up with Previous post
I have textfield which filter data. I was able to filter data in the table but not able to filter the data in the map.
For example: if I search for name: 'VaiBike' it should show in table and marker in the map. Note: only show the data which is filter in map as well as in the table. so does for the other data.
How can I change my code so that I can show marker and data in table at the same time.
Running code
import React, { Component } from 'react'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet'
import './style.css'
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import icon from 'leaflet/dist/images/marker-icon.png'
import iconShadow from 'leaflet/dist/images/marker-shadow.png'
import TextField from '#material-ui/core/TextField'
// Import React Table
import ReactTable from 'react-table'
import 'react-table/react-table.css'
import matchSorter from 'match-sorter'
var myIcon = L.icon({
iconUrl:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=',
iconSize: [25, 41],
iconAnchor: [12.5, 41],
popupAnchor: [0, -41],
})
let DefaultIcon = L.icon({
iconUrl: icon,
shadowUrl: iconShadow,
})
L.Marker.prototype.options.icon = DefaultIcon
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
location: {
lat: 51.505,
lng: -0.09,
filterAll: '',
},
bikeData: [],
haveUsersLocation: false,
zoom: 3,
}
}
//lifecycle method to get the bike information
componentDidMount() {
fetch('https://api.citybik.es/v2/networks')
.catch(error => {
console.log(error)
})
.then(res => res.json())
.then(response => {
const networkData = response.networks
this.setState({
bikeData: networkData,
})
})
}
filterAll = e => {
const { value } = e.target
const filterAll = value
const filtered = [{ id: 'all', value: filterAll }]
const filterdMap =[{id:'bikeData', value: filterAll}]
this.setState({ filterAll, filtered ,filterdMap})
}
render() {
const position = [this.state.location.lat, this.state.location.lng]
const bikeData = this.state.bikeData
return (
<div
style={{
height: '100vh',
}}
id="map"
>
<div align="right">
<form noValidate autoComplete="off">
<TextField
id="row"
label="Search Bike"
margin="normal"
value={this.state.filterAll}
onChange={this.filterAll}
/>
</form>
</div>
<Map className="map" center={position} zoom={this.state.zoom}>
<TileLayer
attribution="© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{bikeData &&
bikeData.map(data => {
console.log(data)
return (
<Marker
icon={myIcon}
key={data.id}
position={[data.location.latitude, data.location.longitude]}
>
<Popup>
Name: {data.name} <br />
Station Details:{' '}
{[data.location.city, data.location.country]}
</Popup>
</Marker>
)
})}
</Map>
<div>
<ReactTable
filtered={this.state.filtered}
defaultFilterMethod={(filter, row) =>
String(row[filter.id]) === filter.value
}
data={bikeData}
columns={[
{
columns: [
{
Header: ' Name',
accessor: 'name',
filterAll: true,
},
{
Header: '',
id: 'all',
width: 0,
resizable: false,
sortable: false,
Filter: () => {},
getProps: () => {
return {}
},
filterMethod: (filter, rows) => {
const result = matchSorter(rows, filter.value, {
keys: ['name'],
threshold: matchSorter.rankings.WORD_STARTS_WITH,
})
return result
},
filterAll: true,
},
],
},
]}
defaultPageSize={10}
/>
<br />
</div>
</div>
)
}
}
Help with running code highly appreciated.
Thanks in advance.
If I understand your question correctly, you'll need to make a few adjustments to your code. First, add state to track the "filtered bike data" (ie the data that is visible to users in the UI). You can do so by adding something like this in your constructor:
constructor(props) {
super(props)
this.state = {
location: {
lat: 51.505,
lng: -0.09,
filterAll: '',
},
bikeData: [],
filteredBikeData : [], // Add this
haveUsersLocation: false,
zoom: 3,
}
}
Now, in you filterAll all text field change handler, you'll want to update the filteredBikeData state based on the current field value. You can do so with something as follows:
filterAll = e => {
const { value } = e.target
// Get a filtered list of bikes based on original list
const filteredBikes = this.state.bikeData.filter(bike => {
// Filter bikes by name. Use toLowerCase to avoid case sensitivity issues
return bike.name.toLowerCase().indexOf(value.toLowerCase()) !== -1
})
const filterAll = value
const filtered = [{ id: 'all', value: filterAll }]
const filterdMap =[{id:'bikeData', value: filterAll}]
// Update state to include filtered bikes array
this.setState({ filterAll, filtered ,filterdMap, filteredBikes})
}
Finally, you'll want to render markers based on the filtered array of bikes - update your render method like so:
{ /* use filteredBikes instead of bikes */
{ this.state.filteredBikes && this.state.filteredBikes.map(data => {
console.log(data)
return (
<Marker
icon={myIcon}
key={data.id}
position={[data.location.latitude, data.location.longitude]}
>
<Popup>
Name: {data.name} <br />
Station Details:{' '}
{[data.location.city, data.location.country]}
</Popup>
</Marker>
)
})}
As an extra, you might also want to default the value of filteredBikes to the response that you get from the server, so that the user initially sees something on screen:
componentDidMount() {
fetch('https://api.citybik.es/v2/networks')
.catch(error => {
console.log(error)
})
.then(res => res.json())
.then(response => {
const networkData = response.networks
this.setState({
bikeData: networkData,
filteredBikeData : networkData // Add this
})
})
}