Geojson example not displayed with custom maptiles & custom geojson data (points, polygons)

[tomsiwik]

I can get the example working from the examples folder. However i have tried everything with my custom data (even truncated to a minimum of 2 points with precision of 7)... and still I'm unable to display 2 simple points on the map. Am i missing something? I have looked around everywhere in the code, readme and docs i could find. Maybe i'm just blind.

Can somebody help with this?

These are the modifications i made. Changing viewport and data inside geojson of the default example doesn't work either though. No errors in the console either.

GeoJSON.js:

export default class GeoJSON extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data:{
        "type":"FeatureCollection",
        "features":[
          {"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[50.863842,6.4316431]}},
          {"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[50.863842,6.4316437]}},
          {"type":"Feature","properties":{},"geometry":{  
              "type":"MultiPoint",
              "coordinates":[  
                [  
                  50.8638,
                  6.43164
                ],
                [  
                  50.8638,
                  6.43165
                ],
                [  
                  50.8638,
                  6.43166
                ],
                [  
                  50.8639,
                  6.43165
                ]
              ]
            }
          }]
        },
      viewport: this.props.viewport
    };
  }

  render() {
    const {data, viewport} = this.state;

    const layer = new GeoJsonLayer({
      id: 'geojson-layer',
      data,
      opacity: 0.8,
      stroked: false,
      filled: true,
      extruded: false,
      wireframe: false,
      fp64: true,
      getFillColor: f => [255, 0, 0]
    });

    return (
      <DeckGL
          {...viewport}
          layers={[layer]}
          width={this.props.width}
          height={this.props.height}
      />
    );
  }
}

Map.js

class Map extends Component {
  _resize() {
    this._onChangeViewport({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }

  _onChangeViewport(viewport) {
    this.setState({
      viewport: {...this.state.viewport, ...viewport}
    });
  }

  constructor(props) {
    super(props);

    this.state = {
      viewport: {
        latitude: 50.863843,
        longitude: 6.4316438,

        zoom: 18,
        bearing: 0,
        pitch: 30,
        width: 500,
        height: 500
      }
    };
  }

  componentDidMount() {
    window.addEventListener('resize', this._resize.bind(this));
    this._resize();
  }

  render() {
    const width = this.props.containerWidth
    const height = this.props.containerHeight

    const {viewport} = this.state;

    return (
      <MapGL
        {...viewport}
        mapStyle="<custom map of germany with tileserver-gl>"
        width={width} 
        height={height}
        onChangeViewport={this._onChangeViewport.bind(this)}
        perspectiveEnabled={true}>
        <GeoJSON viewport={viewport}
            width={width} 
            height={height} />
      </MapGL>
    );
  }
}

[ibgreen]

@tomsiwik Have you tried {"type":"Point","geometry": {"coordinates":[50.863843, 6.4316432]}}?

[tomsiwik]

Thanks @ibgreen. Doesn't do it though. I noticed a warning just now:

Error: GeoJsonLayer: undefined not supported

I've modified my first post with 'correct' data, the error is gone, however the points are not displayed again. In the previous example turf removed the Feature type, that's why the error. Sadly still no success in displaying anything.

DeckGL layer has all it's pointFeatures :/

MultiPoints and Polygons don't seem to work either. Is Deck.gl / MapGL dependant on the style of the tiles? Do i need to setup something specific (tileserver-gl)?

[ibgreen]

@tomsiwik - I was able to show your data. The example depends on the properties field being populated, the "accessors" supplied to the GeoJsonLayer reference it to extract colors and other attributes.

    {"type": "Feature", "geometry": {"type": "Point", "coordinates": [50.863843, 6.4316432]}, "properties": {"valuePerSqm":4563,"growth":0.3592}},
    {"type": "Feature", "geometry": {"type": "Point", "coordinates": [50.863843, 6.4316438]}, "properties": {"valuePerSqm":4563,"growth":0.3592}}
...
 constructor(props) {
    super(props);
    this.state = {
      viewport: {
        ...DeckGLOverlay.defaultViewport,
        longitude: 50.863843,
        latitude: 6.4316432,

In addition, the points were so small they were almost invisible. Added this accessor to the GeoJsonLayer in deckgl-overlay.js

      getRadius: f => f.properties.growth * 1000,

Overall this is valuable feedback. Feels like we might want to add some warnings to make sure people don't lose time getting their data to show up, but not quite sure yet what warnings to add. A few more checks in the GeoJson parser might be worthwhile?

[tomsiwik]

Thanks for the nice help. Unfortunately whatever i do i can't seem to add any points ontop of the map. Adding getRadius: f => somedefaultvalue * 1000, to the GeoJsonLayer doesn't show them at all.

I have ommitted style informations from the geojson file as they are a lot of points in my current sample, instead i would like to use default/dynamic styles.

I've setup a completely new project from the trips example (most recent example). Borrowed the default style of openstreetmap vector tiles, added our whole sample-file instead of trips, filled a GeoJsonLayer, removed unneeded layers and voila... nothing. React developer tools tells me it's filled with PointFeatures and i see nothing.

I'm not sure if the GeoJson parser should be changed at all... IMO it behaves okay what i can tell from looking at the source. However some checks can be useful like isRadiusSet, isFilled, isViewable and some other 'maybe' useful functions. Drawing 1nm points on the map that one can't see seems pretty strange to me.

I've put a project here and it should run out of the box without setting any API keys. https://github.com/tomsiwik/deck.gl-geojson-test

I would really appreciate it if you can pinpoint me to my mistake so i can learn what i'm doing wrong. Thanks in advance.

EDIT: oh wait! I'm dumb... https://github.com/tomsiwik/deck.gl-geojson-test/blob/master/data/gps.geojson shows me a totally different place on the map.

[tomsiwik]

Found the culprit i'm pretty dumb. Deck.gl was working marvelously. I was just twisting lat lon in point features in the geojson file without even noticing. Big apologies for the caused inconvenience but thanks sooo much for the help.

[rullymartanto]

@tomsiwik Hi, How do you manage the MultiPoint? I tried, but it doesn't show.