हीटमैप लेयर

1. खास जानकारी
2. विज़ुअलाइज़ेशन लाइब्रेरी लोड करना
3. वज़न वाले डेटा पॉइंट जोड़ना
4. हीटमैप लेयर को पसंद के मुताबिक बनाना

हीटमैप लेयर, हीटमैप की क्लाइंट साइड रेंडरिंग उपलब्ध कराती है.

खास जानकारी

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

विज़ुअलाइज़ेशन लाइब्रेरी लोड करना

हीटमैप लेयर, google.maps.visualization लाइब्रेरी का हिस्सा है और यह डिफ़ॉल्ट रूप से लोड नहीं होती है. विज़ुअलाइज़ेशन क्लास, एक अलग लाइब्रेरी है. यह Maps JavaScript API के मुख्य कोड से अलग होती है. इस लाइब्रेरी में मौजूद फ़ंक्शन का इस्तेमाल करने के लिए, आपको सबसे पहले इसे लोड करना होगा. इसके लिए, Maps JavaScript API के बूटस्ट्रैप यूआरएल में मौजूद libraries पैरामीटर का इस्तेमाल करें:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=visualization&callback=initMap">
</script>

हीटमैप लेयर जोड़ना

हीटमैप लेयर जोड़ने के लिए, आपको सबसे पहले एक नया HeatmapLayer ऑब्जेक्ट बनाना होगा. इसके बाद, आपको इसे कुछ भौगोलिक डेटा देना होगा. यह डेटा, ऐरे या MVCArray[] ऑब्जेक्ट के तौर पर दिया जा सकता है. डेटा, LatLng ऑब्जेक्ट या WeightedLocation ऑब्जेक्ट हो सकता है. HeatmapLayer ऑब्जेक्ट को इंस्टैंटिएट करने के बाद, setMap() तरीके को कॉल करके इसे मैप में जोड़ें.

यहां दिए गए उदाहरण में, सैन फ़्रांसिस्को के मैप में 14 डेटा पॉइंट जोड़े गए हैं.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

वज़न के हिसाब से डेटा पॉइंट जोड़ना

हीटमैप, LatLng या WeightedLocation ऑब्जेक्ट या दोनों का कॉम्बिनेशन रेंडर कर सकता है. दोनों ऑब्जेक्ट, मैप पर एक ही डेटा पॉइंट को दिखाते हैं. हालांकि, WeightedLocation ऑब्जेक्ट की मदद से, उस डेटा पॉइंट के लिए वज़न भी तय किया जा सकता है. किसी डेटा पॉइंट को वज़न देने से, WeightedLocation को सामान्य LatLng ऑब्जेक्ट की तुलना में ज़्यादा इंटेंसिटी के साथ रेंडर किया जाएगा. वज़न एक लीनियर स्केल होता है, जिसमें हर LatLng ऑब्जेक्ट का डिफ़ॉल्ट वज़न 1 होता है. इसलिए, एक WeightedLocation में {location: new google.maps.LatLng(37.782, -122.441), weight: 3} जोड़ने का वही असर होगा जो google.maps.LatLng(37.782, -122.441) को तीन बार जोड़ने पर होता है. एक ही ऐरे में, weightedLocation और LatLng ऑब्जेक्ट को मिक्स किया जा सकता है.

LatLng ऑब्जेक्ट की जगह WeightedLocation ऑब्जेक्ट का इस्तेमाल तब किया जा सकता है, जब:

• एक ही जगह पर बहुत ज़्यादा डेटा जोड़ना. 1,000 के वज़न वाले एक WeightedLocation ऑब्जेक्ट को रेंडर करना, 1,000 LatLng ऑब्जेक्ट को रेंडर करने से ज़्यादा तेज़ होगा.
• मनमाने तरीके से तय की गई वैल्यू के आधार पर, अपने डेटा पर ज़ोर देना. उदाहरण के लिए, भूकंप के डेटा को प्लॉट करते समय LatLng ऑब्जेक्ट का इस्तेमाल किया जा सकता है. हालांकि, आपको रिक्टर स्केल पर हर भूकंप की तीव्रता को मेज़र करने के लिए, WeightedLocation का इस्तेमाल करना पड़ सकता है.

/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

हीटमैप लेयर को पसंद के मुताबिक बनाना

हीटमैप के रेंडर होने के तरीके को पसंद के मुताबिक बनाया जा सकता है. इसके लिए, हीटमैप के ये विकल्प इस्तेमाल करें. ज़्यादा जानकारी के लिए, HeatmapLayerOptions दस्तावेज़ देखें.

• dissipating: इससे पता चलता है कि ज़ूम करने पर हीटमैप गायब हो जाते हैं या नहीं. dissipating की वैल्यू false होने पर, ज़ूम लेवल के साथ-साथ असर का दायरा बढ़ता है. इससे यह पक्का किया जाता है कि किसी भी भौगोलिक जगह पर रंग की इंटेंसिटी बनी रहे. डिफ़ॉल्ट रूप से, यह वैल्यू 'सही' पर सेट होती है.
• gradient: हीटमैप का कलर ग्रेडिएंट. इसे सीएसएस कलर स्ट्रिंग के अरे के तौर पर तय किया जाता है. CSS3 के सभी रंग इस्तेमाल किए जा सकते हैं. इनमें RGBA भी शामिल है. हालांकि, एक्सटेंडेड नेम वाले रंग और HSL(A) वैल्यू इस्तेमाल नहीं की जा सकतीं.
• maxIntensity: हीटमैप की ज़्यादा से ज़्यादा इंटेंसिटी. डिफ़ॉल्ट रूप से, हीटमैप के रंग, मैप पर किसी पिक्सल पर पॉइंट की सबसे ज़्यादा संख्या के हिसाब से डाइनैमिक तरीके से स्केल किए जाते हैं. इस प्रॉपर्टी की मदद से, ज़्यादा से ज़्यादा वैल्यू तय की जा सकती है. ज़्यादा से ज़्यादा इंटेंसिटी सेट करने से, आपको तब मदद मिल सकती है, जब आपके डेटासेट में कुछ ऐसे आउटलायर मौजूद हों जिनकी इंटेंसिटी बहुत ज़्यादा हो.
• radius: हर डेटा पॉइंट के लिए, पिक्सल में असर डालने वाले दायरे की जानकारी.
• opacity: हीटमैप की ओपैसिटी, जिसे 0 से 1 के बीच की संख्या के तौर पर दिखाया जाता है.

यहां दिए गए उदाहरण में, ज़रूरत के हिसाब से बदलाव करने के कुछ विकल्प दिखाए गए हैं.

उदाहरण देखें