turban / Leaflet.Photo

Plugin to show geotagged photos on a Leaflet map.
MIT License
137 stars 55 forks source link

Combination with mapbox? #6

Open chimaera8 opened 9 years ago

chimaera8 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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).