Customização de Mapas no Android - Google I/O Extended Pernambuco

Utilizando Google Maps API + Google Play Services, é demonstrado um pouco de como é feito a estilização de mapas para Android por aplicativos como UBER, 99Taxis e FlightRadar

Palestra apresentada durante a Google I/O Extended Pernambuco em 17/05/2017.

Transcript

1. CUSTOM MAPS INTRODUÇÃO A CUSTOMIZAÇÃO DE MAPAS NO ANDROID Google I/O Extended Pernambuco @wmitrut
2. Wellington Mitrut @wmitrut
4. gdg-cascavel
5. Os mapas são uma expressão da necessidade humana de conhecer e representar o seu espaço.
7. CARTOGRAFIA
8. A cartografia é a ciência da representação gráfica da superfície terrestre, tendo como produto final o mapa. Ou seja, é a ciência que trata da concepção, produção, difusão, utilização e estudo dos mapas.
9. CARTOGRAFIA = UX
10. Sketch do século XIV
11. Mapas no dia-a-dia
14. Mas é tudo 100% confiável?
17. Soluções
23. Mas a mais usada é a GOOGLE MAPS API
25. É possível personalizar mapas desde a versão 9.6.0 do Google Play Services (set/2016)
26. Mas como eu faço isso?
27. Google Maps API Styling Wizard
30. Customiza-se o mapa e salva-se o JSON do estilo na pasta raw do projeto
33. ~ 5Kb ~ 320 linhas
35. Talk is cheap. Show me The Code.
36. 1 - Não se esqueça de colocar a SUA chave da Google Maps API.
37. 2 - Implemente a View public class MapsActivity extends FragmentActivity implements OnMapReadyCallback { private GoogleMap mMap; private static final String TAG = MapsActivity.class.getSimpleName(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_maps); SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); } MapsActivity.java
38. 2 - Implemente a View <fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_width= "match_parent" android:layout_height= "match_parent" android:id="@+id/map" tools:context="com.custommapsgdgcvel.custommapsgdgcvel.MapsActivity" android:name="com.google.android.gms.maps.SupportMapFragment" /> activity_maps.xml
39. 3 - Faça a Chamada do estilo e seu tratamento @Override public void onMapReady(GoogleMap googleMap) { try { boolean success = googleMap.setMapStyle( MapStyleOptions.loadRawResourceStyle( this, R.raw.io_pernambuco)); if (!success) { Log.e(TAG, "Falhou ao aplicar estilo."); } } catch (Resources.NotFoundException e) { Log.e(TAG, "Estilo não encontrado. Error: ", e); } mMap = googleMap; LatLng ioextended = new LatLng(-24.952327, -53.461767); mMap.addMarker(new MarkerOptions().position(ioextended).title("Google I/O Extended Pernambuco")); mMap.moveCamera(CameraUpdateFactory.newLatLng(ioextended)); } } MapsActivity.java
40. Documentação: https://goo.gl/uhXUdN
41. Código: https://goo.gl/GbkH60
42. SLIDES https://speakerdeck.com/wmitrut
44. DÚVIDAS?
45. Obrigado!