Why there is no icons of fullscreen on my map?

Viewed 1140

I am using leaflet with react and I added a way to use the full screen but I have no icons on the button ... How can I do to add a button ?

Here is my code :

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import "./styles.css";
import FullscreenControl from "react-leaflet-fullscreen";


const App = () => {
  return (
    <div>
      <Map center={[51.505, -0.091]} zoom={13}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.091]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
        <FullscreenControl position="topright" />
      </Map>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Also you can see my code there : My code

Pic

1 Answers

You might be missing css import for FullScreenControl element.

If you look on:

You can always find these two lines:

  <link href="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" rel='stylesheet'/>
  <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

The second one (script tag) is part of your "react-leaflet" package, but you are still missing the first link tag that contains the css with fullscreen icon definition (regarding the react, I assume it should be placed either in import section or directly to the master page - unfortunately I do not know react well so I cannot be more specific).

Related