How to display geodjango rest api response on react leaflet Map

Question

I have the following response from django rest:

[
   {
    "area": 0.0,
    "perimeter": 0.0,
    "town_name": "Cheptais",
    "town_id": 4,
    "town_type": "Market Centres",
    "geom": "SRID=4326;MULTIPOINT (34.4500007629395 0.800000011920929)"
},
{
    "area": 0.0,
    "perimeter": 0.0,
    "town_name": "Dadaab",
    "town_id": 3,
    "town_type": "Trading Centre",
    "geom": "SRID=4326;MULTIPOINT (40.3199996948242 0.070000000298023)"
},
{
    "area": 0.0,
    "perimeter": 0.0,
    "town_name": "Eldas",
    "town_id": 4,
    "town_type": "Market Centres",
    "geom": "SRID=4326;MULTIPOINT (39.5499992370605 2.52999997138977)"
}
]

Fetching the endpoint with axios this way:

await axios
  .get("/api/gis/areas/", headers)
  .then((response) => {
    this.setState({ places: response.data });
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

}

 const handleEachFeature = (feature, layer) => {
  layer.bindPopup('<font size="4">' + feature.properties.town_name);
}

Using react leaflet, I create a map instance as follows:

<Map className="map" onEachFeature={handleEachFeature} style={{height:'100%',width:'100%'}}>
      <GeoJSON data={places}/>
</Map>

However, this does not overlay the api response on my map.. I'm I missing something?

Answer 1

as i mentioned on the comments,you have to convert the wkt to geojson in order for this to work, there are several solution to achieve such conversion but the easiest one here is to import wicket library (just use npm install wicket), also you need to create the with a unique key, here is a working component from your same data (note i'm not using axios as i test the data locally), :

import React, { Component } from 'react'
import './styles/styles.css'
import {Map,TileLayer,GeoJSON} from 'react-leaflet'
import './leaflet/leaflet.css'
import Wkt from 'wicket'
import L from 'leaflet'
import Data from '../../Data/wkt_file.json'

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

// this is for maker to show up:
let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

export default class map extends Component {
    constructor(props){
        super(props);
        this.state={
            wkt_json_holder:[],
            json_ob:<></>,
            json_key:1, 
            tile:'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
        }
        this.setGeoJSON = this.setGeoJSON.bind(this)
        this.onEach = this.onEach.bind(this)
    }
    async componentDidMount(){
        await this.setState({wkt_json_holder:Data});
        this.setGeoJSON()
    }

    setGeoJSON=()=>{
        let json_data = this.state.wkt_json_holder.map(point=>{
            let wkt_geom = point['geom'].replace('SRID=4326;','')
            let wkt = new Wkt.Wkt();
            wkt.read(wkt_geom)
            let geojson_geom = wkt.toJson()
            let coords = geojson_geom['coordinates']
            let type = geojson_geom['type']
            let geojson_obj={
                "type": "Feature",
                "geometry": {
                    'type':type,
                    'coordinates':coords
                },
                "properties": {
                    "town_name": point['town_name'], "town_id": point['town_id'], "town_type":point['town_type'], "perimeter": point['perimeter'], "area": point['area']
                }
            }
              return geojson_obj
            }
              
            )
            console.log(json_data)
            let json_ob= <GeoJSON data={json_data} key={1} style={{color:'red'}} onEachFeature={this.onEach}/>
            this.setState({json_ob})
    }

    // handling Popups 
    onEach(feature,layer){
        console.log(feature)
        let PopupContent = `
            <Popup>
                <p>town id:${feature.properties.town_id}</p>
                <p>town name:${feature.properties.town_name}</p>
            </Popup>
        `
        layer.bindPopup(PopupContent)
    }

    render() {
                
        return (
        <div style={{width:'100%',height:'100%'}}>
            <Map center={[2.197035, 38.703588]} zoom={6} style={{width:'100%',height:'100%'}}>
                <TileLayer url={this.state.tile}/>
                {this.state.json_ob}
            </Map>
                
        </div>
        )
    }

    
}