विज़ुअलाइज़ेशन: जियोमैप

  1. खास जानकारी
  2. उदाहरण
  3. लोड हो रहा है
  4. डेटा फ़ॉर्मैट
  5. कॉन्फ़िगरेशन के विकल्प
  6. तरीके
  7. इवेंट
  8. डेटा नीति
  9. ज़रूरी जानकारी

खास जानकारी

जियोमैप किसी देश, महाद्वीप या क्षेत्र के मैप का मैप होता है. इसमें खास इलाकों के लिए असाइन किए गए रंग और मान होते हैं. वैल्यू को कलर स्केल के तौर पर दिखाया जाता है. साथ ही, क्षेत्रों के लिए वैकल्पिक होवर टेक्स्ट तय किया जा सकता है. ब्राउज़र में एम्बेड किए गए फ़्लैश प्लेयर का इस्तेमाल करके, मैप को रेंडर किया जाता है. ध्यान दें कि मैप को स्क्रोल या खींचा नहीं जा सकता. हालांकि, इसे ज़ूम करने की अनुमति देने के लिए कॉन्फ़िगर किया जा सकता है.

उदाहरण

हमारे पास दो उदाहरण हैं: एक, जो इलाकों की डिसप्ले स्टाइल का इस्तेमाल करता है और दूसरा, जो मार्कर डिसप्ले स्टाइल का इस्तेमाल करता है.

क्षेत्रों के उदाहरण

'क्षेत्र की शैली' पूरे क्षेत्रों (आम तौर पर देशों) को आपकी असाइन की गई वैल्यू से मिलते-जुलते रंग से भर देती है. अपने कोड में options['dataMode'] = 'regions' असाइन करके, इलाके का स्टाइल बताएं.

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

मार्कर का उदाहरण

"मार्कर" स्टाइल में आपके चुने गए क्षेत्रों के ऊपर एक सर्कल का आकार, रंग, और उसका रंग दिखता है. 

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

लोड हो रहा है

google.charts.load पैकेज का नाम "geomap" है

  google.charts.load('current', {'packages': ['geomap']});

जियोमैप विज़ुअलाइज़ेशन क्लास का नाम google.visualization.GeoMap है

  var visualization = new google.visualization.GeoMap(container);

डेटा फ़ॉर्मैट

पते के दो फ़ॉर्मैट काम करते हैं. इनमें से हर फ़ॉर्मैट में अलग-अलग कॉलम हैं और हर कॉलम के लिए अलग-अलग तरह के डेटा हैं. टेबल में दिए गए सभी पतों में से किसी एक पते का इस्तेमाल करना ज़रूरी है. दोनों को एक साथ नहीं जोड़ा जा सकता.

  • पहला फ़ॉर्मैट: अक्षांश/देशांतर की जगह. यह फ़ॉर्मैट सिर्फ़ तब काम करता है, जब dataMode विकल्प 'मार्कर' होता है. अगर इस फ़ॉर्मैट का इस्तेमाल किया जाता है, तो आपको Google Maps JavaScript शामिल करने की ज़रूरत नहीं है. जगह की जानकारी दो कॉलम के साथ दी जाती है, साथ ही दो वैकल्पिक कॉलम भी:
    1. [संख्या, ज़रूरी है] अक्षांश. सकारात्मक संख्याएं उत्तर में होती हैं, नेगेटिव संख्याएं दक्षिण में होती हैं.
    2. [संख्या, ज़रूरी है] देशांतर. पॉज़िटिव संख्याएं पूर्व की ओर होती हैं, नेगेटिव संख्याएं पश्चिम की ओर होती हैं.
    3. [संख्या, वैकल्पिक] एक संख्या वाली वैल्यू तब दिखाई जाती है, जब उपयोगकर्ता इस क्षेत्र पर माउस घुमाता है. अगर कॉलम 4 का इस्तेमाल किया जा रहा है, तो इस कॉलम की ज़रूरत होती है.
    4. [स्ट्रिंग, ज़रूरी नहीं] जब उपयोगकर्ता इस जगह पर माउस घुमाता है, तो दिखाया जाने वाला अतिरिक्त स्ट्रिंग टेक्स्ट.
  • फ़ॉर्मैट 2: पता, देश का नाम, इलाके के नाम की जगहें या अमेरिका के महानगरीय इलाके के कोड. यह फ़ॉर्मैट 'मार्कर' या 'क्षेत्र' पर सेट किए गए dataMode विकल्प के साथ काम करता है. जगह की जानकारी एक कॉलम में डाली जाती है. साथ ही, दो वैकल्पिक कॉलम भी डाले जाते हैं:
    1. [स्ट्रिंग, ज़रूरी] मैप की जगह. ये फ़ॉर्मैट स्वीकार किए जाते हैं:
      • कोई खास पता (जैसे, "1600 पेंसिलवेनिया एवेन्यू").
      • स्ट्रिंग के तौर पर देश का नाम (उदाहरण के लिए, "इंग्लैंड"), या अंग्रेज़ी के बड़े अक्षरों में लिखा ISO-3166 कोड या इसके जैसा अंग्रेज़ी टेक्स्ट (उदाहरण के लिए, "GB" या "यूनाइटेड किंगडम").
      • अंग्रेज़ी के बड़े अक्षरों में लिखे गए ISO-3166-2 कोड का नाम या इसके अंग्रेज़ी टेक्स्ट के जैसे कोई नाम. उदाहरण के लिए, "US-NJ" या "New जर्सी". ध्यान दें: क्षेत्र सिर्फ़ तब तय किए जा सकते हैं, जब dataMode विकल्प 'क्षेत्रों' पर सेट किया गया हो.
      • एक मेट्रोपॉलिटन एरिया कोड. इन तीन अंकों वाले मेट्रो कोड का इस्तेमाल, अलग-अलग इलाकों की पहचान करने के लिए किया जाता है. अमेरिका के कोड सिर्फ़ काम करते हैं. ध्यान दें कि ये फ़ोन एरिया कोड के समान नहीं हैं.
    2. [संख्या, वैकल्पिक] एक संख्या वाली वैल्यू तब दिखाई जाती है, जब उपयोगकर्ता इस क्षेत्र पर माउस घुमाता है. अगर कॉलम 3 का इस्तेमाल किया जा रहा है, तो इस कॉलम की ज़रूरत होती है.
    3. [स्ट्रिंग, ज़रूरी नहीं] जब उपयोगकर्ता इस जगह पर माउस घुमाता है, तो दिखाया जाने वाला अतिरिक्त स्ट्रिंग टेक्स्ट.

ध्यान दें: मैप पर ज़्यादा से ज़्यादा 400 एंट्री दिख सकती हैं. आपके DataTable या DataView में 400 से ज़्यादा लाइनें हैं, तो सिर्फ़ शुरुआत में 400 लाइनें दिखाई जाएंगी. सबसे तेज़ मोड हैं: ISO कोड के तौर पर बताई गई जगहों के साथ dataMode='regions'. साथ ही, अक्षांश/देशांतर के साथ dataMode='markers'. सबसे धीमा मोड, स्ट्रिंग के पते के हिसाब से dataMode='markers' है.

ज़रूरी जानकारी: आपके DataTable में, हर वैकल्पिक कॉलम शामिल करने से पहले, उसे शामिल करना ज़रूरी है. उदाहरण के लिए, अगर आपको एक अक्षांश/देशांतर टेबल तय करना है और सिर्फ़ कॉलम 1, 2, और 4 का इस्तेमाल करना है, तो आपके DataTable को अब भी कॉलम 3 तय करना होगा (हालांकि, आपको इसमें कोई वैल्यू जोड़ने की ज़रूरत नहीं है):

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

कॉन्फ़िगरेशन विकल्प

नाम टाइप डिफ़ॉल्ट जानकारी
region स्ट्रिंग 'दुनिया'

मैप पर दिखाया जाने वाला इलाका. (आस-पास के क्षेत्र भी दिखाए जाएंगे.) देश का कोड (अंग्रेज़ी के बड़े अक्षरों में ISO-3166 फ़ॉर्मैट में) या इनमें से किसी एक स्ट्रिंग में हो सकता है:

  • world - (पूरी दुनिया)
  • us_metro - (अमेरिका, महानगरीय इलाके)
  • 005 - (दक्षिण अमेरिका)
  • 013 - (मध्य अमेरिका)
  • 021 - (उत्तरी अमेरिका)
  • 002 - (पूरे अफ़्रीका में)
  • 017 - (मध्य अफ़्रीका)
  • 015 - (उत्तरी अफ़्रीका)
  • 018 - (दक्षिण अफ़्रीका)
  • 030 - (पूर्वी एशिया)
  • 034 - (दक्षिणी एशिया)
  • 035 - (एशिया/पैसिफ़िक क्षेत्र)
  • 009 - (ओशिनिया)
  • 145 - (मध्य पूर्व)
  • 143 - (मध्य एशिया)
  • 151 - (उत्तरी एशिया)
  • 154 - (उत्तरी यूरोप)
  • 155 - (पश्चिमी यूरोप)
  • 039 - (दक्षिण यूरोप)

जियोमैप से, स्क्रोल करने या खींचने की सुविधा बंद हो जाती है. इससे ज़ूम करने का तरीका सीमित हो जाता है. showZoomOut प्रॉपर्टी को सेट करके, बुनियादी ज़ूम को चालू किया जा सकता है.
dataMode स्ट्रिंग 'इलाके'

मैप पर वैल्यू दिखाने का तरीका. दो वैल्यू इस्तेमाल की जा सकती हैं:

  • regions - पूरे इलाके को सही रंग से रंगता है. इस विकल्प का इस्तेमाल अक्षांश/देशांतर पतों के साथ नहीं किया जा सकता. क्षेत्र के उदाहरण देखें.
  • markers - किसी क्षेत्र पर एक बिंदु दिखाता है. इसका रंग और साइज़, वैल्यू को दिखाते हैं. मार्कर का उदाहरण देखें.
width स्ट्रिंग '556 पिक्सल' विज़ुअलाइज़ेशन की चौड़ाई. अगर कोई इकाई नहीं दी गई है, तो डिफ़ॉल्ट इकाई पिक्सल होती है.
height स्ट्रिंग '347 पिक्सल' विज़ुअलाइज़ेशन की ऊंचाई. अगर कोई इकाई नहीं दी गई है, तो डिफ़ॉल्ट इकाई पिक्सल होती है.
colors RGB नंबर की कैटगरी 0xRRGGBB फ़ॉर्मैट में [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] विज़ुअलाइज़ेशन में वैल्यू असाइन करने के लिए कलर ग्रेडिएंट. आपके पास कम से कम दो वैल्यू होनी चाहिए; ग्रेडिएंट में आपकी सभी वैल्यू और सबसे कम वैल्यू के हिसाब से सबसे गहरे रंग, सबसे कम वैल्यू के तौर पर सबसे हल्के
showLegend बूलियन true अगर सही है, तो मैप के लिए लेजेंड दिखाएं.
showZoomOut बूलियन false अगर सही है, तो zoomOutLabel प्रॉपर्टी से बताए गए लेबल के साथ एक बटन दिखाएं. ध्यान दें कि इस बटन पर क्लिक करने से कोई कार्रवाई नहीं होती. हालांकि, यह zoomOut इवेंट को छोड़कर नहीं दिखाया जा सकता. ज़ूम मैनेज करने के लिए, यह इवेंट कैप्चर करें और region विकल्प बदलें. showZoomOut का इस्तेमाल सिर्फ़ तब किया जा सकता है, जब region विकल्प, वर्ल्ड व्यू से छोटा हो. ज़ूम इन करने की सुविधा को चालू करने का एक तरीका है कि regionClick इवेंट सुनें, region प्रॉपर्टी को सही इलाके में बदलें, और मैप को फिर से लोड करें.
zoomOutLabel स्ट्रिंग 'ज़ूम आउट करें' ज़ूम बटन का लेबल.

तरीके

तरीका रिटर्न टाइप जानकारी
draw(data, options) कभी नहीं मैप बनाता है. ड्रॉइंग पूरी होने से पहले वापस आ सकता है (drawingDone() इवेंट देखें).
getSelection() चुने गए एलिमेंट की कैटगरी स्टैंडर्ड getSelection() को लागू करना. चुने गए एलिमेंट, लाइन होते हैं. यह तरीका सिर्फ़ तब काम करता है, जब dataMode विकल्प 'क्षेत्र' होता है. सिर्फ़ असाइन की गई वैल्यू वाला कोई क्षेत्र चुना जा सकता है.
setSelection(selection) कभी नहीं मानक setSelection() लागू करना. किसी चुने गए को एक पंक्ति में चुना जाता है और एक से ज़्यादा पंक्ति को चुनने की सुविधा के साथ काम करता है. सिर्फ़ वे क्षेत्र चुने जा सकते हैं जिनके लिए वैल्यू असाइन की गई है.

इवेंट

नाम जानकारी प्रॉपर्टी
error जब चार्ट को रेंडर करते समय कोई गड़बड़ी होती है, तब सक्रिय किया जाता है. आईडी, मैसेज
select

तब सक्रिय होता है, जब उपयोगकर्ता किसी असाइन की गई वैल्यू वाले इलाके पर क्लिक करता है. यह चुनने के लिए कि क्या चुना गया है, getSelection() को कॉल करें. तब ही उपलब्ध होता है, जब dataMode विकल्प 'क्षेत्र' पर सेट होता है.

ध्यान दें: कुछ सीमाओं की वजह से, ब्राउज़र में पेज को फ़ाइल के तौर पर ऐक्सेस करने पर select इवेंट नहीं होता है (उदाहरण के लिए, "file://") का इस्तेमाल कर सकते हैं (उदाहरण, "http://www."

 कभी नहीं
regionClick

यह तब कॉल किया जाता है, जब किसी क्षेत्र पर क्लिक किया जाता है. 'इलाके' और 'मार्कर', दोनों के लिए काम करता है dataMode. हालांकि, मार्कर मोड में, इसे 'क्षेत्र' विकल्प में दिए गए खास देश के लिए नहीं फेंका जाएगा (अगर कोई खास देश सूची में था).

ध्यान दें: कुछ सीमाओं की वजह से, ब्राउज़र में पेज को फ़ाइल के तौर पर ऐक्सेस करने पर regionClick इवेंट नहीं होता (उदाहरण के लिए, "file://") का इस्तेमाल कर सकते हैं (उदाहरण, "http://www."

 सिंगल प्रॉपर्टी region वाला ऑब्जेक्ट, जो ISO-3166 फ़ॉर्मैट में ऐसी स्ट्रिंग होती है जो क्लिक किए गए इलाके के बारे में बताती है.
zoomOut

यह तब दिखता है, जब ज़ूम आउट बटन पर क्लिक किया जाता है. ज़ूम मैनेज करने के लिए, इस इवेंट को कैप्चर करें और region का विकल्प बदलें.

ध्यान दें: कुछ सीमाओं की वजह से, ब्राउज़र में पेज को फ़ाइल के तौर पर ऐक्सेस करने पर zoomOut इवेंट नहीं होता है (उदाहरण के लिए, "file://") का इस्तेमाल कर सकते हैं (उदाहरण, "http://www."

 कभी नहीं
drawingDone यह तब कॉल किया जाता है, जब जियोमैप ड्रॉ हो जाता है. कभी नहीं

डेटा नीति

Google Maps, जगहों की जानकारी को भौगोलिक जगह पर भेजता है. ऐसा कोई भी डेटा किसी भी सर्वर को नहीं भेजा जाता है जिसके लिए जियोकोडिंग की ज़रूरत नहीं होती है. उनकी डेटा नीति के बारे में ज़्यादा जानने के लिए, कृपया Google Maps की सेवा की शर्तें देखें.

ज़रूरी जानकारी

Flash सुरक्षा सेटिंग के कारण, हो सकता है कि यह (और सभी Flash-आधारित विज़ुअलाइज़ेशन) किसी वेब सर्वर URL (उदा., http://www.myhost.com/myviz.html) के बजाय ब्राउज़र में किसी फ़ाइल स्थान से ऐक्सेस किए जाने पर ठीक से काम न करे. यह आम तौर पर, टेस्टिंग से जुड़ी समस्या होती है. MMedia की वेबसाइट पर जाकर, इस समस्या को हल किया जा सकता है.