cvalenzuela / mappa Goto Github PK
View Code? Open in Web Editor NEWA canvas wrapper for Maps πΊ π
Home Page: https://mappa.js.org
A canvas wrapper for Maps πΊ π
Home Page: https://mappa.js.org
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?
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?
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
Only the unminified version seems to be available at https://unpkg.com/[email protected]/dist/
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:
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
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
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
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);
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!
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
Mappa/examples/tile/Threejs/script.js
Line 69 in 2ea199a
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.
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");
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.
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);
.
Unfortunately, Mapzen will cease operations at the end of January 2018
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!
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
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.
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 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?
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.
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?
Mobile pan and zoom are dysfunctional in MapboxGL : (
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:
Static maps:
Does the canvas render leaflet within leaflet itself basically has the same functionally as Mappa now?
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.
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)
I am using the following:
p5.js
scriptIt 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>
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 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?
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?
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 }'
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.