0

I'm trying to add map on the canvas and put tiles there with react-leaflet library v3.X. At the moment tiles are displaying as <img> in HTML. In latest versions of react-leaflet there isn't Map object there is MapContainer object only. So I can't add property preferCanvas=true to MapContainer. It is noteworthy that in old versions of react-leaflet there was Map object with preferCanvas option but then it was removed. I think another way to add map to canvas exists. Please, help.

import React, { useState, useEffect, useRef } from "react";
import { MapContainer as LeafletMap, TileLayer } from "react-leaflet";

// some code skipped
return (
<LeafletMap
  preferCanvas={true} // не работает
  center={[51.65, 103.72]}
  zoom={14}
  maxZoom={16}
  attributionControl={true}
  zoomControl={true}
  doubleClickZoom={false}
  scrollWheelZoom={true}
  dragging={true}
  animate={true}
  easeLinearity={0.35}
  whenReady={(map) => {
    setMapReady(true);
  }}
>
  <TileLayer
    url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
    id="mapbox/outdoors-v11"
  />
</LeafletMap>
  );
}
Alexander Baikalov
  • 23
  • 4

1 Answers1

0

preferCanvas was never intended to render tilelayer tiles as canvas elements. From the docs:

Whether Paths should be rendered on a Canvas renderer. By default, all Paths are rendered in a SVG renderer.

What you want to do is not built into leaflet, but is not too uncommon. Rather than build it totally from scratch, it looks like someone already built L.TileLayer.Canvas for vanilla leaflet. So all we need to do is bring it into react-leaflet. You can follow these docs on the react-leaflet website to create a custom react-leaflet component that is built from L.TileLayer.Canvas:

import { createLayerComponent } from "@react-leaflet/core";
import L from "leaflet";
import "tilelayer-canvas";

const createLayer = (props, context) => {
  const instance = L.tileLayer.canvas(props.url, { ...props });

  return { instance, context };
};

const updateLayer = (instance, props, prevProps) => {
  // you may not need all of these
  //or you may need others I didn't include here:
  if (prevProps.url !== props.url) {
    if (instance.setUrl) instance.setUrl(props.url);
  }
  if (prevProps.opacity !== props.opacity) {
    if (instance.setOpacity) instance.setOpacity(props.opacity);
  }
  if (prevProps.zIndex !== props.zIndex) {
    if (instance.setZIndex) instance.setZIndex(props.zIndex);
  }
};

const TilelayerCanvas = createLayerComponent(createLayer, updateLayer);

export default TilelayerCanvas;

Now in your map:

import TilelayerCanvas from "./TilelayerCanvas";

const Map = (props) => {
  return (
    <MapContainer ... >
      <TilelayerCanvas url="the_url" attribution="some_attribution" />
    </MapContainer>
  );
};

export default Map;

Working codesandbox

If you check the devtools, you'll see that tiles are rendered as canvas elements instead of img elements.

Seth Lutske
  • 9,154
  • 5
  • 29
  • 78
  • Thanks a lot for your answer! I think my queston isn't correct. I expected to put tiles on the canvas but they are displayed as . – Alexander Baikalov Apr 21 '21 at 12:37
  • Thanks a lot! This is what i wanted. How do you think is it better for performance than displaying as ? I see there are many `` blocks. They are created for each image. I hope finally all of them will work as one – Alexander Baikalov Apr 22 '21 at 07:30
  • I'm no expert but my experience is that img is more performant, especially when decising how to render tiles in leaflet. That idea is supported in [this thread](https://stackoverflow.com/questions/15541183/canvas-vs-img-performance). If you want all the tiles to be stitched together into a single canvas, that's a whole other task, and I don't think that would be performant at all. – Seth Lutske Apr 22 '21 at 14:17