Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combination with mapbox? #6

Open
chimaera8 opened this issue Sep 21, 2015 · 2 comments
Open

Combination with mapbox? #6

chimaera8 opened this issue Sep 21, 2015 · 2 comments

Comments

@chimaera8
Copy link

Dear all,
thanks for that usefull plugin! However, I have a problem. As soon as I try to integrate Leaflet.Photo with a mapbox map, neither my map nor my photos are loaded.

If I replace your

var map = L.map('map', {
    maxZoom: 14
});

with my

L.mapbox.accessToken = 'xxxx';
/var map = L.mapbox.map('map', 'name.xxx');

and delete

L.tileLayer('http://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=norges_grunnkart&zoom={z}&x={x}&y={y}', {
attribution: '© Kartverket'
}).addTo(map);

the map does not load. What could be the problem? I could reduce the issue to that mapbox fact, so I can play with any other part of the code and it keeps working.

Sorry, if that question is a stupid one, but I'm not still a beginner in mapbuilding. Thank you very much for your help!

@ghost
Copy link

ghost commented Sep 21, 2015

Hi, I'm not sure why you have the / before "map" but you might try this:

 L.mapbox.accessToken = 'xxxx';

 var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/username.map-xxxxxxxx/{z}/{x}/{y}.png', {attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'});
 var map = L.map('map')
    .addLayer(mapboxTiles)
    .setView([48.8, -123.168], 8);

  L.instagram('https://api.instagram.com/v1/users/xxxxyourusernumberxxxx/media/recent?access_token=xxxxyouraccesstokenxxxx').addTo(map);

So you create the and define the variable "mapboxTiles" and then you use it in the map function later on, if that makes sense.
The example above is using the instagram api and it works in this example
http://intrvls.com/photomap/

@chimaera8
Copy link
Author

Hey there,

thanks a lot! The '/' is a leftover from a former comment, but that's not the reason since I modified it before testing :)
Finally, it turned out that the issue was a pretty simple one: I chose a wrong order of dependency imports. I imported the photo plugin before the main leaflet library and that didn't work out. Sorry for that obvious beginner error :/

But maybe I can stil ask another question: The examples work for Instagram and Picasa. Can I use it for any other photo upload platform? What does the platform have to offer? A developer's API for direct album/location access?
Maybe I'll start with Picasa (even if it's Google :P).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant