हीटमैप लेयर

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

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

उदाहरण देखें