हीटमैप लेयर

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 होती है. {location: new google.maps.LatLng(37.782, -122.441), weight: 3} का एक WeightedLocation जोड़ने पर, वैसा ही असर होगा जैसा google.maps.LatLng(37.782, -122.441) को तीन बार जोड़ने पर होगा. एक ही कलेक्शन में weightedLocation और LatLng ऑब्जेक्ट को मिलाया जा सकता है.

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

• एक ही जगह पर ज़्यादा डेटा जोड़ना. 1000 वज़न वाले एक WeightedLocation ऑब्जेक्ट को रेंडर करने में, 1000 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 के सभी रंग इस्तेमाल किए जा सकते हैं. इनमें आरजीबीए भी शामिल है.
• maxIntensity: हीटमैप की ज़्यादा से ज़्यादा इंटेंसिटी. डिफ़ॉल्ट रूप से, हीटमैप के रंगों को मैप पर किसी भी पिक्सल पर सबसे ज़्यादा पॉइंट के हिसाब से डाइनैमिक तौर पर स्केल किया जाता है. इस प्रॉपर्टी की मदद से, ज़्यादा से ज़्यादा एक तय संख्या दी जा सकती है. ज़्यादा से ज़्यादा इंटेंसिटी सेट करना तब मददगार हो सकता है, जब आपके डेटासेट में कुछ ऐसे आउटलायर हों जिनकी इंटेंसिटी काफ़ी ज़्यादा हो.
• radius: हर डेटा पॉइंट के लिए, पिक्सल में प्रभाव की त्रिज्या.
• opacity: हीटमैप की ओपैसिटी, जिसे 0 से 1 के बीच की संख्या के तौर पर दिखाया जाता है.

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

उदाहरण देखें