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

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

[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.

[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.