1

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.

1
  • surely you need to look up the time you need and use that index for the rotation
    – Ian Turton
    Commented Oct 28, 2021 at 15:28

1 Answer 1

3

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)
    })
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.