cvalenzuela/Mappa

latLngToPixel method always returns -100, -100

54M5M17H opened this issue · 1 comments

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 }'

Looking at the src I realised I was running into the problem on this line:
https://github.com/cvalenzuela/Mappa/blob/master/src/providers/tile/Leaflet.js#L67

& that the onchange event emitted when ready state changed.
I will close the issue. Thank you for your work on Mappa, it's great!