Search code examples
javascriptgeometrygeojsongeo

GeoJson LineString Feature Collection with holes

I have a long list of coordinates (sent by a GPS sensor) that represent the movement of an asset.

I'm using leaflet to render the GeoJSON and it works fine if I render the LineString as a single feature, but if I break it down into multiple features (inside a FeatureCollection - to apply a different dynamic color) I start to see "holes" between features.

enter image description here

I'm pretty sure that this is due to the fact that there is actually a "hole" in the data I'm receiving. But why it works as a single LineString feature? Is there a way to fix this?

This is an extract of the GeoJSON (very large object)

there are 3 of the 866 features of the object

{
          "type":"Feature",
          "properties":{
             "type":"traffic",
             "color":"#ffa600"
          },
          "geometry":{
             "type":"LineString",
             "coordinates":[
                [
                   7.583125,
                   45.0485616
                ],
                [
                   7.5830532999999996,
                   45.0485816
                ],
                [
                   7.58299,
                   45.0486133
                ],
                [
                   7.582893299999999,
                   45.0486066
                ],
                [
                   7.5828682999999995,
                   45.04859
                ]
             ]
          }
       },

link to bin

https://jsbin.com/nexijajake/edit?html,output

example with single feature

https://jsbin.com/guqihajalu/1/edit?html,output

Solution

  • Actually, there is nothing wrong with rendering. Your data array (in your jsbin link) is an array of linestrings that are not connected with each other. You got a schema like this (imagine each row is a linestring):

    [pointA-pointB-pointC]

    [pointD-pointE-pointF]

    In order for your line to be continuous, the last point of each linestring should exist in the next linestring as first point:

    [pointA-pointB-pointC]

    [pointC-pointD-pointE-pointF]

    This way, your line will be continuous.

    For example, the following sample (taken from your jsbin) has a gap:

    const data = [
   {
      "type":"Feature",
      "properties":{
         "type":"traffic",
         "color":"#ffa600"
      },
      "geometry":{
         "type":"LineString",
         "coordinates":[
            [
               7.583125,
               45.0485616
            ],
            [
               7.5830532999999996,
               45.0485816
            ],
            [
               7.58299,
               45.0486133
            ],
            [
               7.582893299999999,
               45.0486066
            ],
            [
               7.5828682999999995,
               45.04859
            ]
         ]
      }
   },
   {
      "type":"Feature",
      "properties":{
         "type":"normal",
         "color":"#07e36a"
      },
      "geometry":{
         "type":"LineString",
         "coordinates":[
            [
               7.582795,
               45.0485149
            ],
            [
               7.582624999999999,
               45.0483233
            ],
            [
               7.581984899999999,
               45.047521599999996
            ]
         ]
      }
   }
];

    The gap is fixed (the first point of the second linestring is the last point of the first linestring):

    const data = [
   {
      "type":"Feature",
      "properties":{
         "type":"traffic",
         "color":"#ffa600"
      },
      "geometry":{
         "type":"LineString",
         "coordinates":[
            [
               7.583125,
               45.0485616
            ],
            [
               7.5830532999999996,
               45.0485816
            ],
            [
               7.58299,
               45.0486133
            ],
            [
               7.582893299999999,
               45.0486066
            ],
            [
               7.5828682999999995,
               45.04859
            ]
         ]
      }
   },
   {
      "type":"Feature",
      "properties":{
         "type":"normal",
         "color":"#07e36a"
      },
      "geometry":{
         "type":"LineString",
         "coordinates":[
            //the first point here is the last of previous linestring
            [
               7.5828682999999995,
               45.04859
            ],
            [
               7.582795,
               45.0485149
            ],
            [
               7.582624999999999,
               45.0483233
            ],
            [
               7.581984899999999,
               45.047521599999996
            ]
         ]
      }
   }
];