Customização de Mapas no Android

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

Transcript

1. CUSTOM MAPS INTRODUÇÃO A CUSTOMIZAÇÃO DE MAPAS NO ANDROID @wmitrut
2. Wellington Mitrut - Ex-Baixista do Dream Theater, - Ex-Batman - Ex-Paquita - Flash Reverso - Freelance @wmitrut
4. Os mapas são uma expressão da necessidade humana de conhecer e representar o seu espaço.
6. CARTOGRAFIA
7. 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.
8. CARTOGRAFIA = UX
9. Sketch do século XIV
10. Mapas no dia-a-dia
13. Mas é tudo 100% confiável?
16. Soluções
22. Mas a mais usada é a GOOGLE MAPS API
24. É possível personalizar mapas desde a versão 9.6.0 do Google Play Services (set/2016) Segunda-feira saiu a 10.2.0
25. Mas como eu faço isso?
26. Google Maps API Styling Wizard
29. Customiza-se o mapa e salva-se o JSON do estilo na pasta raw do projeto
32. ~ 5Kb ~ 320 linhas
34. Talk is cheap. Show me The Code.
35. 1 - Não se esqueça de colocar a SUA chave da Google Maps API.
36. 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
37. 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
38. 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.cascavel_style)); 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 cascavel = new LatLng(-24.952327, -53.461767); mMap.addMarker(new MarkerOptions().position(cascavel).title("Cascavel")); mMap.moveCamera(CameraUpdateFactory.newLatLng(cascavel)); } } MapsActivity.java
39. Documentação: https://goo.gl/uhXUdN
40. Código: https://goo.gl/GbkH60
41. SLIDES https://speakerdeck.com/wmitrut
42. DÚVIDAS?
43. Obrigado!