Maps Platform
Product updates, customer stories, and tips and tricks on Google Maps Platform
Interactive Data Layers in the JavaScript Maps API
Thursday, April 9, 2015
Posted by Joshua Lau, Google Maps JavaScript API v3 team in Sydney
Editor's Note:
Joshua Lau studies Computer Science and Mathematics at the University of New South Wales, Australia. He has spent the past summer interning on the Google Maps JavaScript API v3 team in Sydney. He’s had lots of fun enabling users to edit, drag and create Data layer Features on Maps.
Today we’re introducing new features to the Data Layer that will make it easy for you to allow users to input and edit geographic data and get the updated data in GeoJSON format. Geographical data make maps interesting, informative and useful for users. For example, interactive Data Layers can be used to gather user opinions on the best places to visit and easily build heatmaps based on popular hotspots by using a Styling Function on the Data Layer. Or perhaps you could build a real estate site that allow users to draw Polygons to describe the areas that they do and don’t want to live in. The possibilities are endless.
Previously, we
introduced Data Layers
in the JavaScript Maps API v3, enabling you to visualize custom geographical data features on your maps and style them based on their attributes. You could also import and export data onto Data Layers in the popular
GeoJSON
format. For details, see the
Developer’s Guide to the Data Layer
.
Graphically Edit a Data Layer
You can allow users to edit a Data Layer by setting the draggable and editable styling options. Using the existing toGeoJson() method, you’ll also be able to easily extract the updated Data Layer in GeoJSON format.
Users can also draw new Points, LineStrings and Polygons. You can enable this behaviour by specifying a list of drawing controls. See editing and drawing in action below.
map.data.setStyle({draggable: true, editable: true});
map.data.setControls(['Point', 'LineString', 'Polygon']);
Editing a polygon
Use the Simple GeoJSON Editor
To showcase these new features, we’ve built a
Simple GeoJSON Editor
that lets users import GeoJSON via drag and drop, edit it, and export. Play with it, and take a look at the source to see how it’s done.
Adding some extra points using the app
Display Geodesics in the Data Layer
As an added bonus, we’re also rolling out the ability to display Line String and Polygon geometries geodesically (their edges follow the curvature of the Earth). This can be enabled by setting the geodesic styling option on the respective Data Layer.
The shortest route from San Francisco to London is via Greenland
If you’d like to know more, head over to our
API Reference
. We’d love to hear about the exciting new apps you’re building with the new features in the Data layer. Feel free to share them in the comments below. Have fun!
Labels
5 Great Maps
ads
advertising
africa
Andorra
Android
App Engine
art
Australia
Autocomplete
Boston
brazil
Bruce Springsteen
Bulgaria
Campus Map
Chrome
City 24/7
Code for America
COM API
Computerlogy
creative advertising campaigns
Custom Map Types
design
developer
Developer Challenge
Developer stories
Directions API
Drawing Tools
Driving Directions
Earth
Earth API
Elevation API
environment
epungo
Estonia
Europe
Fab Friday
flash
Fusion Tables
GAE
games
GDAL
Gears
geo
Geodesic Lines
Germany
Gibraltar
GIS
Global Economy
gme
Google Analytics
Google App Engine
Google Earth
Google Earth API
Google I/O
Google Maps
Google Maps API
Google Maps Engine
Google Places API
Google Places API Developer Challenge
Google Street View API
government
Hackathon
Hamburg
heat map
heatmap
hiking
Hungary
iOS
JavaScript
jQuery
kenya
KML
Latitude API
Latvia
launch
Lithuania
local search
London
Mac
Map of the Week
maps
Maps API
Maps API for Flash
Maps Data API
Maps Zen
Marker Clusterer
Marketing
Mars
meetup
mobile
moca
modern art
More Than a Map
Morethanamap
Movies
Neighborhoods
New York City
Office Hours
Olympics
Panoramio
photos
Place Summaries
Places API
Plus
polygons
Premier
public transit
public transit layer
Python
real estate
rock
sao paulo
screencast
SketchUp
Slovakia
Slovenia
South Africa
Spain
Spatial Data Files
Static Maps API
street view
Styled Maps
Sydney
Track
traffic layer
Transportation
Tripline
Twitter
UN
United Nations
V3
Vancouver Olympics
visualizations
Volkswagen
VW
web
youtube
Archive
2018
Nov
Jul
Jun
May
Mar
Feb
2017
Nov
Jun
May
Apr
Mar
Feb
Jan
2016
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Feb
2015
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2014
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
2013
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2012
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2011
Dec
Nov
Oct
Sep
Aug
Jul
May
Apr
Mar
Feb
Jan
2010
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2009
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2008
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Feed
Follow @GMapsPlatform
Follow
Google Maps Platform Website
Give us feedback in our
Product Forums
.
Follow