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

  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);

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

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

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

ध्यान दें: किसी मैप में ज़्यादा से ज़्यादा 400 एंट्री दिख सकती हैं; अगर आपके DataTable या DataView में 400 से ज़्यादा लाइनें हैं, तो सिर्फ़ पहली 400 एंट्री दिखेंगी. सबसे तेज़ मोड 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 0xRRGGBB फ़ॉर्मैट में आरजीबी नंबर का कलेक्शन [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] विज़ुअलाइज़ेशन में वैल्यू को असाइन करने के लिए रंग ग्रेडिएंट. आपके पास कम से कम दो वैल्यू होनी चाहिए. ग्रेडिएंट में आपकी सभी वैल्यू और कैलकुलेट की गई इंटरमीडियरी वैल्यू शामिल होंगी. इनमें सबसे कम वैल्यू के लिए सबसे हल्के रंग और सबसे ज़्यादा गहरे रंग को सबसे ज़्यादा वैल्यू के तौर पर शामिल किया जाएगा.
showLegend boolean सही अगर सही है, तो मैप के लिए लेजेंड दिखाएं.
showZoomOut boolean 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 की सेवा की शर्तें देखें.

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

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