react-leaflet#LayersControl JavaScript Examples

The following examples show how to use react-leaflet#LayersControl. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: Map.jsx From doc2pen with Creative Commons Zero v1.0 Universal

6 votes

MapLayers = () => {
	return (
		<LayersControl position="topright">
			<LayersControl.BaseLayer name="OSM Light">
				<TileLayer
					attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
					url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
				/>
			</LayersControl.BaseLayer>
			<LayersControl.BaseLayer checked name="Thunderfrost">
				<TileLayer url="https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png" />
			</LayersControl.BaseLayer>
			<LayersControl.BaseLayer name="Alidade Dark">
				<TileLayer url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png" />
			</LayersControl.BaseLayer>
			<LayersControl.BaseLayer name="Stamen Dark">
				<TileLayer url="https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}{r}.png" />
			</LayersControl.BaseLayer>
			<LayersControl.BaseLayer name="Carto Dark">
				<TileLayer url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png" />
			</LayersControl.BaseLayer>
			<Marker position={position}>
				<Popup>
					<p>Doc2Pen</p>
					<a href="mailto:[email protected]">[email protected]</a>
				</Popup>
			</Marker>
		</LayersControl>
	);
}

Example #2

Source File: MyMap.js From viade_en1b with MIT License

5 votes

myMap = (center, positions, style) => {
  return (
    <div
      data-testid="mymap-container"
      //id="mapContainer"
      className={style ? style : "leaflet-container"}
    >
      <Map
        data-testid="mymap-map"
        zoomControl={false}
        center={center}
        zoom={14}
      >
        <LayersControl position="topleft">
          <LayersControl.BaseLayer
            checked="false"
            name="OpenStreetMap.BlackAndWhite"
          >
            <TileLayer
              attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>
          <LayersControl.BaseLayer checked="true" name="OpenStreetMap.Mapnik">
            <TileLayer
              data-testid="mymap-tilelayer"
              attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>
          <FullScreenControl position="topright"></FullScreenControl>
        </LayersControl>

        <Polyline
          data-testid="mymap-polyline"
          color={"var(--color-primary)"}
          positions={positions}
        ></Polyline>
      </Map>
    </div>
  );
}

Example #3

Source File: LeafletLayersControl.js From dash-leaflet with MIT License

5 votes

LayersControlExport.BaseLayer = LayersControl.BaseLayer

Example #4

Source File: LeafletLayersControl.js From dash-leaflet with MIT License

5 votes

LayersControlExport.Overlay = LayersControl.Overlay