search

tangrams / tangram

WebGL map rendering engine for creative cartography
https://tangram.city
MIT License
2.22k stars 290 forks source link

Local & Custom GeoJSON Layer Shows Missing on Map Without Error #716

Closed BossOfGames closed 5 years ago

BossOfGames commented 5 years ago

Hey All,

I am loading my own airports database into my map (since mine is more complete than what comes from OSM datasources), however when I load my own GeoJSON, the map doesn't show the markers and the console doesn't show any errors.

Here is a sample GeoJSON for the New York area.

{
    "airports": {
        "features":[ {
            "geometry": {
                "coordinates": [40.63980103, -73.77890015], "type": "Point"
            }
            ,
            "properties": {
                "kind": "large_airport", "icao": "KJFK", "name": "John F Kennedy International Airport", "iata": "JFK"
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.77719879, -73.87259674], "type": "Point"
            }
            ,
            "properties": {
                "kind": "large_airport", "icao": "KLGA", "name": "La Guardia Airport", "iata": "LGA"
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.74259948730469, -73.97209930419922], "type": "Point"
            }
            ,
            "properties": {
                "kind": "heliport", "icao": "6N5", "name": "East 34th Street Heliport", "iata": "TSS"
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.84590148925781, -73.81620025634766], "type": "Point"
            }
            ,
            "properties": {
                "kind": "seaplane_base", "icao": "6N6", "name": "Evers Seaplane Base", "iata": null
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.734001, -73.9729], "type": "Point"
            }
            ,
            "properties": {
                "kind": "seaplane_base", "icao": null, "name": "New York Skyports Inc Seaplane Base", "iata": "QNY"
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.7545013428, -74.0071029663], "type": "Point"
            }
            ,
            "properties": {
                "kind": "heliport", "icao": "KJRA", "name": "West 30th St. Heliport", "iata": "JRA"
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.70119858, -74.00900269], "type": "Point"
            }
            ,
            "properties": {
                "kind": "heliport", "icao": "KJRB", "name": "Downtown-Manhattan/Wall St Heliport", "iata": "JRB"
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.71260070800781, -73.99960327148438], "type": "Point"
            }
            ,
            "properties": {
                "kind": "heliport", "icao": "NK39", "name": "One Police Plaza Heliport", "iata": null
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.5905, -73.8805], "type": "Point"
            }
            ,
            "properties": {
                "kind": "heliport", "icao": "NY22", "name": "NYPD Air Operations (Floyd Bennett Field) Heliport", "iata": null
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.590999603271484, -73.89099884033203], "type": "Point"
            }
            ,
            "properties": {
                "kind": "closed", "icao": null, "name": "Floyd Bennett Field", "iata": "NOP"
            }
            ,
            "type":"Feature"
        }
        ,
        {
            "geometry": {
                "coordinates": [40.7533, -73.9765], "type": "Point"
            }
            ,
            "properties": {
                "kind": "closed", "icao": null, "name": "Pan Am Building Heliport", "iata": "JPB"
            }
            ,
            "type":"Feature"
        }
        ],
        "type":"FeatureCollection"
    }
}

Here is my yaml

cameras:
    camera1:
        type: perspective

lights:
    light1:
        type: directional
        direction: [0, 1, -.5]
        diffuse: .3
        ambient: 1

sources:
    nextzen:
        type: GeoJSON
        url: https://tile.nextzen.org/tilezen/vector/v1/512/all/{z}/{x}/{y}.json
        url_params:
            api_key: J340hxOHS_qfDrYU1iUIGg
        max_zoom: 16
        tile_size: 512
    nextzen_k:
        type: MVT
        url: https://tile.nextzen.org/tilezen/vector/v1/all/{z}/{x}/{y}.mvt
        url_params:
            api_key: J340hxOHS_qfDrYU1iUIGg
        max_zoom: 16
    airports:
        type: GeoJSON
        url: air.json
layers:
    earth:
        data: { source: nextzen }
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: '#5a5a5a'

    water:
        data: { source: nextzen }
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: '#1a1a1a'
    landuse:
        data: { source: nextzen}
        grass:
            filter:
                kind: grass
            draw:
                polygons:
                    order: function() { return feature.sort_rank; }
                    color: green
        urban:
            filter: {kind: [urban, rural, residential, commercial]}
            draw:
                polygons:
                    color: yellow
                    order: function() { return feature.sort_rank; }
        runway:
            filter: {kind: [runway]}
            draw:
                polygons:
                    color: [0.173, 0.173, 0.173, 1.00]
                    order: function() { return 300; }
        apron:
            filter: {kind: [apron]}
            draw:
                polygons:
                    color: [0.616, 0.616, 0.616, 1.00]
                    order: function() { return feature.sort_rank; }
    airports:
        data:
            source: airports
        draw:
            points:
                order: 2000
                priority: 1
                interactive: true
                color: '#f88'
                size: 8px
                cull_from_tile: false
                collide: false
                text:
                    text_source: function() { return feature.name; }
                    collide: global.collide
                    optional: true
                    anchor: [bottom, top, right, left, bottom-right, bottom-left, top-right, top-left]
                    font:
                        size: 8pt
                        family: Lucida Grande
                        fill: white
    roads:
        data: { source: nextzen }
        filter:
            not: { kind: [path, rail, ferry] }
        aeroway:
            filter:
                kind: aeroway
                kind_detail: taxiway
            draw:
                lines:
                    blend: overlay
                    order: 130
                    color: '#ffcc00'
                    width: 5
                    outline:
                        color: black
                        width: 2
        runway:
            filter:
                kind: aeroway
                kind_detail: runway
            draw:
                lines:
                    order: function() { return feature.sort_rank; }
                    color: white
                    cap: square
                    width: 36
        draw:
            lines:
                order: function() { return feature.sort_rank; }
                color: gray
                width: 8
                cap: round
        highway:
            filter: { kind: [highway], $zoom: { max: 13 }}
            draw:
                lines:
                    order: function() { return feature.sort_rank; }
                    color: '#cc6666'
                    width: 40
                    outline:
                        color: grey
                        width: 1.5
        minor_road:
            filter: { kind: [minor_road], $zoom: { min: 13 }}
            draw:
                lines:
                    order: function() { return feature.sort_rank; }
                    color: grey
                    width: 5
    pois:
        data: { source: nextzen }
        gates:
            filter:
                kind: aeroway_gate
            draw:
                text:
                    order: function() { return feature.sort_rank; }
                    text_source: function() { return feature.ref; }
                    font:
                        family: Arial
                        size: 14px
                        fill: '#eeeeee'
                        transform: uppercase
    places:
        data: {source: nextzen}
        city:
            draw:
                text:
                    font:
                        fill: '#cccccc'
                        weight: 500
                        size: 14px
                        family: Helvetica
    buildings:
        data: { source: nextzen }
        draw:
            polygons:
                order: function() { return feature.sort_rank; }
                color: |
                    function () {
                        var h = feature.height || 20;
                        h = Math.min((h + 50)/ 255, .8); // max brightness: .8
                        h = Math.max(h, .4); // min brightness: .4
                        return [h, h, h];
                    }
        3d-buildings:
            filter: { $zoom: { min: 15 } }
            draw:
                polygons:
                    extrude: function () { return feature.height > 20 || $zoom >= 16; }
    road_labels:
        data: { source: nextzen, layer: roads }
        taxiways:
            filter: { kind_detail: taxiway, $zoom: { min: 15 } }
            draw:
                text:
                    text_source: |
                        function () {
                            if (!feature.name)
                                return feature.ref;
                            else
                                return feature.name;
                        }
                    font:
                        fill: white
                        weight: 500
                        size: 12px
                        family: Helvetica
                        stroke: { color: black, width: 3 }
        runways:
            filter: { kind_detail: runway, $zoom: { min: 12 } }
            draw:
                text:
                    text_source: |
                        function () {
                            if (!feature.ref)
                                return feature.name;
                            else
                                return feature.ref;
                        }
                    font:
                        fill: white
                        weight: 500
                        size: 15px
                        family: Helvetica
                        stroke: { color: black, width: 3 }
        aeroway:
            filter: { kind: aeroway_gate }
            draw:
                text:
                    font:
                        fill: white
                        weight: 500
                        size: 12px
                        family: Helvetica

I appreciate the help.

BossOfGames commented 5 years ago

Ok I figured it out. GeoJSON coordinates were reversed.

bcamper commented 5 years ago

First rule of geo: if it doesn't show up, flip the lat/lng ;)

On Tue, Apr 30, 2019 at 4:25 AM Taylor Broad notifications@github.com wrote:

Closed #716 https://github.com/tangrams/tangram/issues/716.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/tangrams/tangram/issues/716#event-2308774755, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAECXOQNGHP6FY6PIDY6HTPS77AZANCNFSM4HJIYB7Q .