हीटमैप

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

इस पेज पर, iOS के लिए Maps SDK की यूटिलिटी लाइब्रेरी में उपलब्ध हीटमैप यूटिलिटी के बारे में बताया गया है. हीटमैप, मैप पर डेटा पॉइंट के डिस्ट्रिब्यूशन और डेंसिटी को दिखाने के लिए काम आते हैं.

इस वीडियो में, मार्कर के बजाय हीटमैप का इस्तेमाल करने के बारे में बताया गया है. ऐसा तब किया जाता है, जब आपके डेटा के लिए मैप पर ज़्यादा डेटा पॉइंट की ज़रूरत होती है.

हीटमैप की मदद से, व्यूअर को मैप पर मौजूद डेटा पॉइंट के डिस्ट्रिब्यूशन और इंटेंसिटी को समझने में आसानी होती है. हर जगह पर मार्कर लगाने के बजाय, हीटमैप में डेटा के डिस्ट्रिब्यूशन को दिखाने के लिए रंग का इस्तेमाल किया जाता है.

नीचे दिए गए उदाहरण में, लाल रंग से ऑस्ट्रेलिया के विक्टोरिया में पुलिस स्टेशनों की ज़्यादा संख्या वाले इलाकों को दिखाया गया है.

पुलिस स्टेशनों की जगह की जानकारी दिखाने वाला हीटमैप
मैप पर हीटमैप

अगर आपने अब तक लाइब्रेरी सेट अप नहीं की है, तो इस पेज पर मौजूद बाकी जानकारी पढ़ने से पहले, सेटअप गाइड पढ़ें.

एक सामान्य हीटमैप जोड़ना

अपने मैप में हीटमैप जोड़ने के लिए, आपको एक ऐसे डेटासेट की ज़रूरत होगी जिसमें दिलचस्पी वाली हर जगह के कोऑर्डिनेट शामिल हों. सबसे पहले, GMUHeatmapTileLayer इंस्टेंस बनाएं. इसके लिए, map प्रॉपर्टी को GMSMapView पर सेट करें. अपने ऐप्लिकेशन के viewDidLoad() फ़ंक्शन में ऐसा करें, ताकि यह पक्का किया जा सके कि हीटमैप के साथ काम करने से पहले बुनियादी मैप लोड हो गया है. इसके बाद, GMUWeightedLatLng ऑब्जेक्ट के कलेक्शन को GMUHeatmapTileLayer इंस्टेंस में पास करें.

यह यूटिलिटी, GMUHeatmapTileLayer क्लास उपलब्ध कराती है. यह GMUWeightedLatLng ऑब्जेक्ट के कलेक्शन को स्वीकार करती है. यह दिए गए रेडियस, ग्रेडिएंट, और अपारदर्शिता के विकल्पों के आधार पर, ज़ूम के अलग-अलग लेवल के लिए टाइल इमेज बनाता है.

इन चरणों के बारे में ज़्यादा जानकारी यहां दी गई है:

  1. GMUHeatmapTileLayer इंस्टेंस बनाएं. साथ ही, map प्रॉपर्टी को GMSMapView पर सेट करें. ऐसा अपने ऐप्लिकेशन के viewDidLoad() फ़ंक्शन में करें.
  2. GMUHeatmapTileLayer इंस्टेंस को GMUWeightedLatLng ऑब्जेक्ट का कलेक्शन पास करें.
  3. मैप व्यू पास करके, GMUHeatmapTileLayer.map को कॉल करें.

    Swift

    class Heatmap: UIViewController {

  private var mapView: GMSMapView!
  private var heatmapLayer: GMUHeatmapTileLayer!

  override func viewDidLoad() {
    super.viewDidLoad()
    heatmapLayer = GMUHeatmapTileLayer()
    heatmapLayer.map = mapView
  }

  // ...

  func addHeatmap() {

    // Get the data: latitude/longitude positions of police stations.
    guard let path = Bundle.main.url(forResource: "police_stations", withExtension: "json") else {
      return
    }
    guard let data = try? Data(contentsOf: path) else {
      return
    }
    guard let json = try? JSONSerialization.jsonObject(with: data, options: []) else {
      return
    }
    guard let object = json as? [[String: Any]] else {
      print("Could not read the JSON.")
      return
    }

    var list = [GMUWeightedLatLng]()
    for item in object {
      let lat = item["lat"] as! CLLocationDegrees
      let lng = item["lng"] as! CLLocationDegrees
      let coords = GMUWeightedLatLng(
        coordinate: CLLocationCoordinate2DMake(lat, lng),
        intensity: 1.0
      )
      list.append(coords)
    }

    // Add the latlngs to the heatmap layer.
    heatmapLayer.weightedData = list
  }
}

    Objective-C

    @implementation Heatmap {
  GMSMapView *_mapView;
  GMUHeatmapTileLayer *_heatmapLayer;
}

- (void)viewDidLoad {
  [super viewDidLoad];
  _heatmapLayer = [[GMUHeatmapTileLayer alloc] init];
  _heatmapLayer.map = _mapView;
}

// ...

- (void) addHeatmap {

  // Get the data: latitude/longitude positions of police stations.
  NSURL *path = [NSBundle.mainBundle URLForResource:@"police_stations" withExtension:@"json"];
  NSData *data = [NSData dataWithContentsOfURL:path];
  NSArray *json = [NSJSONSerialization JSONObjectWithData:data options:0 error:nil];

  NSMutableArray<GMUWeightedLatLng *> *list = [[NSMutableArray alloc] init];
  [json enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
    NSDictionary *item = (NSDictionary *)obj;
    CLLocationDegrees lat = [(NSNumber *) [item valueForKey:@"lat"] doubleValue];
    CLLocationDegrees lng = [(NSNumber *) [item valueForKey:@"lng"] doubleValue];
    GMUWeightedLatLng *coords = [[GMUWeightedLatLng alloc] initWithCoordinate:CLLocationCoordinate2DMake(lat, lng)
                                                                    intensity:1.0];
    [list addObject:coords];
  }];


  // Add the latlngs to the heatmap layer.
  _heatmapLayer.weightedData = list;
}
@end

इस उदाहरण के लिए, डेटा को JSON फ़ाइल police_stations.json में सेव किया जाता है. यहां फ़ाइल से निकाला गया कॉन्टेंट दिया गया है:

[
{"lat" : -37.1886, "lng" : 145.708 } ,
{"lat" : -37.8361, "lng" : 144.845 } ,
{"lat" : -38.4034, "lng" : 144.192 } ,
{"lat" : -38.7597, "lng" : 143.67 } ,
{"lat" : -36.9672, "lng" : 141.083 }
]

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

हीटमैप में, पसंद के मुताबिक बनाई जा सकने वाली कई प्रॉपर्टी होती हैं. GMUHeatmapTileLayer इंस्टेंस बनाते समय, विकल्प सेट किए जा सकते हैं. इसके अलावा, विकल्प के लिए नई वैल्यू सेट करके भी विकल्प सेट किए जा सकते हैं.

ये विकल्प उपलब्ध हैं:

  1. रेडियस: हीटमैप पर लागू किए गए गॉसियन ब्लर का साइज़, पिक्सल में दिखाया जाता है. डिफ़ॉल्ट रूप से, यह 20 पर सेट होता है. यह वैल्यू 10 से 50 के बीच होनी चाहिए. रेडियस सेट करने के लिए, GMUHeatmapTileLayer.radius का इस्तेमाल करें.

  2. ग्रेडिएंट: यह रंगों की एक ऐसी रेंज होती है जिसका इस्तेमाल हीटमैप, कलर मैप जनरेट करने के लिए करता है. यह रेंज, सबसे कम से लेकर सबसे ज़्यादा इंटेंसिटी तक होती है. GMUGradient को बनाने के लिए, पूर्णांकों के ऐसे ऐरे का इस्तेमाल किया जाता है जिसमें रंग शामिल होते हैं. साथ ही, फ़्लोट ऐरे का इस्तेमाल किया जाता है. इससे हर रंग के शुरुआती पॉइंट का पता चलता है. इसे ज़्यादा से ज़्यादा इंटेंसिटी के प्रतिशत के तौर पर दिखाया जाता है. साथ ही, इसे 0 से 1 के बीच के फ़्रैक्शन के तौर पर दिखाया जाता है. एक रंग वाले ग्रेडिएंट के लिए, सिर्फ़ एक रंग तय करें. वहीं, एक से ज़्यादा रंगों वाले ग्रेडिएंट के लिए, कम से कम दो रंग तय करें. कलर मैप, उन रंगों के बीच इंटरपोलेशन का इस्तेमाल करके जनरेट किया जाता है. डिफ़ॉल्ट ग्रेडिएंट में दो रंग होते हैं. colorMapSize पैरामीटर से, ग्रेडिएंट में मौजूद चरणों की संख्या तय होती है. ज़्यादा संख्या से, ग्रेडिएंट ज़्यादा स्मूद होगा. वहीं, कम संख्या से, ट्रांज़िशन ज़्यादा शार्प होंगे. ये ट्रांज़िशन, कॉन्टूर ग्राफ़ की तरह दिखेंगे. ग्रेडिएंट सेट करने के लिए, GMUHeatmapTileLayer.gradient का इस्तेमाल करें.

  3. अपारदर्शिता: यह पूरी हीटमैप लेयर की अपारदर्शिता होती है. इसकी वैल्यू 0 से 1 के बीच होती है. डिफ़ॉल्ट वैल्यू 0.7 है. ओपैसिटी की वैल्यू सेट करने के लिए, GMUHeatmapTileLayer.opacity का इस्तेमाल करें.

उदाहरण के लिए, Gradient बनाएं:

Swift

let gradientColors: [UIColor] = [.green, .red]
let gradientStartPoints: [NSNumber] = [0.2, 1.0]
heatmapLayer.gradient = GMUGradient(
  colors: gradientColors,
  startPoints: gradientStartPoints,
  colorMapSize: 256
)

Objective-C

NSArray<UIColor *> *gradientColors = @[UIColor.greenColor, UIColor.redColor];
NSArray<NSNumber *> *gradientStartPoints = @[@0.2, @1.0];
_heatmapLayer.gradient = [[GMUGradient alloc] initWithColors:gradientColors
                                                 startPoints:gradientStartPoints
                                                colorMapSize:256];

किसी मौजूदा हीटमैप की ओपैसिटी बदलने के लिए:

Swift

heatmapLayer.opacity = 0.7

Objective-C

_heatmapLayer.opacity = 0.7;

किसी मौजूदा विकल्प को अपडेट करना

पहले से सेट किए गए किसी विकल्प को अपडेट करने के लिए, यह तरीका अपनाएं:

  1. विकल्प को अपनी पसंद की वैल्यू पर अपडेट करें.
  2. GMUHeatmapTileLayer.clearTileCache() पर कॉल करें.

डेटासेट बदलना

जिस डेटासेट के आधार पर हीटमैप बनाया गया है उसे बदलने के लिए:

  1. डेटा कलेक्शन की सेटिंग अपडेट करें. GMUHeatmapTileLayer.weightedData का इस्तेमाल करें. इसमें GMUWeightedLatLng का ऐरे पास करें.
  2. GMUHeatmapTileLayer.clearTileCache() पर कॉल करें.

हीटमैप हटाना

किसी हीटमैप को हटाने के लिए, GMUHeatmapTileLayer.map को कॉल करें और nil पास करें.

Swift

heatmapLayer.map = nil

Objective-C

_heatmapLayer.map = nil;

डेमो ऐप्लिकेशन देखें

हीटमैप लागू करने का एक और उदाहरण देखने के लिए, यूटिलिटी लाइब्रेरी के साथ शिप किए गए डेमो ऐप्लिकेशन में HeatmapViewController देखें. सेटअप गाइड में, डेमो ऐप्लिकेशन को चलाने का तरीका बताया गया है.