Maps made easier: GeoJSON in the JavaScript Maps API
March 18th, 2014 | Published in Google Maps
Maps give us an easy way to visualize all types of information, from patterns in health expenditure across the world, to oceans with the highest concentration of coral reefs at risk. The tools used to create these maps should be just as easy to use. That’s why, starting today, the JavaScript Maps API will support GeoJSON, making it simpler for developers to visualize richer data, with even cleaner code.
GeoJSON has emerged as a popular format for sharing location-based information on the web, and the JavaScript Maps API is embracing this open standard. This means, as a developer, you can now pull raw data from multiple data sources, such as the US Geological Survey or Google Maps Engine, and easily display it on your website.
How does it work? The new Data layer allows you to treat a dataset like… well, a set of data, rather than individual and unrelated features. If you have a GeoJSON file, you can now load it on the map simply by adding a single line of code to your JavaScript:
Tada! And what’s more, most places have attributes beyond just location: stores have opening times, rivers have current speed, and each Girl Guide troop has cookie selling turf. The Data layer allows you to represent all attributes in GeoJSON right on the map and make decisions about what data to display more easily.
You can use this information to create a styling function that says, “show the earthquakes as circles, scaled to their magnitude” and as the data or rules are updated, the styling will automatically be applied to every feature. This beats having to manually update each feature or rule as more information is added to the map.
Get started by checking out our developer docs, the code for these earthquake maps, this cool demo showing data from different sources, and this Google Developers Live video. This is a new feature, so if you run into problems or think of any additions you’d love to see, get help on StackOverflow and check our support page for the right tags to use.
We’re looking forward to seeing what you build with this new tool and, as always, we’re eager for your feedback. Please comment on this post or on our Google+ Page.
Posted by Jen Kovnats, Product Manager on the Maps API Team
GeoJSON has emerged as a popular format for sharing location-based information on the web, and the JavaScript Maps API is embracing this open standard. This means, as a developer, you can now pull raw data from multiple data sources, such as the US Geological Survey or Google Maps Engine, and easily display it on your website.
How does it work? The new Data layer allows you to treat a dataset like… well, a set of data, rather than individual and unrelated features. If you have a GeoJSON file, you can now load it on the map simply by adding a single line of code to your JavaScript:
map.data.loadGeoJSON(‘earthquakes.json’);
Earthquakes over the past week loaded on the map
USGS All Earthquakes, Past Week courtesy of the U.S. Geological Survey
Tada! And what’s more, most places have attributes beyond just location: stores have opening times, rivers have current speed, and each Girl Guide troop has cookie selling turf. The Data layer allows you to represent all attributes in GeoJSON right on the map and make decisions about what data to display more easily.
You can use this information to create a styling function that says, “show the earthquakes as circles, scaled to their magnitude” and as the data or rules are updated, the styling will automatically be applied to every feature. This beats having to manually update each feature or rule as more information is added to the map.
Earthquakes over the past week, with a styling function applied
USGS All Earthquakes, Past Week courtesy of the U.S. Geological Survey
Earthquakes over the past week, with additional color and basemap styling applied
USGS All Earthquakes, Past Week courtesy of the U.S. Geological Survey
Get started by checking out our developer docs, the code for these earthquake maps, this cool demo showing data from different sources, and this Google Developers Live video. This is a new feature, so if you run into problems or think of any additions you’d love to see, get help on StackOverflow and check our support page for the right tags to use.
We’re looking forward to seeing what you build with this new tool and, as always, we’re eager for your feedback. Please comment on this post or on our Google+ Page.
Posted by Jen Kovnats, Product Manager on the Maps API Team