Instagram leaflet show photos on map

Question

I am curently trying to make out one map to show my instagram photos.

After some research i 've found this github rep

https://github.com/turban/Leaflet.Instagram

and here you can see exactly what im trying to do.

http://turban.github.io/Leaflet.Instagram/examples/fancybox-cluster.html

So as you can see this awesome guy says that you have to change this line in the code

L.instagram('instagram_api_url_with_access_token').addTo(map);

And this is my changes to the code which is not loading my photos.

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet Instagram Popup</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta property="og:image" content="route.png" />
    <link rel="stylesheet" href="lib/leaflet/leaflet.css" />
    <link rel="stylesheet" href="../dist/Leaflet.Instagram.css" />  
    <link rel="stylesheet" href="css/map.css" />
</head>
<body>
    <div id="map"></div>
    <script src="lib/reqwest.min.js"></script>
    <script src="lib/leaflet/leaflet.js"></script>
    <script src="../dist/Leaflet.Instagram.js"></script>    
    <script>

    var map = L.map('map', {
        maxZoom: 3
    }).fitBounds([[59.22, 5.78], [59.28,5.89]]);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

    L.instagram('https://api.instagram.com/oauth/authorize/?client_id=51505b24ae5a47a38453a6c8e64ec102&redirect_uri=http://greekprojectara.eu/map/Leaflet.Instagram-gh-pages/examples/popup.html&response_type=03b31b104b5b42bc9e643a5fb98a1c1c'
    ).addTo(map); 

    </script>
</body>
</html>

But it doesnt show me any of my photos.

Of course i have make one app inside instagram api and i have put the correct client id and url direct. Also its the correct access token after i checked from this link

https://api.instagram.com/oauth/authorize/?client_id=51505b24ae5a47a38453a6c8e64ec102&redirect_uri=http://greekprojectara.eu/map/Leaflet.Instagram-gh-pages/examples/popup.html&response_type=code

What am i doing wrong (or can you guess anything wrong?)

Thanks!

P.S. you can see the map live at http://greekprojectara.eu/map/Leaflet.Instagram-gh-pages/examples/popup.html

P.S. 2.0 ... see it as a challenge... can you make one of your own instagram?

score 0 · Accepted Answer · answered Nov 17 '15 at 19:21

This plugin simply loads JSONP from the URL provided - see code @ https://github.com/turban/Leaflet.Instagram/blob/gh-pages/src/Leaflet.Instagram.js#L39

Notice that the examples provided don't actually touch Instagram - they hit CartoDB instead . See https://github.com/turban/Leaflet.Instagram/blob/gh-pages/examples/popup.html#L27

You're not passing it an URL that will kick you back data, you're giving it an endpoint to begin the authentication flow(https://instagram.com/developer/authentication/) ..which explains why you have JS errors in your console complaining about trying to parse Instagram's login page.

To begin getting this working, you will need to be passing the plugin a straight URL that delivers you the data you want with your access token included, not an authentication endpoint.That probably means grabbing the access token prior to initializing this plugin via some means inside the page with the Client-side implicit flow listed on https://instagram.com/developer/authentication/

Instagram leaflet show photos on map

1 Answers1