CODEWITHSUNDEEP
javascriptreactjsreact-leaflet
Vadim Novozhilov
Vadim Novozhilov

Reputation: 855

React-Leaflet, supply position from state

I have following code:

import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
        coordinates: []
    }
  }
}
componentDidMount() {
    // code to populate coordinates state
}
render() {
    const position = [50, 100]
    return (
        <div className="container">
            <Map center={position} zoom={13}>
            <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
          <Marker position={position}>
              <Popup>
                  <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
              </Popup>
          </Marker>
       </Map>
     </div>
    )
}

This map displays correctly unless I try to use coordinates from my state. State's output looks like this:

["86.765", "29.724999999999998", "0", "86.765", "29.724999999999998", "0"]

How would I pass this data to position variable and make use of it? What I tried for now: I defined two other states - lat and lng with corresponding values from server, and did map on these states to extract desired values like this:

let latVal = this.state.lat.map(latItem => {
    return latItem;
}
let lngVal = this.state.lng.map(lngItem => {
    return lngItem;
}

but when I pass it to position like let position = [latVal, lngVal] variable I get an error saying that my latVal is null, but I can console.log both values (latVal and lngVal) in render() function, in this case the output looks like this: 90.7250000000000128.105090.1649999999999929.555000000000003088.233 which I think causes an error and I'm not sure how should I transform this data to make it work. Thanks in advance!

UPD I managed to change latVal and lngVal output and my new code looks like this:

let arr = []
let latVal = this.state.lat.map(k => {
  arr.push(k + ' ');
})
let lngVal = this.state.lon.map(i => {
  arr.push(i + ' ');
})

const position = [50, 100];
let newArr = position.concat(arr);

But still no luck.

Upvotes: 0

Views: 1458

Answers (1)

Alex Parij
Alex Parij

Reputation: 1286

Here is a proper map over arrays that should give you want you need - an array of pairs from two states

this.state.lat.map((value,index)=>[value,this.state.lon[index]])

Upvotes: 2

Related Questions