Embrace The Journey - Speaker Deck

Slide 1

Slide 1 text

Embrace The Journey Pablo Guardiola  @Guardiola31337

Slide 2

Slide 2 text

•Mapping platform for developers Mapbox

Slide 3

Slide 3 text

•Mapping platform for developers Mapbox •Work in the open

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

What are/were the worst problems/features missing you ﬁnd/found developing with maps?

Slide 10

Slide 10 text

Markers - Add mapView.getMapAsync(new OnMapReadyCallback() {  @Override  public void onMapReady(MapboxMap mapboxMap) {  mapboxMap.addMarker(new MarkerViewOptions()  .position(new LatLng(-37.821629, 144.978535)));  }  });

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Markers - Animate

Slide 13

Slide 13 text

Custom maps - Styles

Slide 14

Slide 14 text

Custom maps - Styles

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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));  }  }

Slide 17

Slide 17 text

Drawing - Map matching

Slide 18

Slide 18 text

Drawing - Polygons

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

What would you like to learn?

Slide 21

Slide 21 text

Oﬄine 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) {  }  });

Slide 22

Slide 22 text

Oﬄine maps - Pre-caching

Slide 23

Slide 23 text

Oﬄine maps - Pre-caching

Slide 24

Slide 24 text

Navigation - Oﬀ 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))) {  }

Slide 25

Slide 25 text

Navigation - Oﬀ route detection

Slide 26

Slide 26 text

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)  );  }

Slide 27

Slide 27 text

Custom maps - Runtime Styling

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

A platform for developers

Slide 32

Slide 32 text

And we love open source!

Slide 33

Slide 33 text

Thank you

Slide 34

Slide 34 text

Questions? pablo.guardiola@mapbox.com

Slide 35

Slide 35 text

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