Geekly Articles each Day

Nokia Maps JS APIおよびTwitter Search APIを使用したマッシュアップの作成

先週、Nokia Mapsは最も人気のあるFlickr写真ホスティングに統合され、ジオタグ付きの写真を地図上で見ることができる興味深いマッシュアップをもたらしました。



Nokia Mapsに基づくマッシュアップのトピックを継続することにしました。本日は、Nokia Maps JS API + Twitter Search APIを使用して、Twitterのさまざまなハッシュタグの使用の強度を地図上に表示する方法を示します。 このようなマッシュアップは、次の画像のようになります。



伝統的に、私たちはマップを初期化するindex.htmlを作成することから始めます。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Nokia Maps Heatmap demo</title> <link rel="stylesheet" href="main.css"> </head> <body> <div id="annotations"> <h2></h2> </div> <div id="map" class="map"><div id="map-loading" class="map-loading"></div></div> <script src="http://api.maps.nokia.com/2.2.1/jsl.js?with=all"></script> <script src="places-heatmap.js"></script> <script src="process-tweets.js"></script> </body> </html>


ご覧のとおり、3つのjavascriptスクリプトをすぐに特定しました。 最初のスクリプト api.maps.nokia.com/2.2.1/jsl.js api.maps.nokia.com/2.2.1/jsl.jsは、 前回の投稿で既におなじみかもしれません api.maps.nokia.com/2.2.1/jsl.js Maps JS APIをロードします。

places-heatmap.jsは、オーバーレイマップへの強度マップのレンダリングと追加を担当します。 次のprocess-tweets.jsスクリプトprocess-tweets.js 、特定のハッシュタグを使用して位置情報データを含むツイートをprocess-tweets.jsし、これらのツイートを強度マップのデータ構造内の記録情報（緯度/経度、都市）でジオコーディングします。

これらのスクリプトの説明は、コードへのコメントで直接提供されます。

places-heatmap.js


 var HH = {}; //      Nokia Maps JS API nokia.Settings.set("appId", "_peU-uCkp-j8ovkzFGNU"); nokia.Settings.set("authenticationToken", "gBoUkAMoxoqIWfxWA5DuMQ"); nokia.Settings.set("defaultLanguage", "ru-RU"); HH.HeatmapLoader = function () { var self = this, map, mapLoad, heatmapLoad, heatmapProvider; //   ,       mapLoad = function () { var mapContainer = document.getElementById("map"); self.map = new nokia.maps.map.Display(mapContainer, { //     ,    zoomLevel: 3     center: [55, 37], zoomLevel: 3, components: [ new nokia.maps.map.component.Behavior() ] }); }; //    ,      heatmapLoad = function () { var color_range = { //       . //      1,   — 0. stops: { //    ,        —  ,       "0": "rgba(0, 0, 64, 1)", "0.15": "rgba(0, 0, 64, 1)", "0.3": "rgb(32, 32, 96)", "0.4": "rgb(96, 96, 128)", "0.5": "rgb(255, 255, 255)" }, //      ,     interpolate: true }; try { if(!self.heatmapProvider) { //     heatmapProvider = new nokia.maps.heatmap.Overlay({ //     colors: color_range, //   ,     max: 20, //   ,    opacity: 1, //     type: "density", //       coarseness: 1, //  ,   , ,     assumeValues: true }); } } catch (e) { //       , //      canvas alert(e); } //            if (heatmapProvider && HH.tweetheatmap) { //      heatmapProvider.clear(); heatmapProvider.addData(HH.tweetheatmap.allPlaces); //      self.map.overlays.add(heatmapProvider); } }; //      return { map: map, mapLoad: mapLoad, heatmapLoad: heatmapLoad, heatmapProvider: heatmapProvider }; }; //   HeatmapLoader HH.heatmap = new HH.HeatmapLoader();


Nokia Maps API Reference Webサイトで使用されているnokia.maps.heatmap.Overlayクラスの詳細を読むことができますが、コードへのコメントでは、 nokia.maps.heatmap.Overlay.Optionsで設定されるオーバーレイ自体の一部の設定を除き、すべてのパラメーターがリストされています。 。

process-tweets.js


 HH.TweetHeatmap = function () { "use strict"; var self, init, pageSetup, switchInput, changeHash, allPlaces = [], addPlaces, addSearch, tweetPlace, getLocation, addToPlace, futureCheck, futureCount = 0, rendered = false, locationsObj = {}, locationsTweets = [], displayHeatmap; init = function () { var locations, i; self = this; //     ,       if (nokia.maps && HH.heatmap) { HH.heatmap.mapLoad(); } //    ,   #nokia if (window.location.hash === '') { window.location.hash = 'nokia'; } pageSetup(); //   Twitter Search API    ,        locations = [[55.75697, 37.61502], [0, 100], [0, 50], [0, 0], [0, -50], [0, -100], [0, -150], [50, 150], [50, 100], [50, 50], [50, 0], [50, -50], [50, -100], [50, -150], [-50, 150], [-50, 100], [-50, 50], [-50, 0], [-50, -50], [-50, -100], [-50, -150]]; //    ,   ,    document.getElementById('map-loading').style.display = 'block'; //    ,   locations,      Twitter Search API    for (i in locations) { self.addSearch(locations[i], window.location.hash.substring(1)); } //           , //   ,  ,    setTimeout(displayHeatmap, 8000); }; //  JSONP-     ,  Twitter Search API //     addPlaces addSearch = function (location, hashtag) { //  Twitter Search API   : https://dev.twitter.com/docs/api/1/get/search var url = 'http://search.twitter.com/search.json?geocode=' + location[0] + ',' + location[1] + ',8000km&q=%23' + hashtag + '&rpp=100&callback= HH.tweetheatmap.addPlaces', script = document.createElement("script"); script.setAttribute("src", url); document.body.appendChild(script); }; //     ,       addPlaces = function (data) { var i; if (data && data.results && data.results.length) { //    . self.futureCount += data.results.length; for (i = data.results.length - 1; i >= 0; i--) { var location = data.results[i].location if (location) { location = location.replace('iPhone: ','') self.getLocation(location); } else { //       ,     self.futureCount--; } }; } }; //  JSONP-  Nokia Maps geocode API    Twitter       getLocation = function (location) { // q —  , vi —  , dv —  , to —     var url = 'http://where.desktop.mos.svc.ovi.com/json?q=' + encodeURI(location) + '&to=1&vi=address&dv=NokiaMapsAPI&callback_func=HH.tweetheatmap.addToPlace', script = document.createElement("script"); script.setAttribute("src", url); document.body.appendChild(script); }; //      ,  //       addToPlace = function (data) { if (data.results && data.results.length) { var location_title = data.results[0].properties.title, type = data.results[0].properties.type, lon = data.results[0].properties.geoLongitude, lat = data.results[0].properties.geoLatitude; if (type != 'Country' && type != 'State' && type != 'Continent'){ if (locationsObj[location_title]) { locationsTweets[locationsObj[location_title]].tweets += 1; } else { locationsObj[location_title] = locationsTweets.length locationsTweets.push({ 'city': location_title, 'tweets': 1, 'longitude': lon, 'latitude': lat }); } } if (!rendered) { allPlaces.push({ "latitude" : lat, "longitude" : lon, "city" : location_title, "country" : data.results[0].properties.addrCountryName }); } } self.futureCheck(); }; //      ,   . //   ,       futureCheck = function () { self.futureCount--; if (self.futureCount<=0) { displayHeatmap(); } }; //   ,       displayHeatmap = function() { if(!rendered) { rendered = true; document.getElementById('map-loading').style.display = 'none'; HH.heatmap.heatmapLoad(); } }; // ,             switchInput = function(e){ this.style.display='none'; var h = document.createElement('input');h.setAttribute('type', 'text'); this.parentNode.insertBefore(h,this); h.focus(); h.addEventListener('keydown', changeHash, false); }; changeHash = function(e){ if(e.keyCode===13) { window.location.hash='#'+e.target.value.replace('#',''); } else if(e.keyCode===27) { e.target.parentNode.removeChild(e.target); document.getElementsByTagName('h2')[0].style.display='block'; } }; pageSetup = function() { if (!(document.getElementsByTagName('body')[0].classList.length === 1)) { //       URL document.getElementsByTagName('h2')[0].innerHTML = '#' + window.location.hash.substring(1); //  event listener      document.getElementsByTagName('h2')[0].addEventListener('click', switchInput, false) //  event listener        window.addEventListener("hashchange", function (e) {window.location.reload(); }, false); } }; //      return { init: init, addSearch: addSearch, addPlaces : addPlaces, addToPlace : addToPlace, getLocation: getLocation, futureCount : futureCount, futureCheck : futureCheck, allPlaces : allPlaces, locationsTweets : locationsTweets }; }; HH.tweetheatmap = new HH.TweetHeatmap(); HH.tweetheatmap.init();


Twitter Search APIを使用する場合、ツイートを検索する価値のある任意の半径（地球の半径に等しいこともあります）を設定することは可能ですが、この問題では100を超えないツイートを考慮する必要があります。 したがって、多くのポイントの座標を示すことをお勧めします。そうしないと、多数のメッセージが検索から除外されます。

process-tweets.js最後で、Twitter Search APIに直接関連しない機能に気付く場合があります。 マップのインターフェイスを担当し、現在のハッシュタグ（左上隅）をクリックして、検索用の新しいハッシュタグを決定できます。 via document.getElementsByTagName('h2')[0].innerHTML = '#' + window.location.hash.substring(1); URLを介してハッシュタグを定義します-これにより、index.htmlを任意のサイトに任意のハッシュタグを使用してiframeとして挿入できます。

ソースを見る


こちらのライブ例をご覧ください 。 ソースはgithubからダウンロードできます。

使用されるAPI材料


Source: https://habr.com/ru/post/J149320/

More articles:


All Articles