{"id":25917,"date":"2025-01-09T13:40:31","date_gmt":"2025-01-09T13:40:31","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=25917"},"modified":"2026-01-13T12:00:28","modified_gmt":"2026-01-13T12:00:28","slug":"us-map-of-top-100-cities-using-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/us-map-of-top-100-cities-using-highcharts\/","title":{"rendered":"US map of top 100 cities using Highcharts"},"content":{"rendered":"

Creating an interactive map of US cities using Highcharts allows users to visualize geographic and demographic data effectively. Highcharts\u00ae Maps<\/a>, with its tile-based mapping, provides excellent performance and scalability for large datasets, making it ideal for mapping projects like visualizing the population of the top 100 cities in the US.<\/p>\n

In this post, we will discuss how Highcharts\u00ae Maps<\/a>, combined with tiled web maps, can be used to display city-level data – such as city names, state abbreviations, and populations – in an interactive, customizable format.<\/p>\n

To see more examples and get an even better understanding of the opportunities Highcharts offers, please head over to the demo section<\/a> of our website or read up on the technical documentation<\/a> on how to get started. Once you get the hang of it, the API reference<\/a> will help you customize your charts in no time.<\/p>\n

Whether you\u2019re a developer working with JavaScript, .NET, React or other common frameworks, we\u2019re confident you\u2019ll find the inspiration you need.<\/p>\n

Highcharts also integrates seamlessly with popular languages such as Python, R, PHP and Java, as well as mobile platforms like iOS and Android. Additional support for frameworks like Svelte, Angular, and Vue, makes it a versatile tool for various development environments.<\/p>\n

 <\/p>\n

Why map US cities?<\/b><\/h2>\n

Visualizing city-level data helps users better understand population trends, regional dynamics, and geographic distributions. Whether it\u2019s for business analysis, urban planning, or educational purposes, mapping US cities offers a clear and intuitive way to present complex data.<\/p>\n

Interactive maps allow users to explore data points by region, focus on specific cities, and extract valuable insights through zooming, panning, and hovering over individual data points. In this post\u2019s example, we focus on the top 100 most populated cities in the US, using tooltips to display each city\u2019s name, state abbreviation, and population.<\/p>\n

 <\/p>\n

Highcharts and tiled web maps\u00a0<\/b><\/h2>\n

Highcharts is widely recognized for its ability to handle large, complex data sets in an interactive, user-friendly manner. Tile-based mapping allows users to integrate real-world tile providers, like OpenStreetMap, which break down the map into smaller sections (tiles) for more efficient loading and rendering.<\/p>\n

This technique offers several advantages:<\/p>\n

    \n
  • Scalability<\/b>: The map loads only the necessary tiles, allowing for smooth performance even with large datasets.<\/li>\n
  • Customization<\/b>: Markers, tooltips, and zoom features can be tailored to the user\u2019s needs.<\/li>\n
  • Detail<\/b>: Users can zoom into specific regions or cities without losing data granularity.<\/li>\n<\/ul>\n

    For this map of US cities, Highcharts uses the Web Mercator projection, a standard for web mapping applications. By integrating OpenStreetMap as the tile provider, the map tiles load dynamically as the user navigates the map, ensuring a seamless experience even with detailed data at city-level granularity.<\/p>\n

     <\/p>\n

    Map example<\/b><\/h2>\n

    This US map of cities will focus on the following data points:<\/p>\n

      \n
    1. City name<\/b>: Each city is represented on the map by its name.<\/li>\n
    2. State abbreviation<\/b>: The state abbreviation (e.g., NY for New York) helps identify the city\u2019s location within the US.<\/li>\n
    3. Population<\/b>: Population data will be included for each city, displayed in a tooltip when users hover over the city marker. Notice how the size of the marker is adjusted for city\u00a0 population size.<\/li>\n<\/ol>\n

      By focusing on these key data points, users can interactively explore population distributions and identify the largest cities in the US.<\/p>\n

       <\/p>\n