There is a requirement to display approximately 4500 ZIP codes across the country. Each ZIP code polygon is highly detailed with a large number of points (vertices) and needs to be interactive, allowing individual ZIP codes to be highlighted on mouse hover.
However, the current implementation is struggling in terms of performance. Rendering and highlighting are slow processes, with rendering occurring in parts and changing the fillColor for highlighting via setStyle().
This is how the implementation works:
- All data is stored and passed into HERE Maps as GeoJSON, with separate GeoJSON files for each of the 4500 ZIP codes;
- The H.data.geojson.Reader() is employed;
- An H.map.Group is created, and all Polygons are added to this group;
Efforts to optimize the implementation include:
- Simplifying all polygons as much as possible (ideally, avoiding this step altogether);
- Rendering only polygons that intersect with the bounding box of the map view, ranging from 70 to 180 polygons per rendering. Instead of rendering all 4500 polygons, objects are removed and added to the group based on the updated bounding box when panning the map on 'mapviewchangeend' event.
Is the current rendering performance expected when dealing with such a large number of polygons, or is there potentially a more efficient approach to rendering ZIP codes while maintaining acceptable performance?
The provided code exhibits the logic and methods used to handle the rendering and interaction with the ZIP code polygons.
}
const gcm = new GCM(); document.addEventListener("DOMContentLoaded", () => gcm.startApp());