0

I'm new to Webmapping I already create a map with ReactLeaflet and ReactLeaflet Draw, but I can't imagine how can I get the geoJSON from the polygon and just send to a database or an API

    export default class Draw extends Component {

  _onEdited = (e) => {
    let numEdited = 0;
    e.layers.eachLayer( (layer) => {
      numEdited += 1;
    });
    console.log(`_onEdited: edited ${numEdited} layers`, e);

    this._onChange();
  }
  
  onCreated = (e) => {
    let type = e.layerType;
    let layer = e.layer;
    
    if (type === 'marker') {
      // Do marker specific actions
      console.log("_onCreated: marker created", e);
    }
    else {
      console.log("_onCreated: something else created:", type, e, );
      alert('Foi criada uma layer!!');
      console.log('criada com sucesso');
    }
    //Here I need to Stringify the Layer into GeoJSON for use it later.

  }
  
  _onDeleted = (e) => {

    let numDeleted = 0;
    e.layers.eachLayer( (layer) => {
      numDeleted += 1;
    });
    console.log(`onDeleted: removed ${numDeleted} layers`, e);

    this._onChange();
  }



  

  render() {
    return (
    <>
      <Map 
      className="leaflet-div"
      center={[37.8189, -122.4786]} zoom={13} zoomControl={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
          id= ''
        />
        <FeatureGroup>
            <EditControl
                position="topright"

                onEdited={this._onEdited}
              onCreated={this.onCreated}
              onDeleted={this._onDeleted}
                edit={{ remove: false }}
                draw={{
                    marker: false,
                    circle: false,
                    rectangle: false,
                    polyline: false
                }}
            />
        </FeatureGroup>
      </Map>
//When the user click on the button I need to send the info to an API with AXIOS.
      <button>
     Send Polygon
    </button>
      </>
    )
    ;
  }
}
5
  • 2
    What is not working? There is no attempt in the code to send GeoJSON data anywhere. – TomazicM Mar 25 at 20:05
  • Yeah your rigth I need to Stringify the data, but I can't acess that data , I'm trying to use that: var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data)); – Matheus Antonelli Mar 26 at 13:53
  • Please edit your question and add all relevant code of what you have tried so far there. You say 'I'm trying'. What is not working there? – TomazicM Mar 26 at 15:55
  • Okay, I put all the code here – Matheus Antonelli Mar 26 at 17:55
  • I don't see code from your comment in the added code. Where does it go? What happens if you put it where it's intended? – TomazicM Mar 26 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.