Traffic at night

The live traffic layer on the native dark map style. userInterfaceStyle switches the map between light and dark, or follows the system.

iOS

Android

Uses trafficEnabled, userInterfaceStyle.

traffic.tsx

import React from 'react';

import { GoogleMapsView } from 'react-native-google-maps-plus';

import { ll } from './shared';

export default function TrafficAtNight() {
  return (
    <GoogleMapsView
      style={{ flex: 1 }}
      mapOptions={{
        backgroundColor: '#1b1e24',
        camera: { center: ll(37.7815, -122.4075), zoom: 13.4 },
      }}
      userInterfaceStyle="dark"
      trafficEnabled
    />
  );
}

Colors, map styles and the SVG helpers svg, marker and pill come from shared.ts. Marker text uses the Roboto fonts bundled with the example app, see fonts.