Limit posts from Instagram API on a Google Map based on radius in current window

☆樱花仙子☆ 提交于 2019-12-30 05:31:08

问题


So I have the code below which is the front end on a node.js app which pulls Instagram posts with a certain hashtag. Right now it posts all over the world. Is there a way to limit the radius on the posts and if possible, limit to the window that is currently visible to the user? I'm using the Instagram Real Time tag subscription.

function initialize() {

    var styles = [{
        "featureType": "landscape",
            "stylers": [{
            "color": "#808080"
        }, {
            "visibility": "simplified"
        }]
    }, {
        "featureType": "administrative",
            "elementType": "labels.text.fill",
            "stylers": [{
            "weight": 0.1
        }, {
            "lightness": 100
        }, {
            "visibility": "off"
        }]
    }, {}];

    var mapOptions = {
        center: new google.maps.LatLng(32.71533, -117.15726),
        zoom: 4,
        scrollwheel: false,
        scaleControl: true,
        styles: styles
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
    mapOptions);

    var socket = io.connect();
    socket.on('photo', function (data) {
        var icon = {
            url: data.img, // url
            size: new google.maps.Size(80, 80), // size
        };
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(data.lat, data.long),
            draggable: true,
            animation: google.maps.Animation.DROP,
            icon: icon,
            map: map,
            title: data.caption
        });
    });

    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {
            var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            map.setCenter(pos);
        }, function () {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }
}

function handleNoGeolocation(errorFlag) {
    if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
    } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
    }

    var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
    };

    var infowindow = new google.maps.InfoWindow(options);
    map.setCenter(options.position);
}

// Finally, call map
google.maps.event.addDomListener(window, 'load', initialize);

回答1:


As far as I'm aware, there is no way to combine endpoints, ie Geographies and Tags into one search. I would think you have 2 options and both will be fairly labour intensive on your end, depending on the popularity of the hashtag/s, and the radius of your geography. I'm interested to see more opinions on this.

Option 1

  • Keep your realtime Tag subscription
  • Process the results manually to filter by the location information provided with each photo

Example from doc:

...
"location": {
    "latitude": 37.780885099999999,`
    "id": "514276",
    "longitude": -122.3948632,
    "name": "Instagram"
}
...

Pros:

  • You've already got a tag subscription.
  • You are not restricted to any radius

Cons:

  • Figuring out what photos fall into your desired radius sounds pretty complicated.

Option 2

  • Create a realtime Geography subscription
  • Process the results manually to filter by the tag information provided with each photo

Example from doc:

...
        "tags": ["expobar"],
...

Pros:

  • Manually filtering by tag is likely going to be much easier

Cons:

  • You're restricted to a max radius of 5000m in your geography subscription

UPDATED ANSWER:

I think you're confused between Locations and Geographies, what you describe in your last comment (thinking out loud) is exactly what I was trying to suggest in option 2. Locations are places where you can tag a photo when uploading, for instance 'Starbucks Downtown', and are not terribly useful IMO, whereas Geographies use latitude, longitude & a radius, and are perfect for what you want to achieve - finding and displaying photos taken in close proximity, no matter where the user is.

Check out the "Geography Subscriptions" section of http://instagram.com/developer/realtime/

Creating a Geography Subscription is very similar to a Tag subscription so it shouldn't take much to tinker with what you've already got. As you guessed, you will just need to use a javascript library to grab the users lat/longitude first




回答2:


The Instagram real-time API has a Geography Subscription as per the documentation which allows you to specify a position and a radius.

To create a subscription to a geography, specify a center latitude and longitude and a radius of the area you'd like to capture around that point (maximum radius is 5000 meters).

We don't really know from your question where the issue is, so let's hope this helps.



来源:https://stackoverflow.com/questions/21870059/limit-posts-from-instagram-api-on-a-google-map-based-on-radius-in-current-window

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!