Google 2D Map Tiles are simply the division of the world into an indexed grid. It lets you access and use map data efficiently and dynamically at multiple cartographic scales. The Map Tiles API gives you access to multiple thematic geo-datasets, including Google-curated roadmap image tiles and satellite imagery.
Visualize Google 2D Tiles
To show Google 2D Tiles on a LuciadRIA map, you must access the Google Map Tiles API, create a model for the Google 2D Tiles data, and visualize that model in a map layer. You also need to visualize the correct attributions.
Get a Google Maps API key
To start working with Google 2D Tiles, you must get an API key from Google.
Note that more terms may apply for deployment. For more information about Google licensing, see the Google Map Tiles API Policies.
Visualize Google Maps data
Visualizing Google Maps data requires two steps:
-
Create a
GoogleMapsTileSetModelwith your API key and an optional set of map requirements. -
Use a
RasterTileSetLayerto visualize the model.
Expand for Program: Creating a Google Maps raster layer:
async function createGoogleMapsLayer(): Promise<RasterTileSetLayer> {
const model = await createGoogleMapsTileSetModel(GOOGLE_MAPS_API_KEY, {
mapType: "roadmap",
language: "en-US",
region: "US"
});
return new RasterTileSetLayer(model, {
label: "Google Maps",
layerType: LayerType.BASE,
id: "Google"
});
}Set the display options for Google Map Tiles
In the Google Map Tiles API, display options are set through a session token. For a description of all possible display options,
see Google Map Tiles session tokens. You can set them all through GoogleMapsTileSetModelCreateOptions.
Add the Google attributions
Google requires you to show the Google logo and the correct attributions as an overlay on the map.
Overlay the Google logo
To set the correct logo, override the getLogo method of your GoogleMapsTileSetModel.
Program: Add the Google logo shows how you can do that.
Expand for Program: Add the Google logo:
toolbox/ria/loaders/GoogleMapsDataLoader.tsx)
const googleMapsModel = await createGoogleMapsTileSetModel(apiKey, options);
googleMapsModel.getLogo = function(): string {
return GoogleLogoUrl;
};Overlay tileset attributions
The attributions for Google 2D Tiles vary depending on the tiles that you have in your view. Different zoom levels and different zones on the globe have their own copyright information. The Google Map Tiles API policies specify that you must collect, sort, and aggregate all that information. LuciadRIA does that for you automatically.
Get the logo and attributions on screen
The LuciadRIA sample code contains an Attribution overlay component to handle this.
Please refer to the sample samples/common/ui/overlay/Attribution.tsx for more details.
Expand for Program: Google Maps attributions and logo:
Attribution (from samples/common/ui/overlay/Attribution.tsx)
export const Attribution = ({map, separator = " • ", staticAttributions}: Props) => {
const [layerAttributions, setLayerAttributions] = useState<LayerAttribution[]>([]);
useEffect(() => {
const attributionProvider = new TileSetAttributionProvider(map);
const layerAttributionListener = attributionProvider.on("LayerAttributionsChanged", (layerAttributions) => {
setLayerAttributions(layerAttributions);
});
setLayerAttributions(attributionProvider.getLayerAttributions())
return () => {
layerAttributionListener.remove();
}
}, [map]);
// if multiple layers provide attribution, add the layer label to the line, so you know what attributions belong to what layer
const showLayerLabel = layerAttributions.length > 1;
return (
<div className="attribution">
<div className="attribution-strings">
{layerAttributions.map(attr =>
<div key={attr.layer.id}>
{(showLayerLabel ? `[${attr.layer.label}]: ` : "")}
{attr.attributionStrings.join(separator)}
{(attr.attributionLogos as string[]).map(
logo => <img className="attributionLogo" alt={logo} key={logo} src={logo}/>)}
</div>
)}
{staticAttributions}
</div>
</div>
)
}