Effectively Visualize a Large Number of Markers Using JavaScript Maps
Tags: javascript, webdev, maps
Published: 2022-09-01 13:30:14

---
title: Effectively Visualize a Large Number of Markers Using JavaScript Maps
published: true
date: 2022-09-01 12:02:45 UTC
tags: javascript, webdev, maps
canonical_url: https://www.syncfusion.com/blogs/post/visualize-a-large-number-of-markers-using-javascript-maps.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nbkfme35umigcojbur6.png
---

There will always be a requirement in a map component for a user to be able to view hospitals, hotels, restaurants, grocery stores, and other places. When viewing these on a world map or a country-specific map, there may be many places and markers scattered around the map, making the map appear cluttered.

The [JavaScript Maps](https://www.syncfusion.com/javascript-ui-controls/js-maps "JavaScript Maps") control is ideal for rendering maps from GeoJSON data or other map providers like OpenStreetMap and Bing Maps. Its rich feature set includes markers, labels, bubbles, navigation lines, legends, tooltips, zooming, panning, drilling down, and more.

Let’s discuss some effective ways to handle and showcase a huge number of markers using the Syncfusion JavaScript Maps control to avoid such congestion.

**Note:** To populate data on a map, refer to the [documentation.](https://ej2.syncfusion.com/documentation/maps/populate-data/ "Populate Data in JavaScript Maps control")

## Zoom to a specific location beside the whole map

The [zooming](https://ej2.syncfusion.com/documentation/maps/user-interactions/#zooming "zooming feature in JavaScript Maps control") feature in the JavaScript Maps control lets us zoom in on maps to show in-depth information. During the initial rendering of a map, you can zoom either to a specific country on a world map or to a specific region on a country map to have a closer view.

To do so, first set the [zoom factor](https://ej2.syncfusion.com/documentation/api/maps/zoomSettingsModel/#zoomfactor "zoom factor property of JavaScript Maps control"), which zooms the map. Then, assign the center position to align the map’s exact latitude and longitude to the user view. In short, we set a custom position for the map.

Refer to the example on the [StackBlitz](https://stackblitz.com/edit/jauscn-4qq6ri?file=index.ts "Zooming to a specific location on the initial loading of a map demo on StackBlitz") on zooming to a specific location on the initial loading of a map.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Zooming-the-U.S.-map-to-view-California-and-its-neighboring-states-during-the-initial-loading-of-the-map..png" alt="Zooming the U.S. map to view California and its neighboring states during the initial loading of the map." style="width:100%">

  <figcaption>Zooming the U.S. map to view California and its neighboring states during the initial loading of the map.</figcaption>

</figure>

You can also zoom to a specific position or coordinate at any time using the [zoomByPosition](https://ej2.syncfusion.com/documentation/api/maps/#zoombyposition "zoomByPosition method of JavaScript Maps") and [zoomToCoordinates](https://ej2.syncfusion.com/documentation/api/maps/#zoomtocoordinates "zoomToCoordinates method of JavaScript Maps") built-in methods, respectively. The **zoomByPosition** method uses the center position’s latitude and longitude, as well as the zoom factor, to customize the position of the map. The **zoomToCoordinates** method takes the minimum and maximum latitude and longitude, that is, the top, left, bottom, and right portions of the map, to be brought into the viewport.

### Zoom by position

Refer to the example on [StackBlitz](https://stackblitz.com/edit/jauscn-o2qtda?file=index.ts "Zooming a map by position at runtime demo on StackBlitz") on zooming a map by position at runtime.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Zooming-Texas-and-its-neighboring-states-in-the-U.S.-map-at-runtime.png" alt="Zooming Texas and its neighboring states in the U.S. map at runtime" style="width:100%">

  <figcaption>Zooming Texas and its neighboring states in the U.S. map at runtime</figcaption>

</figure>

### Zoom to coordinates

Refer to the example on [StackBlitz](https://stackblitz.com/edit/jauscn-d7ktgf?file=index.ts "Zooming to coordinates on a map at runtime demo on StackBlitz") for zooming to coordinates on a map at runtime.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/08/Zooming-the-U.S.-map-to-view-Wisconsin-and-its-neighboring-states-at-runtime.png" alt="Zooming the U.S. map to view Wisconsin and its neighboring states at runtime" style="width:100%">

  <figcaption>Zooming the U.S. map to view Wisconsin and its neighboring states at runtime</figcaption>

</figure>

## Marker cluster

We saw how to be choosy about which locations are displayed in the viewport. On the other hand, there are times when viewers want to see the entire world map or an entire country’s map at once, which is where a marker cluster comes in handy.

When there are many overlapping markers, we can group them using the [marker cluster](https://ej2.syncfusion.com/documentation/maps/markers/#marker-clustering "Marker clustering in JavaScript Maps") feature in JavaScript Maps. The number above the cluster represents the number of overlapped markers within it.

When we zoom in on any of the cluster locations, the number on the cluster decreases, and the individual markers appear on the map. When we zoom out of any of the cluster locations, the number of markers on the cluster increases, and the individual markers are added to the cluster.

You can also expand a marker cluster by clicking on it, which organizes and displays individual markers around the cluster.

Refer to the example for marker clustering on [StackBlitz](https://stackblitz.com/edit/jauscn-tdzzax?file=index.ts "Marker clustering demo on StackBlitz").
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/09/Displaying-marker-clusters-over-the-U.S.-map.png" alt="Displaying marker clusters over the U.S. map" style="width:100%">

  <figcaption>Displaying marker clusters over the U.S. map</figcaption>

</figure>


**Note:** For more details, refer to the [Markers in JavaScript Maps documentation.](https://ej2.syncfusion.com/documentation/maps/markers/ "Markers in JavaScript Maps documentation")

## Conclusion

Thanks for reading! In this blog, we have seen how to handle and visualize a huge number of markers on a map effectively using the Syncfusion [JavaScript Maps](https://www.syncfusion.com/javascript-ui-controls/js-maps "JavaScript Maps") control. With this, you can elegantly visualize the places you want to locate on a map without any congestion. JavaScript Maps also supports other data visualization features like [layers](https://ej2.syncfusion.com/documentation/maps/layers/ "Layers in JavaScript Maps control") and [legends](https://ej2.syncfusion.com/documentation/maps/legend/ "Legend in JavaScript Maps control"). Try them and leave your feedback in the comments section below!

You can also enjoy these features in our [Blazor](https://www.syncfusion.com/blazor-components/blazor-maps "Blazor Maps"), ASP.NET ([Core](https://www.syncfusion.com/aspnet-core-ui-controls/maps "ASP.NET Core Maps"), [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/maps "ASP.NET MVC Maps"), [Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/maps "ASP.NET Web Forms Maps")), [Angular](https://www.syncfusion.com/angular-ui-components/angular-maps "Angular Maps"), [React](https://www.syncfusion.com/react-ui-components/react-maps "React Maps"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-maps "Vue Maps"), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-maps "Flutter Maps"), [UWP](https://www.syncfusion.com/uwp-ui-controls/map "UWP Maps"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/map "WinForms Maps"), [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-maps "Xamarin.Forms Maps"), [.NET MAUI](https://www.syncfusion.com/maui-controls/maui-maps ".NET MAUI Maps"), and [WPF](https://www.syncfusion.com/wpf-ui-controls/map "WPF Maps") Maps controls.

For current customers, the new Essential Studio version is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out our newest features.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/javascript "Syncfusion feedback portal"). We are always happy to assist you!

## Related blogs

- [Handling Concurrent Requests with JavaScript Callbacks](https://www.syncfusion.com/blogs/post/handling-concurrent-requests-with-javascript-callbacks.aspx "Blog: Handling Concurrent Requests with JavaScript Callbacks")
- [Top 7 JavaScript Object Destructuring Techniques](https://www.syncfusion.com/blogs/post/top-7-javascript-object-destructuring-techniques.aspx "Blog: Top 7 JavaScript Object Destructuring Techniques")
- [Build a Progress Bar in JavaScript Using a Linear Gauge](https://www.syncfusion.com/blogs/post/how-to-build-a-progress-bar-in-javascript-using-a-linear-gauge.aspx "Blog: Build a Progress Bar in JavaScript Using a Linear Gauge")
- [Design an Interactive Dashboard for COVID-19 Updates in JavaScript](https://www.syncfusion.com/blogs/post/design-an-interactive-dashboard-for-covid-19-updates-in-javascript.aspx "Blog: Design an Interactive Dashboard for COVID-19 Updates in JavaScript")