Typererror message | cannot figure it out

p5.js Libraries
1

In the HTML file, I am attempting to set up Esri Leaflet. The base map displays, however, there is a ‘typerror’ message displayed in the console. I researched for too long and still can’t figure out the error. Any suggestions or insight?

TypeError: Cannot read properties of undefined (reading ‘_report’)
** at undefined:2:287964**

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.0/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"></script>

  <style>
    body { margin:0; padding:0; }
    #map {
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        color: #323232;
      }
  </style>

</head>

<body>
  <div id="map"></div>
<script>
const apiKey = "AAPK43ad0078f83f401285ffac7709d81374cVTH_XBvMKnl9Y0yJO-voiQ49PllhL97pieHnyptQOnKuj7xttYCn9tty54LSwwa";
const basemapEnum = "ArcGIS:Topographic"
const layer = L.esri.Vector.vectorBasemapLayer(basemapEnum, { apiKey: apiKey });
const map = L.map('map', {
  center: [34.027, -118.805]
});
map.setView([34.027, -118.805], 13); // latitude, longitude, zoom level, scale: 72223.819286
layer.addTo(map);


</script>

</body>

</html>
2

With Chrome on my machine, the map displays with no error:

map
map911×782 292 KB

1 Like
3

Upon playing with the opened map. the only complaint I can get in the console is the following, upon zooming out enough to get a view of about half of the United States:

Max vertices per segment is 65535: bucket requested 86880

Did you see your error upon opening the map, or did you perform an operation with the already opened map that raised the error?