Get coordinate index from array on GeoJSON data in Leaflet

geojsonleaflet

I have GeoJSON data with linestring feature type. I will display this data using L.geoJson() function. The data has properties of rotation for each coordinate. I want to create a marker with that rotation properties for each coordinates. This is my GeoJSON data.

{
    "type": "Feature",
    "properties": {
        "name": "Track of bus 699",
        "times": [
            "2019-11-23 10:51:06",
            "2019-11-23 10:52:05",
            "2019-11-23 10:53:05",
            "2019-11-23 10:54:04",
            "2019-11-23 10:55:05",
            "2019-11-23 10:56:05",
            "2019-11-23 10:57:05",
            "2019-11-23 10:58:05",
            "2019-11-23 10:59:05",
            "2019-11-23 11:00:06"
        ],
        "rotation": [
            0,
            0,
            15,
            15,
            20,
            25,
            35,
            45,
            55,
            60
        ]
    },
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [
                -4.4214296,
                36.73835
            ],
            [
                -4.422104,
                36.737865
            ],
            [
                -4.4229302,
                36.73773
            ],
            [
                -4.4235334,
                36.735817
            ],
            [
                -4.4222927,
                36.73413
            ],
            [
                -4.4218254,
                36.732475
            ],
            [
                -4.4213734,
                36.72983
            ],
            [
                -4.420156,
                36.73
            ],
            [
                -4.419239,
                36.730686
            ],
            [
                -4.417272,
                36.732136
            ]
        ]
    }
}

I'm confused how to get the index of each coordinate so that I can get rotation data based on that index.

This is my code. I used Leaflet.RotatedMarker plugin for rotate the marker

var layer = L.geoJson(data, {
            pointToLayer: function (feature, latLng) {
                    return new L.marker(latLng, {
                        icon: icon,
                        rotationAngle: feature.properties.rotation[index]
                    });
            }
        });

I have tried using Array.findIndex() and return the index if it has the same latitude and longitude coordinate, but there's a possibility that the data have the same coordinate with different rotation.

And I have tried using loop as well, but it doesn't solve my problem.

Best Answer

You can see a working solution at http://bl.ocks.org/ThomasG77/a645c021f4872350f7fcb2e233f59a49

The two main things I do.

Adding the linestring

L.geoJSON(data).addTo(map);

Loop on each coordinate of each linestring, get their index and reuse the index for creating markers with rotation. You could also set properties

data.features.forEach((feature) => {
    feature.geometry.coordinates.forEach((coord, index) => {
        console.log(index, coord);
        new L.marker([coord[1], coord[0]], {
            icon: redIcon,
            rotationAngle: feature.properties.rotation[index]
        }).addTo(map)
    })
})

Beware that if you use labels, they may rotate with the markers as tested with:

data.features.forEach((feature) => {
    feature.geometry.coordinates.forEach((coord, index) => {
        console.log(index, coord);
        new L.marker([coord[1], coord[0]], {
            icon: new L.DivIcon({
                className: 'my-div-icon',
                html: '<img class="my-div-image" src="https://leafletjs.com/examples/custom-icons/leaf-red.png"/>'+
                      '<span class="my-div-span">' + feature.properties.times[index] + '</span>'
            }),
            rotationAngle: feature.properties.rotation[index]
        }).addTo(map)
    })
})
Related Question