cvalenzuela / Mappa

A canvas wrapper for Maps 🗺 🌍
https://mappa.js.org
359 stars 104 forks source link

myMap.overlay(canvas) yields error: Cannot set property 'onload' of undefined #36

Open paraclete-pizza opened 4 years ago

paraclete-pizza commented 4 years ago

Hello,

In attempting to go through the basic tutorial, I end up getting the following error:

mappa.js:224 Uncaught TypeError: Cannot set property 'onload' of undefined
    at o.value (mappa.js:224)
    at setup (map.html:31)
    at e.<anonymous> (p5.min.js:32)
    at e.<anonymous> (p5.min.js:32)
    at new e (p5.min.js:32)
    at e (p5.min.js:32)

I updated the out-of-date code for loading the mappa js file, and, indeed, the console reads "Mappa loaded!" so I'm not sure what is causing the issue. It seems to be prompted y the command "myMap.overlay(canvas);" which is at line 31 of my map.html code.

Pasted below is the full text of the HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Basic Mappa Tutorial</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js" type="text/javascript"></script>
  <!---<script src="https://unpkg.com/mappa-mundi/dist/mappa.min.js" type="text/javascript"></script>--->
  <script src="https://cdn.jsdelivr.net/npm/mappa-mundi/dist/mappa.min.js" type="text/javascript"></script>

</head>

<body>
  <script>
  // Create a variable to hold our map
let myMap;
// Create a variable to hold our canvas
let canvas;
// Create a new Mappa instance using Leaflet.
const mappa = new Mappa('Leaflet');

// p5.js setup
function setup(){
  // Create a canvas 640x640
  canvas = createCanvas(640,640); 
  // Add a grey background
  background(100);

 // Create a tile map with lat 0, lng 0, zoom 4
  myMap = mappa.tileMap(0,0,4); 
  // Overlay the canvas over the tile map
  myMap.overlay(canvas);
}

// p5.js draw
function draw(){

}
  </script>
</body>

</html>
pbtank commented 3 years ago

I also had same problem. After some time tickling, I just downloaded mappa.js full from here and it just worked...