cvalenzuela / mappa Goto Github PK

I think the documentation could be expanded on how append() works and what it actually does? Is the map rendered as a background on the canvas? Is the map a separate DOM element behind the canvas?

Hey, what a cool project! I'm really excited to play with it.

package.json:

{
    ...
    "main": "dist/index.js",
    ...
}

but it looks like that file does not exist

> ls node_modules/mappa-mundi/dist
mappa.js  mappa.js.map  mappa.min.js  mappa.min.js.map

Should main be pointing to mappa.js instead, or should an index.js file actually exist?

Hi Cristóbal,

thanks again for this great library! It really helps connecting p5.js with tile maps. While playing around, I have had a small issue:

I cannot seem to call the map.on('load') method. I would need this functionality to handle events on the map object after it is initialized. Here is what I have come up with so far:

  let token = "xxx";
  let mappa = new Mappa("Mapboxgl", token);
  let myMap;
  let canvas;

  function setup(){
    canvas = createCanvas(windowWidth, windowHeight);
    myMap = mappa.tileMap(mapOptions); // lat 0, lng 0, zoom 4
    myMap.overlay(canvas);

    let mapObject = myMap.map;
  
    mapObject.on("load", function(){
      console.log("Map is ready!");
    })
}

When doing this, I get the following error:

Could you maybe help out?

Only the unminified version seems to be available at https://unpkg.com/[email protected]/dist/

I would like to resize the map when the windowResized function of p5 is called.
I noticed the map doesn't scale with the canvas.
Is there any way to resize the map?

I think 'Mapboxgl' should be 'MapboxGL'. It's very strange that source code is wrong here, but here is the right code so the Mappa performance on the website is right.

I'm using Leaflet with raw HTML canvas. Everything seems to be setup okay, the canvas element is fitted over the leaflet layer (the leaflet layer is always 5px, though I don't think that is the source of the problem).

When I call the map method with any lat & lng the method always returns { x: -100, y: -100 }.
This makes me think that I haven't configured the overlay correctly, but I'm sure I have followed the examples.

Any help would be really helpful, & I love the project!

import Mappa from 'mappa-mundi';
import Canvas from './Canvas.js';

const mappa = new Mappa('Leaflet');

const options = {
	lat: 0,
	lng: 0,
	zoom: 0,
	style: "https://cartodb-basemaps-{s}.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png"
}

const Map = mappa.tileMap(options); 
Map.overlay(document.getElementById('canvas'));
const pos = Map.latLngToPixel(50, 10);
console.log('pos: ', pos); // logs >> 'pos: { x: -100, y: -100 }'

It would be rather nice if it wasn't necessary to create a new map with each new Mappa layer. I may have missed it though is there currently some way to do this?

Hi, I am trying to use mappa using plain javascript canvas, without using p5.js, as I can't follow the setup and draw pattern due to some restrictions. I am running into some issues, specially related to many of the functions of leaflet used after mappa.tileMap('leaflet'); not working, or giving errors.

Would you mind to upload an example using plain canvas, or another canvas plugin differen from p5.js ?
Also, which API version of Leaflet should I use ? For example I am using these function to disable zoom control on my map, and they work with plain leaflet, but they don't work with mappa:

map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
$(".leaflet-control-zoom").css("visibility", "hidden");

Does the canvas render leaflet within leaflet itself basically has the same functionally as Mappa now?

I get the error message this.scriptTag is undefined and a blank Mappa canvas when I build my code to get it ready for deployment for a project that I am working on. My code is instantiating a Mappa object via the Leaflet provider and the error message appears when I call the overlay method on said object using an existing canvas as the argument.

After some tracing and print-debugging I found the following in Mappa/src/providers/tile/Leaflet.js:

if (this.constructor.name === 'Leaflet') {
    this.loadSrc();
}

The project that I am working on is using the Vue.js framework and it uses the vue-cli's build command to minify/uglify the code. As a part of this process classes get renamed to single character variants and so this.constructor.name no longer equals Leaflet (in my case it became the single character t) which causes this.loadSrc() to not run. Because of this the scriptTag property is not getting defined thus leading to the the error that I see.

I took a look at the code for the other tile-based providers and I can't see a reason for this check to be here, I don't think we need. Once the check is removed the issue that I've observed will get resolved as well.

https://editor.p5js.org/piecesofuk/sketches/Bk2ukOqGG

Some of the README examples have code like this:

myMap.latLng(data[9], data[8]);

I think this is supposed to be something like. . .

var pos = myMap.latLng(40, 72);

Unfortunately, Mapzen will cease operations at the end of January 2018

Hey!

First of all: Thanks for creating this wonderful extension of P5js trough maps!

I wanted to kindly ask if this project is still under active development. I was wondering because the last code contribution is a couple of years ago and many issues are open. I totally understand of course that voluntarily maintaining such a code base takes a lot of time and can't be always done. I just wanted to ask to better assess how the project will go in the future.

Best,
Max

Below is the code I use to create a map and associated overlay.
(I am using p5 in instance mode because I have multiple sketches on the same page)

const sketchForMap = p => {
    p.setup = function setup() {
        this.canvas = createCanvas(Visual.width, Visual.height);
        this.canvas.id('p5MapOverlay');

        let myMap = mappa.tileMap(options);
        myMap.overlay(this.canvas);
    };
    p.draw = function draw() {
        fill('green');
        rect(100, 100, 100, 100);
    };
};
this.myFunInstance = new p5(sketchForMap); // here we invoke it 

Later on in the code I delete it by using

let mappaContainer = select('#mappa');
mappaContainer.remove();
this.myFunInstance.remove();

Which acts as expected.
However, when I go to redraw the map and sketch again using the above code I get the following error.

mappa.min.js:1 Uncaught TypeError: Cannot set properties of undefined (setting 'onload')
    at Leaflet.overlay (mappa.min.js:1:9160)
    at p5.setup (blackBoxMap.js:28:23)
    at p5._setup (p5.js:64079:27)
    at p5._start (p5.js:64002:25)
    at new p5 (p5.js:64355:22)
    at BlackBoxMap.superSetup (blackBoxMap.js:37:30)
    at Gallery.selectVisual (gallery.js:94:30)
    at _main.default.Element.<anonymous> (gallery.js:54:12)

A similar issue has been raised in issues #36 and #11 and in both of those they recommend that I update my version of p5.js or mappajs I have tried both of these and it has not worked.
And a related issue has been raised in #45.
In addition to the above, I have attempted to fiddle around with the onload function in the HTML tags and that has not worked either.

Any help or suggestions would be appreciated.

EDIT: In the first block of code I changed the line myMap.overlay(canvas); to myMap.overlay(this.canvas);.

Hi this may be some of a noob question, but i cannot figure out how to access the map object the provider, provides.

For example, im using MaboxGL.

mappa = new Mappa('MapboxGL', mappaKey);
myMap = mappa.tileMap(options);

If i wanted to use the Mapbox member isMoving(), how would I be able to do it?

Hey,

I have a problem with mappa.js, it is the very basic. I was following the tutorial https://mappa.js.org/docs/simple-map.html and my code doesn't work :

let myMap;
let canvas;
const mappa = new Mappa('Leaflet');

function setup(){
	 canvas = createCanvas(640,640); 
	 background(100);

	 myMap = mappa.tileMap(0,0,4); 

	 myMap.overlay(canvas);
}

function draw(){

}

What I found is that the line myMap.overlay(canvas); is the problem.
This is the console error :

mappa.js:224 Uncaught TypeError: Cannot set property 'onload' of undefined
    at o.value (mappa.js:224)
    at setup (test.js:11)
    at p5.<anonymous> (p5.js:9111)
    at p5.<anonymous> (p5.js:9041)
    at new p5 (p5.js:9323)
    at _globalInit (p5.js:5602)

Thanks for helping me.

I'm trying to load a geoJson containing several features (polygons and multi polygons) with data attached.

I't not clear to me, however, how to display them using mappa.

the API documentation explains how to load them but not how to display them.

Also, i have issue loading the geojson itself. When I try to laod polygons i get this error:

Uncaught (in promise) TypeError: Cannot read property 'type' of null

at i (mappa.js:463)

at mappa.js:482

at Array.forEach (<anonymous>)

at e.default (mappa.js:481)

at o.value (mappa.js:271)

Could you provide a simple example?

thanks

Hello,

is it possible to destroy a whole map including the overlay and so on? I have the problem, that I got a little Application, that loads different Charts with P5.js. When I display the Mappa Part, Mappa creates a div arround my canvas and I want to restore the old state, when I change the chart again, so that the wrapping leaflet-div gets removed.

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>

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>

Sorry for the continuous posting of issues.

When i try to use the pixelToLatlng() function i get this error:

Uncaught TypeError: myMap.pixelToLatlng is not a function

Here an example using it. If you open the console and click on the map you should see the error.

Hi guys,

I'm getting this error when I re-run this skeatch:

let myMap;
let canvas;
let locationData;

const mappa = new Mappa('Leaflet');
const options = {
lat: 40,
lng: 0,
zoom: 4,
style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
}

p5.setup = function() {
locationData = p5.getCurrentPosition();
canvas = p5.createCanvas(640,640);
myMap = mappa.tileMap(options);
myMap.overlay(canvas);

// Add a color to our ellipse
p5.fill(200, 100, 100);
console.log(locationData.latitude +" "+ locationData.longitude);

}

p5.draw = function() {
p5.clear();
console.log(locationData.latitude +" "+ locationData.longitude);
// Every Frame, get the canvas position
// for the latitude and longitude of Nigeria
const nigeria = myMap.latLngToPixel(locationData.latitude, locationData.longitude);
// Using that position, draw an ellipse
p5.ellipse(nigeria.x, nigeria.y, 20, 20);
$("#mappa").detach().appendTo("#kajero-p5-3");
}

The error is invocked by myMap.overlay(canvas); . I executed correctly the sketch in the first time, but I'm getting this error the second time.

Best

in "getting started" this URL is provided:

https://unpkg.com/mappa-mundi/dist/mappa.min.js

However it return error, seems that the minified version is not available.

Apparently you are not providing the minified file for version 0.5:

https://unpkg.com/[email protected]/dist/

Dear friends from Mappa,

is this the right place for code questions?

I'm building a project based on the three.js + mapbox example (https://mappa.js.org/docs/examples-three-js.html) but I'd like to have a different 3d object zoom behaviour.
I'd like the 3d objects on top of the map to change the zoom level according to the map zoom, so they could keep their relative sizes to the map features. Is it possible?

Thank you!

Alexandre Rangel
www.quasecinema.org

Hey

Thanks for your library, it is very useful.

One issue I detected. The display device pixel ratio is not considered when creating the map.
On retina displays the map thus extends beyond the canvas (doubled in size)
See linked gif. The dots dissapear once the float out of the canvas.
https://media.giphy.com/media/J0IpaB7IDutgQIxnzh/giphy.gif

Any suggestions?

Here is a discussion on how to check for displays with retina support:
https://stackoverflow.com/questions/19689715/what-is-the-best-way-to-detect-retina-support-on-a-device-using-javascript

I just read your post in the Processing Foundation blog. I think this project is very cool. I'm looking at some of the tutorials and they appear to be very complete. Will definitely use as a resource and reference. Congrats and thank you!

Mobile pan and zoom are dysfunctional in MapboxGL : (

Thank you for this great library! I'm hoping to make something similar to the Mapox GL example titled "Create a draggable point":

https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/

Luckily there is a p5.js example that accomplishes something similar (https://p5js.org/examples/input-mouse-functions.html). HOWEVER! When I try implement this with Mappa.js, the following problem occurs: When I try to drag a point with my mouse, it moves the underlying map as well since the map is binded to mouse drags.

Is there a way to temporarily unbind the map from the mouse?

I.e. something like the below:

// Unbind mouse/touch events
map.off('mousemove', onMove);
map.off('touchmove', onMove);

Thank you very much!

I tried cloning the repo and copying the code of the map colored each country a different shade of blue. I get two TypeErrors when inspect the page that says "Loading..." on Chrome an go to the Console output.

mappa.js:643 Uncaught TypeError: _staticMap[this.provider] is not a constructor
    at Mappa.staticMap (mappa.js:643)
    at script.js:14
script.js:21 Uncaught TypeError: Cannot read property 'imgUrl' of undefined
    at preload (script.js:21)
    at e.<anonymous> (p5.min.js:6)
    at new e (p5.min.js:6)
    at e (p5.min.js:5)

setting as option style:mapbox://styles/username/mapid mappa.js will load this url:

https://api.mapbox.com/styles/v1/mapbox/mapbox://styles/username/mapid/static/0,0,1,0,0/640x640?access_token=XYZ

According to documentation, the correct url should be:

https://api.mapbox.com/styles/v1/username/mapid/static/0,0,1,0,0/640x640?access_token=XYZ

The examples in the examples directory do not work for the most part, below are exactly which ones work and which don't:

Tile maps:

• Threejs ✘
• Threejs ✘
• Leaflet ✓
• Mapboxgl ✘
• Mapbox ✘
• Google ✓

Static maps:

• Mapquest ✓
• Mapbox ✓
• Google ✘

Hi,

So I am trying to use Mappa and p5 run inside a React component.

But when the app is rendered, the Leaflet map ends up outside the id=app and <canvas> elements. The map works fine with scroll, drag etc.

<html lang="en">
<head> {...} </head>
<body>
	<div id="app">
		<div>
			<canvas id="defaultCanvas0" class="p5Canvas" style="width: 500px; height: 500px;" width="1000" height="1000"></canvas>
		</div>
	</div>
	<script id="Leaflet" async="" src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
	<div id=" {a long random id} " class=" {all the leaflet classes} " style="width: 500px; height: 500px; position: relative;" tabindex="0"></div>
</body>
</html>

The error message from the React framework trying to put the map inside the app.

Uncaught TypeError: Node.appendChild: Argument 1 does not implement interface Node.
    onAdd webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:354
    _layerAdd https://unpkg.com/[email protected]/dist/leaflet.js:5
    whenReady https://unpkg.com/[email protected]/dist/leaflet.js:5
    addLayer https://unpkg.com/[email protected]/dist/leaflet.js:5
    canvasOverlay webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:360
    createMap webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:340
    onload webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:228
    overlay webpack://alpha.klimakode.dk/./node_modules/mappa-mundi/dist/mappa.js?:219
    setup webpack://alpha.klimakode.dk/./src/components/Map/Map.v1.js?:34
    _setup webpack://alpha.klimakode.dk/./node_modules/p5/lib/p5.min.js?:3
    _start webpack://alpha.klimakode.dk/./node_modules/p5/lib/p5.min.js?:3
    _ webpack://alpha.klimakode.dk/./node_modules/p5/lib/p5.min.js?:3
    componentDidMount webpack://alpha.klimakode.dk/./src/components/Map/Map.v1.js?:45
    React 6
    unstable_runWithPriority webpack://alpha.klimakode.dk/./node_modules/scheduler/cjs/scheduler.development.js?:468
    React 9
    <anonymous> webpack://alpha.klimakode.dk/./src/index.js?:13
    js http://localhost:8080/main.js:41
    __webpack_require__ http://localhost:8080/main.js:414
    <anonymous> http://localhost:8080/main.js:1470
    <anonymous> http://localhost:8080/main.js:1472

My Map.v1.js file:

import React from "react"
import p5 from "p5"
import Mappa from "mappa-mundi"

class Map extends React.Component {
	constructor(props) {
		super(props)
		this.myRef = React.createRef()
	}

	Sketch = (p) => {
		var options = {
			lat: 0,
			lng: 0,
			zoom: 4,
			style: "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
		}

		var myMap
		var mappa = new Mappa("Leaflet")

		p.setup = () => {
			p.createCanvas(500, 500)
			// p.background("#ff0000")
			myMap = mappa.tileMap(options)
			myMap.overlay(p)
		}

		p.draw = () => {
			// p.circle(p.mouseX, p.mouseY, 10)
		}
	}

	componentDidMount() {
		this.myP5 = new p5(this.Sketch, this.myRef.current)
	}

	render() {
		return <div ref={this.myRef}></div>
	}
}

export default Map

My index.js file:

import ReactDOM from "react-dom"
import React from "react"
import Map from "./components/Map/Map.v1"

const App = () => {
	return <Map />
}

ReactDOM.render(<App />, document.getElementById("app"))

Am I doomed trying to make it work inside a React component? Or is there a way I can solve the Node.appendChild: Argument 1 does not implement interface Node. problem?

Hi there

I can't seem to remove the Leaflet map zoomControls, stop zooming on mouseScroll, or the Leaflet watermark.

I added zoomControl:false to options {}, but that didn't seem to work.

Any ideas?

I have a leaflet map which has the width and height of the window. If I resize the window the map size get updated. Somehow the new values are not translated from the map to canvas elements. How can this be achieved?