How to make leaflet responsive?-CodePudding

I am using leaflet and I try to make the cart responsive. But if I am on mobile. The cart is not responsive.
So I have this piece of code:

<!DOCTYPE html>
<html>
  <html lang="en-us">
    <head>
      <title>GeoVerdeling</title>
      <meta charset="UTF-8" />
      <meta name="keywords" content="HTML, CSS, JavaScript" />
      <meta name="description" content="Show geometric distribution" />
      <meta name="author" content="Victor Bom" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      <script
        type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
      ></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <script
        type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"
      ></script>

      <link
        rel="stylesheet"
        href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin=""
      />
      <link
        rel="stylesheet"
        href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
      />
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"
      />

      <!-- Make sure you put this AFTER Leaflet's CSS -->
      <script
        src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""
      ></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
      <style>
        #peMap {
          height: 1000px;
          width: 850px;
          background: rgba(76, 175, 80, 0);
          border: 5px double #000000;
        }

        div {
          margin-left: auto;
          margin-right: auto;
        }
        .center {
          margin-left: auto;
          margin-right: auto;
        }
      </style>

      <script>
        $(function () {
          va
            ["zundert", 51.4707015, 4.6623558, 865.0, 3],
            ["zutphen", 52.142736, 6.1960584, 2870.0, 33],
            ["zwartewaterland", 52.6015125, 6.0596251, 705.0, 2],
            ["zwijndrecht", 51.8105978, 4.6272719, 1000.0, 4],
            ["zwolle", 52.5167747, 6.0830219, 2690.0, 29],
          ];

          var maxBounds = [
            [50.8, 3.259], //Southwest
            [53.565, 7.335],
          ]; //Northeast

          var peMapOptios = {
            maxBounds: maxBounds,
            zoomSnap: 0,
            zoomDelta: 0.5,
            wheelPxPerZoomLevel: 120,
            minZoom: 7.5,
            maxZoom: 11,
          };
          var circleOptions = {
            color: "red",
            fillColor: "#f03",
            fillOpacity: 0.5,
          };

          var peMap = L.map("peMap", peMapOptios).setView([52.2, 5.3], 7.7);

          L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", {
            attribution:
              '&copy <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
          }).addTo(peMap);
          L.control.scale().addTo(peMap);

          var i;
          for (i = 0; i < dlist.length; i  ) {
            circle = L.circle(
              [dlist[i][1], dlist[i][2]],
              dlist[i][3],
              circleOptions
            ).addTo(peMap);
            circle.bindPopup(dlist[i][0]   ":"   String(dlist[i][4]));
          }
        });
      </script>
    </head>
    <body>
      <h3 style="text-align: center">Deelnemers per: 2022-05-08</h3>
      <div id="peMap"></div>
      <br />
      <p>
        Geregistreerde deelnemers: 3919, Bekende gemeenten: 330, Deelnemers
        toegekend aan gemeenten: 3096
      </p>
    </body>
  </html>
</html>
CodePudding user response：
Seems like you need to add max-width: 100% in the css to #peMap. Otherwise it’s always 850px wide.