0

I m trying to put location data from backend in react-map-gl, I have a small obstacle about it.

    addLines = () => {
    const geo = this.state.geo;
    const insideGeo = geo.map(dataItem => {
        const json = new Buffer(dataItem.payload, "hex").toString();
        if (json !== '')
            return JSON.parse(json);
        return json;
    }).filter(item => (item !== ''));
    const lat = insideGeo.map(item => item.eventData.location.latitude);
    const lon = insideGeo.map(item => item.eventData.location.longitude);
    console.log('Lat:', lat[4]);
    console.log('Lon:', lon[4]);
    const map = this.refs.map.getMap()
    map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [
                            lon[4], lat[4]
                        ],
                        [
                            lon[5], lat[5]
                        ],
                    ]
                }
            }
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#18c3ea",
            "line-width": 3
        }
    });
}

Its screen of console log lon and lat I want to put whole coordinate like this it: {lon} {lat}

It working if I will put only together specific number.

How to pass it?

Thanks

makho
  • 1
  • 2

1 Answers1

0

Based on your code, it seems to work.

The Array approach:

Replace the following lines:

const lat = insideGeo.map(item => item.eventData.location.latitude);
const lon = insideGeo.map(item => item.eventData.location.longitude);

With:

const coords = insideGeo.map(item => [item.eventData.location.latitude, item.eventData.location.longitude]);

You can access the numbers like this:

const lat = coords[index][0]
const lon = coords[index][1]

The Object approach:

Replace the following lines:

const lat = insideGeo.map(item => item.eventData.location.latitude);
const lon = insideGeo.map(item => item.eventData.location.longitude);

With:

const coords = insideGeo.map(item => item.eventData.location);

You can access the numbers like this:

const lat = coords[index].latitude
const lon = coords[index].longitude
Community
  • 1
  • 1
Raphael Parreira
  • 468
  • 4
  • 14
  • Its given also altitude 0: {latitude: 19.43075, longitude: -98.0992, altitude: 9} "coordinates": [ [ lon[4], lat[4] ], ] its working if we will put minimum two coordinates like it: 47.836119, 28.992924 "coordinates": [ [ 47.836119, 28.992924 ], [ 44.836119, 21.992924 ], ] – makho Dec 10 '18 at 17:22
  • Then it will give us a line between these two coordinates. I want do same and get line between 57 coordinates. – makho Dec 10 '18 at 17:23
  • I edited inserting an array approach, is that what do you want? – Raphael Parreira Dec 10 '18 at 17:28