Map of the latest photos of all people from these cities VK using VKScript
In this article we will make a map with the latest photos from the social network VK.COM added to it. The map shows photos not of individuals, but of cities. The map is updated online, which allows you to visually see what is happening in the world.
I will use the Leaflet library to draw a map.
Let's pass authorization of the VK application and configure the card:
')
If you want to do something similar for one point on the map, then the code below will suit you, but it does not suit us, since you need to receive photos from a variety of points on the map.
The problem is that the API VK restriction to 3 requests per second, from the client, so we will use execute , it will allow to collect information about 25 coordinates in one request.
I already wrote about execute in the previous article , so I’ll not write again.
So, let's go to the code using VKScript .
We will declare two arrays, in one we will store the coordinates of cities, and in the other the last added photo to the city (this is necessary so that no duplicates are added to the map).
By the way, why do I have a binding to the cities? The fact is that the photos.search method returns data only in a certain radius, the center of which is the coordinates from the map_ordinates array.
And add the getPhotos function:
You can call a function by passing 2 parameters into it: the radius and the number of photos requested in one request.
I had to do authorization, despite the fact that the method is open just does not return data.
Example sources: github.com/romkagolovadvayha/photomapsVKAPI
Example: go to
I will use the Leaflet library to draw a map.
Let's pass authorization of the VK application and configure the card:
')
VK.init({ apiId: 2866099 // ID VK }); var map = L.map('map',{maxBounds:[[-90, -180],[90, 180]]}).setView([56.94497418, 91.7578125], 3); L.tileLayer('http://a.tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 2 }).addTo(map); If you want to do something similar for one point on the map, then the code below will suit you, but it does not suit us, since you need to receive photos from a variety of points on the map.
Here is the code below
getPhotos(55.75030364, 37.62336731, 50000, 20, 0); function getPhotos(lat_,long_,radius_,count_, old_photo) { VK.Api.call('photos.search', {lat: lat_, long: long_, radius: radius_, count: count_, sort: 0, v: '5.27'}, function(r) { if(r.response) { for (var i=0;i<r.response.items.length;i++) { if (r.response.items[i].id != old_photo) { var myIcon = L.divIcon({html: '<div style="background-image: url(' + r.response.items[i].photo_75 + ');" class="icon_photo"></div>'}); L.marker([r.response.items[i].lat, r.response.items[i].long], { bounceOnAdd: true, icon: myIcon, riseOnHover: true }).addTo(map).bindPopup('<center><a href="http://vk.com/photo' + r.response.items[i].owner_id + '_' + r.response.items[i].id + '" target="_blank"> <br/><div style="background-image: url(' + r.response.items[i].photo_604 + ');" class="icon_photo2"></div></a></center>'); if (i == 0) old_photo = r.response.items[0].id; } else break; } setTimeout(function() { getPhotos(lat_, long_, 50000, 20, old_photo); }, 3000); } else alert(r.error.error_msg); }); } The problem is that the API VK restriction to 3 requests per second, from the client, so we will use execute , it will allow to collect information about 25 coordinates in one request.
I already wrote about execute in the previous article , so I’ll not write again.
So, let's go to the code using VKScript .
We will declare two arrays, in one we will store the coordinates of cities, and in the other the last added photo to the city (this is necessary so that no duplicates are added to the map).
var map_ordinates = [[55.7503, 37.6233],[56.8497, 53.2198],[55.7858, 49.1500],[59.9659,30.3434],[57.9848,56.3598],[54.5975,56.0961],[54.9271,73.4106],[51.5360,39.1772],[55.0091,82.9193],[56.4867,85.0177],[58.1272,52.6636],[51.1586,71.4907],[49.8946,73.2348],[50.4365,30.5255],[56.0415,51.9645]]; var map_old_photo = []; By the way, why do I have a binding to the cities? The fact is that the photos.search method returns data only in a certain radius, the center of which is the coordinates from the map_ordinates array.
And add the getPhotos function:
// radius_ - , count_ - . function getPhotos(radius_, count_) { // var code = 'return ['; for (var i=0;i<map_ordinates.length;i++) { code += 'API.photos.search({"lat": "' + map_ordinates[i][0] + '", "long": "' + map_ordinates[i][1] + '", "radius": "' + radius_ + '", "count": "' + count_ + '", "sort": 0, "v": "5.27"})'; if (i != map_ordinates.length-1) code += ','; } code += '];'; VK.Api.call("execute", {code: code}, function(data) { if (data.response) { for (var i=0;i<data.response.length;i++) { for (var j=0;j<data.response[i].items.length;j++) { if (data.response[i].items[j].id != map_old_photo[i]) { var myIcon = L.divIcon({html: '<div style="background-image: url(' + data.response[i].items[j].photo_75 + ');" class="icon_photo"></div>'}); L.marker([data.response[i].items[j].lat, data.response[i].items[j].long], { bounceOnAdd: true, icon: myIcon, riseOnHover: true }).addTo(map).bindPopup('<center><a href="http://vk.com/photo' + data.response[i].items[j].owner_id + '_' + data.response[i].items[j].id + '" target="_blank"> <br/><div style="background-image: url(' + data.response[i].items[j].photo_604 + ');" class="icon_photo2"></div></a></center>'); if (j == 0) map_old_photo[i] = data.response[i].items[0].id; } else break; } } setTimeout(function() { getPhotos(50000, 20); }, 3000); } else alert(data.error.error_code + ' ' + data.error.error_msg); }); } You can call a function by passing 2 parameters into it: the radius and the number of photos requested in one request.
getPhotos(5000, 20); I had to do authorization, despite the fact that the method is open just does not return data.
Example sources: github.com/romkagolovadvayha/photomapsVKAPI
Example: go to
Source: https://habr.com/ru/post/248993/
All Articles