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

3c2bdd16c0ea8511dc254b8497a06f78?s=128

Pablo Guardiola

February 23, 2017
Tweet

Transcript

  1. Embrace The Journey Pablo Guardiola
 @Guardiola31337

  2. •Mapping platform for developers Mapbox

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

  4. •Mapping platform for developers Mapbox •Work in the open •SDK

    for Android, iOS, Qt, Node.js, Unity…
  5. Mapbox - Mobile •Similar SDK as Google Maps and Apple

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

    Maps •Custom features
  7. Mapbox - Mobile •Custom features •Free up to 50,000 monthly

    active users •Similar SDK as Google Maps and Apple Maps
  8. Survey (55 responses) Platforms 5 % 9 % 86 %

    Android iOS Both Maps 47 % 53 % Yes No
  9. What are/were the worst problems/features missing you find/found developing with

    maps?
  10. Markers - Add mapView.getMapAsync(new OnMapReadyCallback() {
 @Override
 public void onMapReady(MapboxMap

    mapboxMap) {
 mapboxMap.addMarker(new MarkerViewOptions()
 .position(new LatLng(-37.821629, 144.978535)));
 }
 });
  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
  12. Markers - Animate

  13. Custom maps - Styles

  14. Custom maps - Styles <com.mapbox.mapboxsdk.maps.MapView
 android:id="@+id/mapView"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 mapbox:mapbox_styleUrl="mapbox://styles/<your-account-name>/<your-style-ID>"/>

  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
  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<MapMatchingResponse>() {
 @Override
 public void onResponse(Call<MapMatchingResponse> call, Response<MapMatchingResponse> response) {
 List<LatLng> mapMatchedPoints = new ArrayList<>();
 if (response.code() == 200) {
 String geometry = response.body().getMatchings().get(0).getGeometry();
 List<Position> 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));
 }
 }
  17. Drawing - Map matching

  18. Drawing - Polygons

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


    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));
  20. What would you like to learn?

  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) {
 }
 });
  22. Offline maps - Pre-caching

  23. Offline maps - Pre-caching

  24. Navigation - Off route detection client.enqueueCall(new Callback<DirectionsResponse>() {
 @Override
 public

    void onResponse(Call<DirectionsResponse> call, Response<DirectionsResponse> response) {
 currentRoute = response.body().getRoutes().get(0);
 drawRoute(currentRoute);
 }
 
 @Override
 public void onFailure(Call<DirectionsResponse> call, Throwable throwable) {
 }
 });
 // ... Position carCurrentPosition = Position.fromCoordinates(
 car.getPosition().getLongitude(),
 car.getPosition().getLatitude()
 );
 if (routeUtils.isOffRoute(carCurrentPosition, currentRoute.getLegs().get(0))) {
 }
  25. Navigation - Off route detection

  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)
 );
 }
  27. Custom maps - Runtime Styling

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

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

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

    improvements Mapbox Android SDK v5.0.0
  31. A platform for developers

  32. And we love open source!

  33. Thank you

  34. Questions? pablo.guardiola@mapbox.com

  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