Load and plot only the resources that are within the map's bounds

[tsrivishnu]

Currently, as soon as the map is initialised, we are making API calls to the backend to fetch all the resources for all cities. This involves making a lot of API calls and we clearly see that the plotting of these markers on the map takes time. Along with taking time, it takes up more memory and processing power to render all the markers. This also makes the front-end code complex.

We would like to migrate to an approach that is more faster, less resource intensive and less complex in the front-end code.

The idea

Load and plot only the resources that are to be shown within the visible bounds of the map.

• As the user pans the map or zooms in and out, the boundaries of the visible region on the map change. Once the map's boundaries have stopped changing, make an API request to the backend with the new bounds (LatLong pairs).
• We will need to make one request for the given bounds. The back-end will return all the resources that are to be plotted within those bounds. See the API specification below.
• When the bounds change, it's probably best to clear the already plotted markers before plotting new markers so that we don't keep too many markers on the page unnecessarily. This is help improve the performance of the page.
• If the user zooms out too much beyond a threshold zoom level, we can simply show a message to the user that they need to zoom in to start viewing the resources. Please decide on a good threshold zoom when implementing this. In general, any zoom level that is beyond two cities is too much in my opinion.
• Filtering and clustering should work the way they do right now.

Back-end API specification

URL: https://cowinmapapis.com/data/fetch
Method: GET
Query Params:
  pt1=<longitude>,<latitude>
  pt2=<longitude>,<latitude>
  pt3=<longitude>,<latitude>
  pt4=<longitude>,<latitude>

Example: pt1=80.1904995,13.0538655&pt2=80.2061241,12.992533&pt3=80.1904995,13.0538655&pt4=80.2061241,12.992533
Response:
  {
    "beds": [
      [
        "Dr. A. Ramachandran's Diabetes Hospitals, Egmore",
        "Dr. A. Ramachandran's Diabetes Hospitals, Egmore, Chennai, Tamil Nadu, India",
        "",
        "",
        "https://www.google.com/maps/place/Dr.+A.+Ramachandran%E2%80%99s+Diabetes+Hospitals/@13.0129258,80.2028212,14z/data=!4m9!1m2!2m1!1sDr.+A.+Ramachandran's+Diabetes+Hospitals,+Egmore!3m5!1s0x3a526712986a4f75:0x35a6cd69cf8d6fdd!8m2!3d13.012915!4d80.2202421!15sCjBEci4gQS4gUmFtYWNoYW5kcmFuJ3MgRGlhYmV0ZXMgSG9zcGl0YWxzLCBFZ21vcmVaVwomZHIgYSByYW1hY2hhbmRyYW4ncyBkaWFiZXRlcyBob3NwaXRhbHMiLWRyIGEgcmFtYWNoYW5kcmFuJ3MgZGlhYmV0ZXMgaG9zcGl0YWxzIGVnbW9yZZIBD2RpYWJldGVzX2NlbnRlcrABAA",
        "12",
        "0",
        "0",
        "",
        "2021-06-15 05:50:32",
        "6381059927"
      ],
      .......
    ],
    "oxygen": [
      [...],
      [...]
    ],
    ....
  }

Implementation notes

• Google Maps Library returns the bounds of the rectangle viewport of the map. This returns only two corners/points. Using these, we can calculate the other two corners. We will need all four corners to request the back-end: See below for some help:
  • https://stackoverflow.com/a/33410207/976880
  • https://aiocollective.com/blog/getbounds-in-google-maps-api-v3/.