Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example of GeoJSONSource #41

Closed
maxwell-oroark opened this issue Aug 30, 2016 · 2 comments
Closed

Example of GeoJSONSource #41

maxwell-oroark opened this issue Aug 30, 2016 · 2 comments

Comments

@maxwell-oroark
Copy link

maxwell-oroark commented Aug 30, 2016

I am having a hard time following your API documentation with regard to drawing polygon features from a geoJSON source.

In your London (multiple markers) example, you seem to store the entire array of markers and their coordinates on state. Would you recommend this when you have tens of thousands of complex polygons? What would be your solution to drawing many polygons from a geoJSON source? Thanks!

I have tried the following:

import React, { Component } from 'react';
import ReactMapboxGl, { Layer, Feature } from "../node_modules/react-mapbox-gl/dist";
import logo from './logo.svg';
import './App.css';

let containerStyle = {
    height: "100vh",
    width: "100vw"
};

const accessToken = [access token removed for safety]

class App extends Component {

    _polygonClicked = ({ feature }) => {
    console.log("Polygon clicked", feature.geometry.coordinates);
    };

    render() {
        return (
        <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
            <ReactMapboxGl
                style={"mapbox://styles/mapbox/streets-v8"}
                center={[11.956511272000057,10.095463399000039]}
                zoom={[11]}
                accessToken={accessToken}
                containerStyle={containerStyle}>
                <Layer
                    type="fill"
                    paint={{ "fill-color": "#3bb2d0", "fill-opacity": .5 }}
                    id="testing"
                    sourceOptions={'religious',{
                        "type": 'geojson',
                        "data":'../small_poly/bridges.geojson'
                        }}
                    sourceId={'religious'}>
                </Layer>

            </ReactMapboxGl>
        </div>
    );
    }
}

export default App;

Thank you in advance!

@kitten
Copy link
Contributor

kitten commented Sep 7, 2016

My PR #44 should add the functionality you need. The problem is, React Mapbox GL actually generates GeoJSON for the features that are being rendered. If you did want to use it with your own GeoJSON, you either had to manually manage the source and add the sourceId to a layer ( 😢 ) or parse the GeoJSON and convert them into features... which are then converted back into GeoJSON 😭

So in #44 I'm adding a GeoJSONLayer that will just take your data directly ;)

@kitten kitten closed this as completed Sep 7, 2016
@alex3165
Copy link
Owner

alex3165 commented Sep 8, 2016

I have added some documentations for the geojson layer and released it with the version 0.11.0 of the library.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants