Displaying data on maps allows you to communicate key information to your users in a more engaging and intuitive way. One way to do this is to use polygons to highlight regions and data. Many of you have told us that purchasing, updating, and maintaining your own boundary data to Style polygons and create choropleth maps is expensive and requires a lot of development time and resources. One of the most requested features is access to the same boundaries and polygons used in Google Maps to create informative and engaging maps for your customers. They announced the preview release of Data Driven Styling for the Maps JavaScript API, which allows you to display and style Google boundaries.

What is data-driven styling?

Data-driven styling is a new feature that lets you style your maps to visually convey key information to your users, using your proprietary data (e.g. store inventory) or publicly available data (e.g. example, election results).

The first feature we’re enabling with data-driven styling is the ability for you to easily display Google polygons for administrative boundaries, or enhance your own tabular business data with Google administrative boundaries to style polygons or create rich and personalized choropleth maps. This opens up possibilities for new visually appealing user experiences and provides additional context to users about the areas that matter to them, helping them make more informed decisions and save time.

Preview version of the Google Maps JavaScript API

The data-driven style provides the same polygons for boundaries that you see on Google Maps. Access country borders around the world, and for some countries we provide access to additional administrative border types such as localities, postcodes, etc. Additionally, Google manages administrative boundary data for you, so you don’t have to buy, update, and manage boundary data yourself.

“The ability to highlight geographic boundaries on a map has been a long-awaited feature for our customers. It enables many new use cases where previously you had to worry about complex technicalities and a expensive data. Google Maps Platform is a source that provides high-quality polygons,” said Martin Kleppe, co-founder of Ubilabs.

Main use cases

The data-driven style enables a wide range of use cases that utilize edge data across various industries including real estate, travel, media, government, education, and many more. You can set the style and display the polygon for a specific administrative boundary that you choose.

To help a user easily see if an ad is in the desired area, you can provide context for a house, hotel, or store search by displaying the polygon of the locality or postcode they searched for. .

It also allows you to create a choropleth map for an administrative boundary type, using boundary data from Google and your own commercial tabular or sources data. For example, style multiple countries, Tier 1 administrative areas, localities, or postcode boundaries based on Covid-19 cases, house prices, or election results.

The data-driven style also supports interactive user experiences. Clicking on a polygon on your map returns metadata to your apps, including the location ID, feature type, and display name of the clicked polygon. These events are useful for experiments where you want to redesign the map based on user interactions.

Using data-driven styling

To enable data-driven styling, select the feature layers you want to enable for a new or existing map style in the Google Cloud Console, and associate that style with a map ID that has vector map for JavaScript enabled. . Please note that data-driven styling is not supported for static maps or raster tile map in JavaScript.

You’ll find the feature layer drop-down list in your map styles settings over the next few days.

Then apply a FeatureStyleOptions or FeatureStyleFunction object to a feature layer in your code. You can customize the fill and line color, fill and line opacity, and line thickness for each feature layer.

“At AppGeo, we’ve been developing apps on Google Maps Platform for many years and the data-driven style feature is just another example of how Google continues to make it easier for novices and map experts alike. to shine a light on their spatial insights.-Driven style provides much easier access to the most commonly desired geographies for data aggregation and visualization.We can now bring customer data to life faster with less infrastructure of supporting data and would be happy to help anyone interested learn how to take advantage of these new assets,” said David Breeding, principal/analytics director, AppGeo.

Cover

For the preview release, the data-driven style provides access to feature types for administrative areas, including countries, localities, zip codes, and more.

See our coverage chart in the documentation to view supported countries and available feature types. We will continue to roll out additional coverage throughout the preview phase. If you would like to add specific countries and feature types, please let us know your feedback through our issue tracker.

Styling Polygons Using Location ID

A common use case for data-driven styling is to style individual polygons or a subset of polygons within a feature type, such as a limited set of countries or localities. The best way to do this is to reference these boundaries using their location IDs, which we allow you to cache indefinitely.

To make it easier to prefetch location identifiers for individual regions, we provide a region search utility that gives you the option of providing geographic coordinates, an address, place name, ISO code or FIPS code and returns the location ID of the region available at this location. location. This utility is an open source library for JavaScript available on our Google Maps repository on GitHub. You can also use geocoding, location search, or autocomplete to retrieve location IDs for regions.

How to start

Data-driven styling is included with Dynamic Maps for Maps Javascript API. Developers can use data-driven styling and other cloud-based map styling features for dynamic maps by creating a MapID configured with a Javascript vector map in Google Cloud Console. In the future, we plan to introduce additional features that will extend the data-driven style to help you create more personalized visualization and interactive experiences for your users and leverage your unique data.

Data-driven styling will be available in preview over the next week for the Maps JavaScript API, check out our documentation to try it out and let us know what you think. Also check out our new Dynamic Maps webpage to learn more, try the demo, and learn more use cases and cloud-based map styling capabilities. Our team is excited to see what new possibilities these features open up for styling your maps.