Add JSON data to a Mapbox map

[Jon.lunsford]

Hello community:

I’m trying to add data to a Mapbox map. I’m following along with the “Integrate Mapbox” tutorial but instead of adding the Isochrone API, I’m trying to add either markers or circles.

Tutorial here: Integrate Mapbox into your Web App using only Python

My latitude/longitude data is stored in a datatable. I’m converting these X/Y pairs to a GeoDataFrame, then to a JSON string. A small portion of the json string is shown below:

{“type”: “FeatureCollection”, “features”: [{“id”: “0”, “type”: “Feature”, “properties”: {“lat”: “32.1907841691”, “long”: “-95.103430522”, “name”: “Mill A”}, “geometry”: {“type”: “Point”, “coordinates”: [-95.103430522, 32.1907841691]}}, {“id”: “1”, “type”: “Feature”, “properties”: {“lat”: “31.8786962342”, “long”: “-95.2117307865”, “name”: “Mill B.”}, “geometry”: {“type”: “Point”, “coordinates”: [-95.2117307865, 31.8786962342]}}, …

The map is displayed in a spacer control and stored in self.mapbox variable. The map is loading but I cannot get the data to display on the map. I can manually place markers on the map by looping through the longitude, latitude values from the data, but the layer will not load.

Here is a view of the code to add the source and layer to the map:

    mills_json = DataAccessLayer.get_mills_json()
    
    # add a source for the mills geojson
    self.mapbox.addSource('mills', {'type': 'geojson'})
    self.mapbox.addLayer(
                {'id': 'mills',
                 'type': 'circle',
                 'source': 'mills',
                 })
    self.mapbox.getSource('mills').setData(mills_json)

Any help would be greatly appreciated.

[Jon.lunsford]

Disregard above issue. I found the solution … The JSON was represented as a string and had to be deserialized into a JSON object before adding it as with addSource(). I’ll include a snip of the source code below

# add the source and layer
    # add a source for the mills geojson
    self.mapbox.addSource('mills', {'type': 'geojson',
                                   'data': self.get_mill_data()})
    self.mapbox.addLayer(
                {'id': 'millLayer',
                 'type': 'circle',
                 'source': 'mills',
                 'paint': {'circle-radius': 8, 
                           'circle-color': '#B42222'}})

  def get_mill_data(self):
    """Retrieve the mill data as GeoJSON object"""    
    mills_json_string = dal.get_mills_json()
    # deserialize the string to a an object to be loaded into the map
    mills_json = json.loads(mills_json_string)
    return mills_json