हीटमैप लेयर

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

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 ऑब्जेक्ट का इस्तेमाल करना तब फ़ायदेमंद हो सकता है, जब:

• एक ही जगह पर ज़्यादा डेटा जोड़ना. 1,000 LatLng ऑब्जेक्ट को रेंडर करने से ज़्यादा तेज़, 1,000 वज़न वाले एक WeightedLocation ऑब्जेक्ट को रेंडर करना ज़्यादा तेज़ होगा.
• आर्बिट्रेरी वैल्यू के आधार पर, आपके डेटा पर ज़ोर देना. उदाहरण के लिए, भूकंप का डेटा प्लॉट करते समय 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: इससे पता चलता है कि ज़ूम करने पर हीटमैप फैलते हैं या नहीं. अलग-अलग होने पर, ज़ूम लेवल के साथ इफ़ेक्ट का रेडियस बढ़ता है. इससे यह पक्का होता है कि किसी भी भौगोलिक जगह पर कलर इंटेंसिटी सुरक्षित रहे. डिफ़ॉल्ट तौर पर, यह 'सही' पर सेट होती है.
• gradient: हीटमैप की कलर ग्रेडिएंट, जिसे सीएसएस कलर स्ट्रिंग के कलेक्शन के तौर पर बताया जाता है. आरजीबीए के साथ-साथ सभी CSS3 कलर, बड़े किए गए नाम वाले कलर और एचएसएल(A) वैल्यू को छोड़कर, अन्य सभी कलर के साथ काम करते हैं.
• maxIntensity: हीटमैप की ज़्यादा से ज़्यादा तीव्रता. डिफ़ॉल्ट रूप से, हीटमैप के रंगों को मैप पर किसी खास पिक्सल पर, पॉइंट की ज़्यादा से ज़्यादा संख्या के हिसाब से डाइनैमिक तौर पर स्केल किया जाता है. इस प्रॉपर्टी की मदद से, तय की गई ज़्यादा से ज़्यादा सीमा के बारे में बताया जा सकता है. ज़्यादा से ज़्यादा तीव्रता को सेट करना तब मददगार हो सकता है, जब आपके डेटासेट में असामान्य रूप से ज़्यादा तीव्रता वाले कुछ आउटलायर शामिल हों.
• radius: पिक्सल में, हर डेटा पॉइंट के असर की रेडियस.
• opacity: हीटमैप की ओपैसिटी को 0 और 1 के बीच की संख्या से दिखाया जाता है.

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

उदाहरण देखें