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

Transcript

1. Embrace The Journey
   Pablo Guardiola

   @Guardiola31337
   

   View Slide

2. •Mapping platform for developers
   Mapbox
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View 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 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 Slide

12. Markers - Animate
    

    View Slide

13. Custom maps - Styles
    

    View 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 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 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 Slide

17. Drawing - Map matching
    

    View Slide

18. Drawing - Polygons
    

    View 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 Slide

20. What would you like to learn?
    

    View 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 Slide

22. Offline maps - Pre-caching
    

    View Slide

23. Offline maps - Pre-caching
    

    View 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 Slide

25. Navigation - Off route detection
    

    View 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 Slide

27. Custom maps - Runtime Styling
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. A platform for developers
    

    View Slide

32. And we love open source!
    

    View Slide

33. Thank you
    

    View Slide

34. Questions?
    pablo.guardiola@mapbox.com
    

    View Slide

35. 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 Slide