Creating usable geojson of multiple points from Django Rest Framework in Angular with ngx-leaflet

Question

Alright so I have an array of 9,000 objects being returned through HttpClient from my django rest api. These objects are Geojson format already. How would I turn this into a layer to map using ngx-leaflet. I was easily able to figure this out with basic javascript but I am confused doing it inside of angular. I previously had done it all inside of GeoDjango but now I have seperated the front and the back.

Here is my code for my component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Layer, tileLayer, geoJSON, LayerOptions } from 'leaflet';
import 'leaflet-providers';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

layers: Layer[];
layersControl: any;
center = [47.215282, -109.483294];
fitBounds = [[49.378264, -116.492570], [44.757856, -103.528704]];

constructor(private http: HttpClient) { }

ngOnInit() {
    this.http.get<any>('http://127.0.0.1:8000/data/people')
        .subscribe(geo1 => {
            this.http.get<any>('http://127.0.0.1:8000/data/places')
                .subscribe(geo2 => {
                    let defaultBaseLayer = tileLayer.provider('OpenStreetMap.Mapnik');
                    let defaultOverlay = geoJSON(geo1);
                    this.layers = [
                        defaultBaseLayer,
                        defaultOverlay
                    ];
                    this.layersControl = {
                        baseLayers: {
                            'OpenStreetMap Mapnik': defaultBaseLayer,
                            'OpenStreetMap BlackAndWhite': tileLayer.provider('OpenStreetMap.BlackAndWhite')
                        },
                        overlays: {
                            'Overlay One': defaultOverlay,
                            'Overlay Two': geoJSON(geo2)
                        }
                    };

                    console.log(geo1)


                });

        });
}

I borrowed the code from a previous response on this forum.

Edit: If i do people/1/ for id 1 I get the error "Invalid GeoJSON object." I am testing this using Postman and I am using cors-headers for django. I'm using a PostGIS database and used the geojson serializers in djangorestframework-gis

If I get rid of the geoJSON in front of (geo1) it says "The provided object is not a Layer."

EDIT 2: Does anybody know an alternative to Leaflet that works well with Angular 6?

Edit 3: This is the object being returned...

score 0 · Answer 1 · answered Jul 24 '18 at 00:17

0

The geoJSON function is what creates a Leaflet layer out of the JSON. So, you'll always need to use that function.

You probably just need to inspect the object that's getting received in your subscribe callbacks to see if it's valid geojson. Sometimes there are wrapper objects around the REST responses.

There's an example of creating a basic geoJSON in the demo on the ngx-leaflet Github repo.

geoJSON(
    ({
        type: 'Polygon',
        coordinates: [[
            [ -121.6, 46.87 ],
            [ -121.5, 46.87 ],
            [ -121.5, 46.93],
            [ -121.6, 46.87 ]
        ]]
    }) as any,
    { style: () => ({ color: '#ff7800' }
)

You don't necessarily need the style argument. And you might not need the cast to any if you're not using the style argument. But, a geoJSON object should look something like this for a polygon definition.

answered Jul 24 '18 at 00:17

reblace

4,115
16
16

I was looking at the demo. Unfortunately didn't see any http examples. Do you think it would be smarter if I received a json instead of a Geojson since the geoJSON function transforms it anyway? I'm sure its the format that is stumping me. It seems to be an array of Geojson all inside of an object... sort of like this { [ {geojson}, {geojson}, {geojson} ] }... oh well thanks for the help! – Petey Jul 24 '18 at 00:35
I attached an image in an edit to my post. I was thinking about just returning all of the coordinates but I'd still want to filter the rest of the data later on and see what i'm working with. – Petey Jul 24 '18 at 00:49
Have you dug into these docs: https://leafletjs.com/examples/geojson/ ? I suspect you have to wrap multiple shapes into a feature collection if you want to make them all into a single geojson layer. Otherwise, you'd want to convert the array into an array of geojson layers. In other words, call `geojson` on each element of the array one at a time. – reblace Jul 24 '18 at 01:22

Creating usable geojson of multiple points from Django Rest Framework in Angular with ngx-leaflet

1 Answers1