import { Map, TileLayer, LayersControl } from "react-leaflet";
import PouchDBTileLayer from "react-leaflet-pouchdb-tilelayer";

<Map center={[22.287, 114.1694]} zoom={15}>
  <LayersControl position="topleft">
    <LayersControl.BaseLayer checked name="PouchDBTileLayer">
      <PouchDBTileLayer
        useCache={true}
        crossOrigin={true}
        attribution='&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </LayersControl.BaseLayer>
    <LayersControl.BaseLayer name="TileLayer">
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
    </LayersControl.BaseLayer>
  </LayersControl>
</Map>;