search

mapbox / mapbox-gl-native

Interactive, thoroughly customizable maps in native Android, iOS, macOS, Node.js, and Qt applications, powered by vector tiles and OpenGL
https://mapbox.com/mobile
Other
4.35k stars 1.33k forks source link

Directions Example In TestApp #3251

Closed bleege closed 8 years ago

bleege commented 8 years ago

To help people better self serve let's build a simple Directions activity in the TestApp. All it needs to do is draw markers for the starting and stopping points and a polyline for the route. The data can be cached JSON from an actual request to Mapbox Directions.

/cc @zugaldia @tobrun @mapbox/support

tobrun commented 8 years ago

I will be using the example JSON file as shown in the documentation of Directions. Will add it locally as an asset so we are independent of the API (could break due to api key)

tobrun commented 8 years ago

Current progress:

device-2015-12-18-144327

tobrun commented 8 years ago

Running into the problem of not able to use VectorDrawable with SpriteFactory, Going to PR current progress, will update after SpriteFactory issue is resolved.

@bleege

zugaldia commented 8 years ago

Isn't that route a bit unrealistic? Wouldn't it make more sense something more local to a city where you can see the (Mapbox) streets?

tobrun commented 8 years ago

@zugaldia Yeah maybe it is.. but it is the default one shown as an example on the directions page. Any suggestion for another? :)

tobrun commented 8 years ago

I'm currently waiting for #3350 to be merged before being able to merge this

bleege commented 8 years ago

Isn't that route a bit unrealistic?

Agreed. This needs to be a simple example of how to drive from Pt A to Pt B in a US city. It should have Markers at the starting and stopping points with a Polyline showing the route. Let's use the following to go from Pike Place Market to SAFECO Field in Seattle.

Directions URL:

https://api.mapbox.com/v4/directions/mapbox.driving/-122.34067,47.60869;-122.33420,47.59028.json?access_token=<YOURACCESSTOKENHERE>

JSON Response From Directions URL

{

    "origin": 

{

    "type": "Feature",
    "geometry": 

{

    "type": "Point",
    "coordinates": 

    [
        ​-122.34062194824219,
        ​47.60872268676758
    ]

},
"properties": 

    {
        "name": "Pike Place"
    }

},
"destination": 
{

    "type": "Feature",
    "geometry": 

{

    "type": "Point",
    "coordinates": 

    [
        ​-122.33419799804688,
        ​47.59027862548828
    ]

},
"properties": 

    {
        "name": "1st Avenue South"
    }

},
"waypoints": [ ],
"routes": 
[

{

    "distance": ​2643,
    "duration": ​207,
    "summary": "1st Avenue - 1st Avenue South (WA 519)",
    "geometry": 

{

    "type": "LineString",
    "coordinates": 

[

[

    ​-122.340626,
    ​47.608725

],
[

    ​-122.341129,
    ​47.609026

],
[

    ​-122.341836,
    ​47.609449

],
[

    ​-122.341499,
    ​47.60959

],
[

    ​-122.340891,
    ​47.609843

],
[

    ​-122.340505,
    ​47.609402

],
[

    ​-122.340391,
    ​47.609272

],
[

    ​-122.34002,
    ​47.608848

],
[

    ​-122.33975,
    ​47.608554

],
[

    ​-122.33909,
    ​47.607833

],
[

    ​-122.338192,
    ​47.606838

],
[

    ​-122.337541,
    ​47.60612

],
[

    ​-122.337485,
    ​47.606058

],
[

    ​-122.336894,
    ​47.605406

],
[

    ​-122.336246,
    ​47.604692

],
[

    ​-122.336844,
    ​47.604443

],
[

    ​-122.337233,
    ​47.604283

],
[

    ​-122.337344,
    ​47.604238

],
[

    ​-122.337456,
    ​47.604191

],
[

    ​-122.338126,
    ​47.603913

],
[

    ​-122.338205,
    ​47.603874

],
[

    ​-122.338147,
    ​47.603811

],
[

    ​-122.337562,
    ​47.60318

],
[

    ​-122.336913,
    ​47.602479

],
[

    ​-122.336269,
    ​47.601741

],
[

    ​-122.336066,
    ​47.601538

],
[

    ​-122.335814,
    ​47.601206

],
[

    ​-122.335701,
    ​47.600996

],
[

    ​-122.335663,
    ​47.60089

],
[

    ​-122.335599,
    ​47.600688

],
[

    ​-122.335577,
    ​47.600544

],
[

    ​-122.335588,
    ​47.60005

],
[

    ​-122.335577,
    ​47.599219

],
[

    ​-122.33558,
    ​47.598719

],
[

    ​-122.335623,
    ​47.598437

],
[

    ​-122.335633,
    ​47.598282

],
[

    ​-122.33558,
    ​47.598068

],
[

    ​-122.335527,
    ​47.597928

],
[

    ​-122.335465,
    ​47.597787

],
[

    ​-122.335325,
    ​47.597603

],
[

    ​-122.334919,
    ​47.597255

],
[

    ​-122.334518,
    ​47.596765

],
[

    ​-122.334275,
    ​47.596495

],
[

    ​-122.334188,
    ​47.596364

],
[

    ​-122.334154,
    ​47.596265

],
[

    ​-122.334132,
    ​47.596132

],
[

    ​-122.334121,
    ​47.595965

],
[

    ​-122.334119,
    ​47.595662

],
[

    ​-122.334171,
    ​47.594307

],
[

    ​-122.334198,
    ​47.592392

],
[

    ​-122.334198,
    ​47.592058

],
[

    ​-122.334197,
    ​47.59029

],

        [
            ​-122.334197,
            ​47.590278
        ]
    ]

},
"steps": 
[

{

    "maneuver": 

{

    "type": "depart",
    "location": 

{

    "type": "Point",
    "coordinates": 

            [
                ​-122.340626,
                ​47.608725
            ]
        },
        "instruction": "Head northwest on Pike Place"
    },
    "distance": ​122,
    "duration": ​26,
    "way_name": "Pike Place",
    "direction": "NW",
    "heading": ​312,
    "mode": "driving"

},
{

    "maneuver": 

{

    "type": "turn right",
    "location": 

{

    "type": "Point",
    "coordinates": 

            [
                ​-122.341836,
                ​47.609449
            ]
        },
        "instruction": "Turn right onto Pine Street"
    },
    "distance": ​84,
    "duration": ​10,
    "way_name": "Pine Street",
    "direction": "NE",
    "heading": ​59,
    "mode": "driving"

},
{

    "maneuver": 

{

    "type": "turn right",
    "location": 

{

    "type": "Point",
    "coordinates": 

            [
                ​-122.340891,
                ​47.609843
            ]
        },
        "instruction": "Turn right onto 1st Avenue"
    },
    "distance": ​670,
    "duration": ​59,
    "way_name": "1st Avenue",
    "direction": "SE",
    "heading": ​150,
    "mode": "driving"

},
{

    "maneuver": 

{

    "type": "turn right",
    "location": 

{

    "type": "Point",
    "coordinates": 

            [
                ​-122.336246,
                ​47.604692
            ]
        },
        "instruction": "Turn right onto Madison Street"
    },
    "distance": ​173,
    "duration": ​16,
    "way_name": "Madison Street",
    "direction": "SW",
    "heading": ​238,
    "mode": "driving"

},
{

    "maneuver": 

{

    "type": "turn left",
    "location": 

{

    "type": "Point",
    "coordinates": 

            [
                ​-122.338205,
                ​47.603874
            ]
        },
        "instruction": "Turn left onto Alaskan Way"
    },
    "distance": ​278,
    "duration": ​16,
    "way_name": "Alaskan Way",
    "direction": "SE",
    "heading": ​140,
    "mode": "driving"

},
{

    "maneuver": 

{

    "type": "continue",
    "location": 

{

    "type": "Point",
    "coordinates": 

            [
                ​-122.336269,
                ​47.601741
            ]
        },
        "instruction": "Continue on Alaskan Way South (WA 519)"
    },
    "distance": ​397,
    "duration": ​23,
    "way_name": "Alaskan Way South (WA 519)",
    "direction": "SE",
    "heading": ​146,
    "mode": "driving"

},
{

    "maneuver": 

{

    "type": "continue",
    "location": 

{

    "type": "Point",
    "coordinates": 

            [
                ​-122.335633,
                ​47.598282
            ]
        },
        "instruction": "Continue on Railroad Way South (WA 519)"
    },
    "distance": ​242,
    "duration": ​16,
    "way_name": "Railroad Way South (WA 519)",
    "direction": "S",
    "heading": ​172,
    "mode": "driving"

},
{

    "maneuver": 

{

    "type": "continue",
    "location": 

{

    "type": "Point",
    "coordinates": 

            [
                ​-122.334188,
                ​47.596364
            ]
        },
        "instruction": "Continue on 1st Avenue South (WA 519)"
    },
    "distance": ​676,
    "duration": ​43,
    "way_name": "1st Avenue South (WA 519)",
    "direction": "S",
    "heading": ​165,
    "mode": "driving"

},
{

    "maneuver": 

{

    "type": "continue",
    "location": 

{

    "type": "Point",
    "coordinates": 

            [
                ​-122.334197,
                ​47.59029
            ]
        },
        "instruction": "Continue on 1st Avenue South"
    },
    "distance": ​1,
    "duration": ​0,
    "way_name": "1st Avenue South",
    "direction": "S",
    "heading": ​180,
    "mode": "driving"

},
{

    "maneuver": 

{

    "type": "arrive",
    "location": 

{

    "type": "Point",
    "coordinates": 

                            [
                                ​-122.334197,
                                ​47.590278
                            ]
                        },
                        "instruction": "You have arrived at your destination"
                    }
                }
            ]
        }
    ]

}
tobrun commented 8 years ago

Discussed with @bleege Will make this sample easier by removing gson and model classes and writing a simple parser. Will pick up above json file as an example.

zugaldia commented 8 years ago

I've added a 3484-directions-sdk branch that does this using the new Directions SDK: https://github.com/mapbox/mapbox-gl-native/compare/3484-directions-sdk. How about we just use this one?

bleege commented 8 years ago

@zugaldia Yep, let's use the Directions Library now that it officially exists.

tobrun commented 8 years ago

Closed in favor of #3484