React-leaflet: Provider Functionality

[ekatzenstein]

Does this library have provider functionality? I'm unable to find documentation regarding this.

[Spaxe]

Could you elaborate what you mean by provider functionality, @ekatzenstein?

[PaulLeCam]

If you are referring to something like the <Provider> component in react-redux, no it doesn't.

[craigbeck]

I believe this is in reference to tile providers: https://github.com/leaflet-extras/leaflet-providers

[kevincolten]

import 'leaflet-providers';
import { Map } from 'react-leaflet'
import L from 'leaflet';

//...

  componentDidMount = () => {
    L.tileLayer.provider('CartoDB.DarkMatter').addTo(this.refs.map.leafletElement)
  }

//...
  render = () => <Map ref='map' />

[bernzJ]

I feel like I spent way to much time figuring this (new leaflet api). So the simple answer, copy your provider url to the component's tile layer:

import React, { useState } from 'react';
import { Map, TileLayer } from 'react-leaflet';

const MyMap = props => {
  const [state, setState] = useState({
    lat: 51.505,
    lng: -0.09
  });
  const position = [state.lat, state.lng];
  return (
    <Map center={position} zoom={13} zoomControl={false} maxZoom={20}>
      <TileLayer
        attribution='&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png"
      />
    </Map>
  );
};

export default MyMap;

[christiaanwesterbeek]

I seem to be understanding that providers = tile layers with some url. If you're reading @bernzJ's comment thinking (like me) yeah that seems simple enough, I want that but what are the url's I need? Just head to https://leaflet-extras.github.io/leaflet-providers/preview/, select the layers you like and copy-paste the url + attribution of each as props in your TileLayers. For example for having Mapnik+Openseamap , you go:

<Map ...>
    <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <TileLayer
        attribution='Map data: &copy; <a href="http://www.openseamap.org">OpenSeaMap</a> contributors'
        url="https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png"
    />
</Map>

I don't need leaflet-providers for this.

[tdurant72]

I get this for free services what about for something like Bing Maps? I can't find any documentation on how to add other paid services.