Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Embrace The Journey

Embrace The Journey

In this session we will talk about Mapbox mobile SDKs.

In order to prepare the talk, I created a survey and based on the results I divided the talk in two main parts:

1. What are/were the worst problems/features missing you find/found developing with maps?
2. What do you want me to cover? What would you like to learn?

Freakend Mobile 2017

Pablo Guardiola

February 23, 2017
Tweet

More Decks by Pablo Guardiola

Other Decks in Programming

Transcript

  1. Embrace The Journey
    Pablo Guardiola

    @Guardiola31337

    View full-size slide

  2. •Mapping platform for developers
    Mapbox

    View full-size slide

  3. •Mapping platform for developers
    Mapbox
    •Work in the open

    View full-size slide

  4. •Mapping platform for developers
    Mapbox
    •Work in the open
    •SDK for Android, iOS, Qt, Node.js, Unity…

    View full-size slide

  5. Mapbox - Mobile
    •Similar SDK as Google Maps and Apple Maps

    View full-size slide

  6. Mapbox - Mobile
    •Similar SDK as Google Maps and Apple Maps
    •Custom features

    View full-size slide

  7. Mapbox - Mobile
    •Custom features
    •Free up to 50,000 monthly active users
    •Similar SDK as Google Maps and Apple Maps

    View full-size slide

  8. Survey (55 responses)
    Platforms
    5 %
    9 %
    86 %
    Android iOS Both
    Maps
    47 %
    53 %
    Yes No

    View full-size slide

  9. What are/were
    the worst problems/features missing
    you find/found developing with maps?

    View full-size slide

  10. Markers - Add
    mapView.getMapAsync(new OnMapReadyCallback() {

    @Override

    public void onMapReady(MapboxMap mapboxMap) {

    mapboxMap.addMarker(new MarkerViewOptions()

    .position(new LatLng(-37.821629, 144.978535)));

    }

    });

    View full-size slide

  11. mapView.getMapAsync(new OnMapReadyCallback() {

    @Override

    public void onMapReady(MapboxMap mapboxMap) {

    final Marker marker = mapboxMap.addMarker(new MarkerViewOptions()

    .position(new LatLng(64.900932, -18.167040)));

    mapboxMap.setOnMapClickListener(new MapboxMap.OnMapClickListener() {

    @Override

    public void onMapClick(@NonNull LatLng point) {

    ValueAnimator markerAnimator = ObjectAnimator.ofObject(marker, "position",

    new LatLngEvaluator(), marker.getPosition(), point);

    markerAnimator.setDuration(2000);

    markerAnimator.start();

    }

    });

    }

    });
    Markers - Animate

    View full-size slide

  12. Markers - Animate

    View full-size slide

  13. Custom maps - Styles

    View full-size slide

  14. Custom maps - Styles
    android:id="@+id/mapView"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    mapbox:mapbox_styleUrl="mapbox://styles//"/>

    View full-size slide

  15. Publish to fleet Property pane
    Live map preview
    Layer selector
    Watching a designer create a night style within minutes with Mapbox Studio.
    Custom maps - Mapbox Studio

    View full-size slide

  16. Drawing - Map matching
    MapboxMapMatching client = new MapboxMapMatching.Builder()

    .setAccessToken(Mapbox.getAccessToken())

    .setProfile(MapMatchingCriteria.PROFILE_DRIVING)

    .setCoordinates(coordinates) client.enqueueCall(

    .build();
    client.enqueueCall(new Callback() {

    @Override

    public void onResponse(Call call, Response response) {

    List mapMatchedPoints = new ArrayList<>();

    if (response.code() == 200) {

    String geometry = response.body().getMatchings().get(0).getGeometry();

    List positions = PolylineUtils.decode(geometry, Constants.PRECISION_6);

    // Traverse positions adding points into mapMatchedPoints

    mapMatchedRoute = map.addPolyline(new PolylineOptions()

    .addAll(mapMatchedPoints)

    .color(Color.parseColor("#3bb2d0"))

    .width(4));

    }

    }

    View full-size slide

  17. Drawing - Map matching

    View full-size slide

  18. Drawing - Polygons

    View full-size slide

  19. Drawing - Polygons
    List STAR_SHAPE_POINTS = new ArrayList() {

    {

    add(new LatLng(45.522585, -122.685699));

    // ...

    add(new LatLng(45.522585, -122.685699));

    }

    };
    BLUE_COLOR = Color.parseColor("#3bb2d0");
    polygon = mapboxMap.addPolygon(new PolygonOptions()

    .addAll(STAR_SHAPE_POINTS)

    .fillColor(BLUE_COLOR));

    View full-size slide

  20. What would you like to learn?

    View full-size slide

  21. Offline maps - Pre-caching
    String minZoom = map.getStyleUrl();

    double minZoom = map.getCameraPosition().zoom;

    double maxZoom = map.getMaxZoom();

    float pixelRatio = this.getResources().getDisplayMetrics().density;

    OfflineTilePyramidRegionDefinition definition = new OfflineTilePyramidRegionDefinition(

    styleURL, bounds, minZoom, maxZoom, pixelRatio);

    byte[] metadata = name.getBytes(CHARSET);

    offlineManager.createOfflineRegion(definition, metadata, new OfflineManager.CreateOfflineRegionCallback() {

    @Override

    public void onCreate(OfflineRegion offlineRegion) {

    offlineRegion.setDownloadState(OfflineRegion.STATE_ACTIVE);

    }


    @Override

    public void onError(String error) {

    }

    });

    View full-size slide

  22. Offline maps - Pre-caching

    View full-size slide

  23. Offline maps - Pre-caching

    View full-size slide

  24. Navigation - Off route detection
    client.enqueueCall(new Callback() {

    @Override

    public void onResponse(Call call, Response response) {

    currentRoute = response.body().getRoutes().get(0);

    drawRoute(currentRoute);

    }


    @Override

    public void onFailure(Call call, Throwable throwable) {

    }

    });

    // ...
    Position carCurrentPosition = Position.fromCoordinates(

    car.getPosition().getLongitude(),

    car.getPosition().getLatitude()

    );

    if (routeUtils.isOffRoute(carCurrentPosition, currentRoute.getLegs().get(0))) {

    }

    View full-size slide

  25. Navigation - Off route detection

    View full-size slide

  26. Custom maps - Runtime Styling
    Layer water = mapboxMap.getLayer("water");

    if (water != null) {

    mapboxMap.setTransitionDuration(5);

    mapboxMap.setTransitionDelay(1);

    water.setProperties(

    visibility(VISIBLE),

    fillColor(Color.RED)

    );

    }

    View full-size slide

  27. Custom maps - Runtime Styling

    View full-size slide

  28. Mapbox Android SDK v5.0.0
    •Support for data-driven styles

    View full-size slide

  29. •Support for data-driven styles
    •Support for Android Nougat
    Mapbox Android SDK v5.0.0

    View full-size slide

  30. •Support for data-driven styles
    •Support for Android Nougat
    •Many performance improvements
    Mapbox Android SDK v5.0.0

    View full-size slide

  31. A platform for developers

    View full-size slide

  32. And we love open source!

    View full-size slide

  33. References
    • Mapbox Android SDK: https:/
    /www.mapbox.com/android-sdk/
    • Mapbox iOS SDK: https:/
    /www.mapbox.com/ios-sdk/
    • Android demo app: https:/
    /github.com/mapbox/mapbox-android-demo
    • Core (Maps): https:/
    /github.com/mapbox/mapbox-gl-native
    • MAS: https:/
    /github.com/mapbox/mapbox-java

    View full-size slide