Cannot draw on top of the tilemap.

Question

Cannot draw on top of the tilemap.

tiganov opened this issue 6 years ago · 0 comments

I am using the following:

ES6 (babel)
jQuery for loading the p5.js script
npm for mappa

It displays the tilemap just fine, but I cannot draw anything on top of it.

Here is the JavaScript code where I attempt to draw an ellipse at the mouse cursor on top of the map.

import $ from "jquery";
import Mappa from 'mappa-mundi';

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js", function(data, textStatus, jqxhr) {

const key = 'REDACTED'

const mappa = new Mappa('Mapbox', key);

// Options for map
const options = {
  lat: 0,
  lng: 0,
  zoom: 4,
  studio: true,
  style: 'mapbox://styles/mapbox/traffic-night-v2',
};

let s = (sk) => {
  let myMap;
  let canvas;
  window.sk = sk;
  var width = $("#canvas").width();
  var height = $("#canvas").height();

  // SETUP
  sk.setup = () => {
    canvas = sk.createCanvas(width, height).parent('canvas');
    myMap = mappa.tileMap(options);
    myMap.overlay(canvas);
    sk.fill(109, 255, 0);
    sk.stroke(100);
    sk.background(100);
  }

  // DRAW
  sk.draw = () => {
    sk.clear();
    sk.ellipse(sk.mouseX, sk.mouseY, 40, 40);
  }
}
let P5 = new p5(s, "canvas");
});

And here is the HTML.

<html>
<head>
  <title>Express</title>
  <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css">
    <script src="./dist/bundle.js"></script>
</head>
<body>
  <!--<canvas id="myCanvas" resize></canvas>-->
  <div class="master-grid">
    <div class="center-panel">
      <!---------------------------------------------------------->
      <div id="canvas" style="width: 100%; height: 100%;"></div>
      <!---------------------------------------------------------->
    </div>
  </div>
</body>
</html>