CODEWITHSUNDEEP
leafletpointgeojsonmarkerpolyline
Eugen Steinepress
Eugen Steinepress

Reputation: 21

Connect 2 or more markers in the leaflet with coordinates from GeoJSON

I have to draw a line between 2 or more points (markers). The coordinates are in a GeoJSON file (attached). I tried to make an assignment for the properties: these are "node worker" a point of "Master" and the other and "knot workers" with connecting the "master". but has not worked and that's why I need your help ... How can I implement it?

{"type": "FeatureCollection", "features": [
{"type": "Feature","properties": {"id":"1","name":"Berlin","wert":"","pc":"master"},"geometry": {"type": "Point","coordinates": [13.523563700000068,52.4909447]}},
{"type": "Feature","properties": {"id":"2","name":"Hamburg","wert":"0","pc":"wn"},"geometry": {"type": "Point","coordinates": [9.99368179999999,53.5510846]}},
{"type": "Feature","properties": {"id":"3","name":"München","wert":"128","pc":"wn"},"geometry": {"type": "Point","coordinates": [11.581980599999952,48.1351253]}},
{"type": "Feature","properties": {"id":"4","name":"Frankfurt am Main","wert":"-128","pc":"wn"},"geometry": {"type": "Point","coordinates": [8.682126700000026,50.1109221]}}
]}

Upvotes: 0

Views: 2162

Answers (1)

iH8
iH8

Reputation: 28688

Add LineString features to your featurecollection: http://geojson.org/geojson-spec.html#id3 Leaflet's L.GeoJSON layer will convert them to Polylines: http://leafletjs.com/reference.html#polyline

If changing your GeoJSON file isn't an option. You could write logic which loops over the features in your layer, then separate the master and clients and then draw polylines between them.

After comment:

You've supplied a GeoJSON with the coordinates of the master PC. 13.523563700000068,52.4909447 You want to connect it via Polyline with a client PC. I'll pick the coordinates of the first one: 9.99368179999999,53.5510846. So you add another feature to your GeoJSON collection, a polyline:

{
    "type": "Feature",
    "geometry": {
        "type": "LineString",
        "coordinates": [
            [13.523563700000068,52.4909447], // Master PC coordinates
            [9.99368179999999,53.5510846] // WN1 Coordinates
        ]
    },
    "properties": {
        "label": "From Master to First client"
    }
}

And you're gold. Here's a working example: http://plnkr.co/edit/Ndasgy?p=preview

Upvotes: 1

Related Questions