Tutorials

US map of top 100 cities using Highcharts

by

Highsoft

8 minutes read

US map of top 100 cities using Highcharts

Creating an interactive map of US cities using Highcharts allows users to visualize geographic and demographic data effectively. Highcharts® Maps, 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.

In this post, we will discuss how Highcharts® Maps, 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.

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

Whether you’re a developer working with JavaScript, .NET, React or other common frameworks, we’re confident you’ll find the inspiration you need.

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.

Why map US cities?

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

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’s example, we focus on the top 100 most populated cities in the US, using tooltips to display each city’s name, state abbreviation, and population.

Highcharts and tiled web maps

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.

This technique offers several advantages:

Scalability: The map loads only the necessary tiles, allowing for smooth performance even with large datasets.
Customization: Markers, tooltips, and zoom features can be tailored to the user’s needs.
Detail: Users can zoom into specific regions or cities without losing data granularity.

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.

Map example

This US map of cities will focus on the following data points:

City name: Each city is represented on the map by its name.
State abbreviation: The state abbreviation (e.g., NY for New York) helps identify the city’s location within the US.
Population: 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 population size.

By focusing on these key data points, users can interactively explore population distributions and identify the largest cities in the US.

<br />

Here’s how to recreate the map

Load the required files

For basics, see Highcharts installation. The framework requirements and installation is the same for Highcharts® Maps as for Highcharts.

Note that this example in addition to the base Highchart script and the tiledwebmap.js module also includes some additional scripts, namely the Export modules (docs) and Accessibility module (docs).

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/maps/modules/tiledwebmap.js"></script>

Insert some CSS to control the container that holds the map


#container {
    height: 600px;
    max-width: 900px;
    margin: 0 auto;
}

Load and initialize the map


(async () => {
    try {
        // Fetching data for the top 100 cities from external JSON file
        const data = await fetch(
'https://cdn.jsdelivr.net/gh/highcharts/highcharts@0dc2518d8353/samples/data/us-population-city-100.json'
        ).then(response => response.json());

        // Create the map chart
        Highcharts.mapChart('container', {
            chart: {
                height: '50%'
            },
            title: {
                text: 'US map of top 100 cities by population'
            },
            mapNavigation: {
                enabled: true,
                enableMouseWheelZoom: true,
                enableDoubleClickZoom: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },
            legend: {
                enabled: false
            },
            mapView: {
                fitToGeometry: { 	  // Centering and fitting map to screen
                    type: 'Polygon',
                    coordinates: [[
                        [-125, 25], // Southwest corner
                        [-125, 45], // Northwest corner
                        [-66, 45],  // Northeast corner
                        [-66, 25],  // Southeast corner
                        [-125, 25]  // Closing the polygon
                    ]]
                },
                padding: 5
            },
            tooltip: {
                headerFormat: '',
                pointFormat: '{point.name}
Population: {point.z:,f}'
            },
            plotOptions: {
                mapbubble: {
                    minSize: '5%',
                    maxSize: '15%',
                    allAreas: false,
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            series: [
                {
                    type: 'tiledwebmap',
                    provider: {
                        type: 'OpenStreetMap',
                        theme: 'Standard'
                    }
                },
                {
                    type: 'mapbubble',
                    name: 'Cities',
                    color: Highcharts.getOptions().colors[1],
                    data: data.map(city => ({
                        name: `${city.city}, ${city.stateAbbr}`,
                        lat: city.lat,
                        lon: city.lon,
                        z: city.population // Population used for bubble size
                    })),
                    marker: {
                        symbol: 'circle',
                        lineWidth: 1,
                        lineColor: '#ffffff'
                    }
                }
            ],
            chartOptions: {
                legend: {
                    enabled: false
                }
            }
        });
    } catch (error) {
        console.error('Error creating map chart:', error);
    }
})();

Interactive features of the map

Highcharts offers several interactive features to enhance the user experience:

Tooltips: Tooltips are critical for providing additional information without overcrowding the map. In this example, hovering over a city will display its name, state abbreviation, and population in an easy-to-read format.
Markers: Circular markers are used to indicate the locations of the cities. These markers are customizable, allowing for changes in size, color, or style to suit the project’s needs.
Zoom and pan functionality: Users can zoom into specific regions or pan across the country, making it easier to explore densely populated areas like the East Coast or compare different regions.

These features make it easy to explore US city data on the map, allowing users to delve deeper into specific regions or cities while maintaining an overview of the entire country.

Optimizing map performance

The tiled web map approach significantly improves map performance, especially when visualizing large datasets like city populations. Instead of loading the entire map at once, tiles are loaded as needed based on the user’s zoom level and the map’s viewport. This ensures faster load times and smoother interaction, especially when zooming in on specific cities or regions.

Performance optimization techniques include:

Lazy loading: Only the necessary data points and map tiles are loaded when required, improving performance and reducing initial load times.
Efficient rendering: Highcharts handles the rendering of city markers dynamically, ensuring smooth navigation even when displaying numerous data points.

These features make Highcharts an excellent tool for creating responsive, interactive maps that handle large datasets without performance issues.

Customizing the map

Highcharts provides a high level of customization, allowing developers to tailor the map’s appearance and functionality. For this US city map, circular markers are used to represent the cities, with a white border to enhance visibility. Tooltips are formatted to display population data in a user-friendly way, with commas separating the numbers for readability.

Other customization options include adjusting the zoom level to ensure the entire US is visible by default, but still allowing users to zoom in for more detailed exploration of specific areas.

Practical applications of US city maps

Mapping US cities has a wide range of applications across industries. Here are some practical use cases:

Business analysis: Companies can use city maps to track customer locations, sales performance, or regional market penetration. Maps can highlight underserved areas or regions where business opportunities exist.
Urban planning: City maps are essential tools for government agencies and planners. Maps can show population density, growth patterns, and urban infrastructure needs, helping decision-makers allocate resources efficiently.
Education and research: City maps can be used in educational settings to teach population distribution, geographic trends, and urbanization. Researchers can also use these maps to explore correlations between population data and other variables like economic activity or environmental impact.

Conclusion and additional resources

Creating a US map of cities using Highcharts and tiled web maps provides a powerful tool for visualizing detailed geographic data. Whether you are tracking population distribution, regional sales, or other demographic data, an interactive map offers clear insights and enhances data exploration. By leveraging the scalability and customization features of Highcharts, you can build a dynamic, high-performance map that handles large datasets effectively. From displaying population data to enabling zoom and pan features, Highcharts allows you to create a responsive, user-friendly map tailored to your specific needs.