🔢 🚹 👩🏿‍🎤 नोकिया मैप्स जेएस एपीआई और ट्विटर सर्च एपीआई का उपयोग करके मैशअप लिखना 🏇🏻 ✒️ 🖱️

पिछले हफ्ते, नोकिया मैप्स को सबसे लोकप्रिय फ़्लिकर फोटो होस्टिंग में एकीकृत किया गया था, जिसके परिणामस्वरूप एक दिलचस्प मैशप था जहां आप नक्शे पर जियोटैग किए गए टैग के साथ तस्वीरें देख सकते हैं।

हमने नोकिया मैप्स के आधार पर मैशअप के विषय को जारी रखने का फैसला किया, और आज हम दिखाएंगे कि मैप पर ट्विटर पर कुछ हैशटैग के उपयोग की तीव्रता को प्रदर्शित करने के लिए नोकिया मैप्स जेएस एपीआई + ट्विटर सर्च एपीआई का उपयोग कैसे करें। इस तरह के मैशअप नीचे की छवि की तरह दिखेगा।

परंपरा से, हम 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>

जैसा कि आप देख सकते हैं, हमने तुरंत तीन जावास्क्रिप्ट स्क्रिप्ट की पहचान की। पहली स्क्रिप्ट api.maps.nokia.com/2.2.1/jsl.js api.maps.nokia.com/2.2.1/jsl.js आप पहले से ही अंतिम पोस्ट से परिचित हो सकते हैं - यह नोकिया मैप्स जेएस एपीआई को लोड करता है।

places-heatmap.js को ओवरले मानचित्र में एक तीव्रता मानचित्र प्रदान करने और जोड़ने के लिए जिम्मेदार है। निम्नलिखित process-tweets.js स्क्रिप्ट किसी दिए गए हैशटैग और जियोलोकेशन डेटा वाले ट्वीट्स की process-tweets.js , साथ ही इन ट्वीट्स को तीव्रता के नक्शे की डेटा संरचना में उनके बारे में रिकॉर्डिंग (अक्षांश / देशांतर, शहर) के साथ जियोकोडिंग करती है।

इन लिपियों के लिए स्पष्टीकरण सीधे टिप्पणियों में कोड को दिए जाएंगे।

स्थानों-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.heatmap.Overlay वर्ग के बारे में अधिक पढ़ सकते हैं, हालांकि, कोड के लिए टिप्पणियों में सभी मापदंडों को सूचीबद्ध किया गया था, इसके अलावा ओवरले की कुछ सेटिंग्स, जो nokia.maps.heatmap.Overlay.Options के माध्यम से सेट की गई हैं ।

प्रक्रिया-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();

ट्विटर सर्च एपीआई के साथ काम करते समय, यह ध्यान में रखा जाना चाहिए कि हालांकि इसमें एक मनमाना त्रिज्या निर्धारित करना संभव है (यहां तक कि पृथ्वी की त्रिज्या के बराबर) जिसमें यह ट्वीट्स की तलाश में है, इस मुद्दे में यह 100 से अधिक ट्वीट देता है। इस प्रकार, कई बिंदुओं के निर्देशांक को इंगित करना बेहतर है, अन्यथा बड़ी संख्या में संदेश खोज से बाहर हो जाएंगे।

process-tweets.js के अंत में process-tweets.js आप उन विशेषताओं को नोटिस कर सकते हैं जो सीधे ट्विटर सर्च एपीआई से संबंधित नहीं हैं। वे हमारे मानचित्र के इंटरफ़ेस के लिए ज़िम्मेदार हैं और वर्तमान हैशटैग (ऊपरी बाएं कोने में) पर क्लिक करके खोज के लिए एक नया परिभाषित करने की अनुमति देते हैं। वाया document.getElementsByTagName('h2')[0].innerHTML = '#' + window.location.hash.substring(1); हम एक हैशटैग को URL के माध्यम से परिभाषित करते हैं - इस तरह हमारे index.html को किसी भी हैशटैग का उपयोग करते हुए iframe के रूप में किसी भी साइट पर डाला जा सकता है।

स्रोत देखें

एक जीवंत उदाहरण यहां देखें। सूत्रों को जीथब से डाउनलोड किया जा सकता है।

नोकिया मैप्स जेएस एपीआई और ट्विटर सर्च एपीआई का उपयोग करके मैशअप लिखना

स्थानों-heatmap.js

प्रक्रिया-tweets.js

स्रोत देखें

एपीआई सामग्री का इस्तेमाल किया

More articles: