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