ngageoint / geoq

Django web application to collect geospatial features and manage feature collection among groups of users
MIT License
704 stars 133 forks source link

LineStrings generated from geojson files show up as white lines on top of white roads #358

Closed codewithtyler closed 8 years ago

codewithtyler commented 8 years ago

While using GeoQ during the GEOHackHSV hackathon event we attempted to plot some linestrings using the geojson files below. However, the map used by geojson has white roads and the LineString being generated is also white. This makes it really hard to see the line. We tried to change the line color to red, but the the line was generated it showed up as blue. The next time we tried loading the map the line turned white again. We were never able to figure out how to get the line to stay the color we wanted.

First geojson file

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "GeoHackHSV Roasted Pickles",
        "amenity": "Ambulance from Huntsville Hospital"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -86.58183,
            34.72114
          ],
          [
            -86.5815,
            34.72122
          ],
          [
            -86.5815,
            34.72122
          ],
          [
            -86.58174,
            34.72157
          ],
          [
            -86.58207,
            34.72207
          ],
          [
            -86.58257,
            34.72285
          ],
          [
            -86.58274,
            34.72314
          ],
          [
            -86.58288,
            34.7234
          ],
          [
            -86.58295,
            34.72355
          ],
          [
            -86.58307,
            34.7238
          ],
          [
            -86.58323,
            34.72414
          ],
          [
            -86.58336,
            34.72446
          ],
          [
            -86.58349,
            34.72466
          ],
          [
            -86.58363,
            34.72485
          ],
          [
            -86.58382,
            34.725
          ],
          [
            -86.58404,
            34.72519
          ],
          [
            -86.58484,
            34.72569
          ],
          [
            -86.58487,
            34.72571
          ],
          [
            -86.58501,
            34.72581
          ],
          [
            -86.58518,
            34.72592
          ],
          [
            -86.58552,
            34.72617
          ],
          [
            -86.58572,
            34.72637
          ],
          [
            -86.58597,
            34.72659
          ],
          [
            -86.58597,
            34.72659
          ],
          [
            -86.58608,
            34.72669
          ],
          [
            -86.58623,
            34.72688
          ],
          [
            -86.58645,
            34.72721
          ],
          [
            -86.58653,
            34.72731
          ],
          [
            -86.58694,
            34.72785
          ],
          [
            -86.58708,
            34.72803
          ],
          [
            -86.58729,
            34.72834
          ],
          [
            -86.58775,
            34.729
          ],
          [
            -86.58816,
            34.7296
          ],
          [
            -86.58825,
            34.72974
          ],
          [
            -86.58839,
            34.72992
          ],
          [
            -86.58839,
            34.72992
          ],
          [
            -86.58841,
            34.73011
          ],
          [
            -86.58836,
            34.7303
          ],
          [
            -86.58826,
            34.73036
          ],
          [
            -86.5876,
            34.73072
          ],
          [
            -86.58658,
            34.73125
          ],
          [
            -86.58658,
            34.73125
          ],
          [
            -86.58639,
            34.731
          ],
          [
            -86.58611,
            34.7306
          ],
          [
            -86.58604,
            34.73051
          ],
          [
            -86.58599,
            34.73044
          ],
          [
            -86.58595,
            34.7304
          ],
          [
            -86.58595,
            34.7304
          ],
          [
            -86.58589,
            34.73035
          ],
          [
            -86.58588,
            34.73034
          ]
        ]
      }
    }
  ]
}

2nd geojson file

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "GeoHackHSV Roasted Pickles",
        "amenity": "Police Car 1 from Police HQ"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -86.58183,
            34.72114
          ],
          [
            -86.5815,
            34.72122
          ],
          [
            -86.5815,
            34.72122
          ],
          [
            -86.58174,
            34.72157
          ],
          [
            -86.58207,
            34.72207
          ],
          [
            -86.58257,
            34.72285
          ],
          [
            -86.58274,
            34.72314
          ],
          [
            -86.58288,
            34.7234
          ],
          [
            -86.58295,
            34.72355
          ],
          [
            -86.58307,
            34.7238
          ],
          [
            -86.58323,
            34.72414
          ],
          [
            -86.58336,
            34.72446
          ],
          [
            -86.58349,
            34.72466
          ],
          [
            -86.58363,
            34.72485
          ],
          [
            -86.58382,
            34.725
          ],
          [
            -86.58404,
            34.72519
          ],
          [
            -86.58484,
            34.72569
          ],
          [
            -86.58487,
            34.72571
          ],
          [
            -86.58501,
            34.72581
          ],
          [
            -86.58518,
            34.72592
          ],
          [
            -86.58552,
            34.72617
          ],
          [
            -86.58572,
            34.72637
          ],
          [
            -86.58597,
            34.72659
          ],
          [
            -86.58597,
            34.72659
          ],
          [
            -86.58608,
            34.72669
          ],
          [
            -86.58623,
            34.72688
          ],
          [
            -86.58645,
            34.72721
          ],
          [
            -86.58653,
            34.72731
          ],
          [
            -86.58694,
            34.72785
          ],
          [
            -86.58708,
            34.72803
          ],
          [
            -86.58729,
            34.72834
          ],
          [
            -86.58775,
            34.729
          ],
          [
            -86.58816,
            34.7296
          ],
          [
            -86.58825,
            34.72974
          ],
          [
            -86.58839,
            34.72992
          ],
          [
            -86.58839,
            34.72992
          ],
          [
            -86.58841,
            34.73011
          ],
          [
            -86.58836,
            34.7303
          ],
          [
            -86.58826,
            34.73036
          ],
          [
            -86.5876,
            34.73072
          ],
          [
            -86.58658,
            34.73125
          ],
          [
            -86.58658,
            34.73125
          ],
          [
            -86.58639,
            34.731
          ],
          [
            -86.58611,
            34.7306
          ],
          [
            -86.58604,
            34.73051
          ],
          [
            -86.58599,
            34.73044
          ],
          [
            -86.58595,
            34.7304
          ],
          [
            -86.58595,
            34.7304
          ],
          [
            -86.58589,
            34.73035
          ],
          [
            -86.58588,
            34.73034
          ]
        ]
      }
    }
  ]
}

3rd geojson file

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "GeoHackHSV Roasted Pickles",
        "amenity": "Fire Station 1"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            -86.56547,
            34.73651            
          ],
          [
            -86.56671,
            34.73653
          ],
          [
            -86.56714,
            34.73653            
          ],
          [
            -86.56798,
            34.73654            
          ],
          [
            -86.56854,
            34.73655            
          ],
          [
            -86.56927,
            34.73657            
          ],
          [
            -86.56967,
            34.73657
          ],
          [
            -86.57051,
            34.73658            
          ],
          [
            -86.57082,
            34.73659            
          ],
          [
            -86.57178,
            34.73659            
          ],
          [
            -86.57304,
            34.73662            
          ],
          [
            -86.5743,
            34.73664            
          ],
          [
            -86.57556,
            34.73664            
          ],
          [
            -86.57579,
            34.73665
          ],
          [
            -86.57609,
            34.73666            
          ],
          [
            -86.57625,
            34.73665            
          ],
          [
            -86.57628,
            34.73665            
          ],
          [
            -86.57631,
            34.73664            
          ],
          [
            -86.57639,
            34.7366            
          ],
          [
            -86.57822,
            34.73567            
          ],
          [
            -86.57958,
            34.7349            
          ],
          [
            -86.58031,
            34.73451            
          ],
          [
            -86.58123,
            34.73402            
          ],
          [
            -86.58151,
            34.73387            
          ],
          [
            -86.58178,
            34.73372            
          ],
          [
            -86.58258,
            34.7333
          ],
          [
            -86.58277,
            34.7332
          ],
          [
            -86.58309,
            34.73303            
          ],
          [
            -86.58319,
            34.73297            
          ],
          [
            -86.58351,
            34.73284            
          ],
          [
            -86.58376,
            34.73273            
          ],
          [
            -86.58378,
            34.73272            
          ],
          [
            -86.58412,
            34.73254            
          ],
          [
            -86.58452,
            34.73233            
          ],
          [
            -86.58452,
            34.73233            
          ],
          [
            -86.58412,
            34.73182            
          ],
          [
            -86.58385,
            34.73147            
          ],
          [
            -86.58385,
            34.73147            
          ],
          [
            -86.58402,
            34.73139            
          ],
          [
            -86.58466,
            34.73107            
          ],
          [
            -86.5849,
            34.73093
          ],
          [
            -86.5849,
            34.73093            
          ],
          [
            -86.58505,
            34.73082            
          ],
          [
            -86.58514,
            34.73076            
          ],
          [
            -86.58524,
            34.73069            
          ],
          [
            -86.5854,
            34.73062            
          ],
          [
            -86.58566,
            34.73052            
          ],
          [
            -86.58575,
            34.73049            
          ],
          [
            -86.5858,
            34.73047            
          ],
          [
            -86.58584,
            34.73045            
          ],
          [
            -86.5859,
            34.73043            
          ],
          [
            -86.58595,
            34.7304            
          ],
          [
            -86.58595,
            34.7304            
          ],
          [
            -86.58589,
            34.73035            
          ],
          [
            -86.58588,
            34.73034            
          ]
        ]
      }
    }
  ]
}
stephenrjones commented 8 years ago

So the way we allow styling for any GeoJSON file is to add specific style parameters when you define the layer in GeoQ. When defining a GeoJSON layer using the 'Add Layer' function, after adding the name, type, and url in the web page, select the "extended form options" and go down to the "Layer params" text entry area. This area allows the entry of a json object describing the layer, including style. So for example, to style a line, add the following to the Layer params area:

{ "style" : { "color" : "blue", "weight" : 2, "opacity" : 0.5 } }

codewithtyler commented 8 years ago

@mjcarroll is this what you did when you tried to change the color of the line?

mjcarroll commented 8 years ago

I'm pretty sure that this is what I tried. When I styled the line to "red", it actually showed as "blue". I can take another look at the JSON files I was using and report back.