# How to use dynamic maps
These how-to topics offer a comprehensive walkthrough teaching you how to enhance your mapping applications using the Amazon Location Service. From displaying interactive maps to adding markers, lines, and polygons, these tutorials demonstrate how to utilize essential features like setting map controls, adding custom icons, and handling real-time data. Furthermore, the topics also cover localization and internationalization aspects, such as setting preferred languages, adjusting political views, and ensuring compliance with regional laws by customizing map content based on the user’s location or perspective.
Each how-to is designed to be accessible, with step-by-step instructions for implementing these features in web applications using MapLibre GL JS. Whether your goal is to build a dynamic map experience with custom icons and popups or to tailor map views for specific political perspectives and languages, these examples will help you achieve your objectives while ensuring a rich, localized mapping experience for users across different regions. These tutorials ensure that you can fully leverage the capabilities of Amazon Location Service, from basic mapping functions to complex geopolitical and localization needs.
**Topics**
+ [How to display a map](how-to-display-a-map.md)
+ [How to add control on the map](how-to-add-control-on-map.md)
+ [How to add a marker on the map](how-to-add-marker-on-map.md)
+ [How to add an icon on the map](how-to-add-icon-on-map.md)
+ [How to add a line on the map](how-to-add-line-on-map.md)
+ [How to add a polygon on the map](how-to-add-polygon-on-map.md)
+ [How to add a popup to a map](how-to-add-popup-to-map.md)
+ [How to set a preferred language for a map](how-to-set-preferred-language-map.md)
+ [How to set the political view of a map](how-to-set-political-view-map.md)
+ [How to filter POI on the map](how-to-filter-poi-map.md)
+ [How to create topographic maps](how-to-create-topographic-maps.md)
+ [How to show real-time traffic on a map](how-to-set-real-time-traffic-map.md)
+ [How to create a logistics map](how-to-create-logistic-map.md)
+ [How to show transit details on a map](how-to-show-transit-details-map.md)
+ [How to create a 3D map](how-to-create-a-3d-map.md)
# How to display a map
Amazon Location Service allows you to display both interactive and non-interactive maps using our map styles. See [AWS map styles and features](map-styles.md) to learn more.
## Interactive map
In this example, you will display an interactive map that allows users to zoom, pan, pinch, and pitch.
### Interactive map code example
------
#### [ index.html ]
```
Display a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Restrict map panning beyond an area
In this example, you will restrict the map from being panned beyond a defined boundary.
### Restrict map panning code example
------
#### [ index.html ]
```
Display a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Non-interactive map
In this example, you will display a non-interactive map by disabling user interaction.
### Non-interactive map code example
------
#### [ index.html ]
```
Display a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
# How to add control on the map
Amazon Location Service allows you to add multiple controls to the map, including navigation, geolocation, fullscreen, scale, and attribution controls.
+ **Navigation control**: Contains zoom buttons and a compass.
+ **Geolocate control**: Provides a button that uses the browser's geolocation API to locate the user on the map.
+ **Fullscreen control**: Contains a button for toggling the map in and out of fullscreen mode.
+ **Scale control**: Displays the ratio of a distance on the map to the corresponding distance on the ground.
+ **Attribution control**: Presents the map's attribution information. By default, the attribution control is expanded (regardless of map width).
You can add the controls to any corner of the map: top-left, bottom-left, bottom-right, or top-right.
## Adding map controls
In the following example, you'll add the map controls listed above.
### Map control code example
------
#### [ index.html ]
```
Map Controls
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Developer tips
### Navigation control options
```
new maplibregl.NavigationControl({
showCompass: true, // show or hide compass (default: true)
showZoom: true // show or hide zoom controls (default: true)
});
```
### Geolocate control options
```
new maplibregl.GeolocateControl({
positionOptions: { enableHighAccuracy: true }, // default: false
trackUserLocation: true // default: false
});
```
### Attribution control options
```
new maplibregl.AttributionControl({
compact: true, // compact (collapsed) mode (default: false)
});
```
### Scale control options
```
new maplibregl.ScaleControl({
maxWidth: 100, // width of the scale (default: 50)
unit: 'imperial' // imperial or metric (default: metric)
});
```
### Fullscreen control options
```
map.addControl(new maplibregl.FullscreenControl({
container: document.querySelector('body') // container for fullscreen mode
}));
```
# How to add a marker on the map
With Amazon Location, you can add both fixed and draggable markers, and you can also customize the color of the markers based on your data and preferences.
## Add a fixed marker
### Fixed marker code example
------
#### [ index.html ]
```
Add marker on a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Add a draggable marker
### Draggable marker code example
------
#### [ index.html ]
```
Add draggable marker on a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Changing marker color
### Colorful marker code example
------
#### [ index.html ]
```
Adding colorful marker on a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Add multiple markers
### Multiple markers code example
------
#### [ index.html ]
```
Adding multiple markers on a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
# How to add an icon on the map
Amazon Location Service enables you to add icons, preferably in PNG format, to the map. You can add icons to specific geolocations and style them as needed.
## Add a static icon
In this example, you will use an external URL to add an icon to the map using a symbol layer.
### Static icon code example
------
#### [ index.html ]
```
Static icon on map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
# How to add a line on the map
With Amazon Location Service, you can add both pre-recorded GPS traces as line-strings and real-time GPS traces to dynamic maps.
## Adding a pre-recorded line
In this example, you will add a pre-recorded GPS trace as a GeoJSON (main.js) to the dynamic map. To do so, you need to add a source (like GeoJSON) and a layer with line styling of your choice to the map.
### Pre-recorded line code example
------
#### [ index.html ]
```
Add a line on the map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
#### [ main.js ]
```
const routeGeoJSON = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[-123.117011, 49.281306],
[-123.11785, 49.28011],
...
[-123.135735, 49.30106]
]
},
properties: {
name: "Amazon YVR to Stanley Park",
description: "An evening walk from Amazon office to Stanley Park."
}
}
]
};
```
------
## Add a line in real-time
In this example, you will simulate adding new GPS coordinates one by one to create a real-time GPS trace. This is useful for tracking real-time data updates.
### Real-time line code example
------
#### [ index.html ]
```
Add a line on the map in real-time
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
#### [ main.js ]
```
const routeGeoJSON = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[-123.117011, 49.281306],
[-123.11785, 49.28011],
...
[-123.135735, 49.30106]
]
},
properties: {
name: "Amazon YVR to Stanley Park",
description: "An evening walk from Amazon office to Stanley Park."
}
}
]
};
```
------
## Developer tips
**Fitting bounds:** You can fit the line to the map bounds by calculating the bounds of the line's coordinates:
```
const coordinates = routeGeoJSON.features[0].geometry.coordinates;
const bounds = coordinates.reduce((bounds, coord) => bounds.extend(coord), new maplibregl.LngLatBounds(coordinates[0], coordinates[0]));
map.fitBounds(bounds, { padding: 20 });
```
# How to add a polygon on the map
Amazon Location Service allows you to add polygons to the map. You can style the polygon based on your business needs, including adding fill and border styling.
## Add a polygon
In this example, you will add a polygon to the map and style it with a fill color and a border.
### Polygon code example
------
#### [ index.html ]
```
Overlay a Polygon on a Map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
#### [ main.js ]
```
const barclayHeritageSquare = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"park_id": 200,
"park_name": "Barclay Heritage Square",
"area_ha": 0.63255076039675,
"park_url": "http://covapp.vancouver.ca/parkfinder/parkdetail.aspx?inparkid=200"
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[-123.1320948511985, 49.287379401361406],
[-123.13179672786798, 49.2871908081159],
[-123.13148154587924, 49.28739992437733],
[-123.1313830551372, 49.28733617069321],
[-123.13118648745055, 49.287208851500054],
[-123.13128257706838, 49.28714532642171],
[-123.13147941881572, 49.28727228533418],
...
[-123.13177619357138, 49.28759081706052],
[-123.1320948511985, 49.287379401361406]
]
]
}
}
]
};
```
------
# How to add a popup to a map
Amazon Location Service allows you to add popups to the map. You can add simple popups, click-triggered popups on markers, hover-triggered popups, and popups for multiple markers.
## Add your first popup
In this example, you will add your first popup.
### First popup code example
------
#### [ index.html ]
```
Display a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Show popup on click on a marker
In this example, you will attach a popup to a marker and display it on click.
### Popup on marker click example
------
#### [ index.html ]
```
Display a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Show popup on hover on a marker
In this example, you will attach a popup to a marker and display it on hover.
### Popup on marker hover example
------
#### [ index.html ]
```
Display a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Show popup on click on multiple markers
In this example, you will attach a popup to multiple markers and display it on click.
### Popup on click on multiple markers example
------
#### [ index.html ]
```
Display a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Show popup on hover on multiple markers
In this example, you will attach a popup to multiple markers and display it on hover.
### Popup on hover on multiple markers example
------
#### [ index.html ]
```
Display a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
# How to set a preferred language for a map
Amazon Location Service enables you to set the preferred language at the client-side by updating the style descriptor for a specific language. You can set a preferred language and display content in that language where embedded. Otherwise, it will fall back to another language.
**Note**
For more information, see [Localization and internationalization](maps-localization-internationalization.md).
## Set preferred language to Japanese and show map of Japan
In this example, you will set update style to show map labels in Japanese (ja).
### Set preferred language to Japanese example
------
#### [ index.html ]
```
```
------
#### [ style.css ]
```
body { margin: 0; }
#map { height: 100vh; }
```
------
#### [ main.js ]
```
async function getStyleWithPreferredLanguage(preferredLanguage) {
const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;
return fetch(styleUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(styleObject => {
if (preferredLanguage !== "en") {
styleObject = setPreferredLanguage(styleObject, preferredLanguage);
}
return styleObject;
})
.catch(error => {
console.error('Error fetching style:', error);
});
}
const setPreferredLanguage = (style, language) => {
let nextStyle = { ...style };
nextStyle.layers = nextStyle.layers.map(l => {
if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l;
return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`);
});
return nextStyle;
};
const updateLayer = (layer, prevPropertyRegex, nextProperty) => {
const nextLayer = {
...layer,
layout: {
...layer.layout,
'text-field': recurseExpression(
layer.layout['text-field'],
prevPropertyRegex,
nextProperty
)
}
};
return nextLayer;
};
const recurseExpression = (exp, prevPropertyRegex, nextProperty) => {
if (!Array.isArray(exp)) return exp;
if (exp[0] !== 'coalesce') return exp.map(v =>
recurseExpression(v, prevPropertyRegex, nextProperty)
);
const first = exp[1];
const second = exp[2];
let isMatch =
Array.isArray(first) &&
first[0] === 'get' &&
!!first[1].match(prevPropertyRegex)?.[0];
isMatch = isMatch && Array.isArray(second) && second[0] === 'get';
isMatch = isMatch && !exp?.[4];
if (!isMatch) return exp.map(v =>
recurseExpression(v, prevPropertyRegex, nextProperty)
);
return [
'coalesce',
['get', nextProperty],
['get', 'name:en'],
['get', 'name']
];
};
```
------
## Set preferred language based on end user's browser language
In this example, you will set update style to show map labels in user's device language.
### Set preferred language based on browser language example
------
#### [ index.html ]
```
```
------
#### [ style.css ]
```
body { margin: 0; }
#map { height: 100vh; }
```
------
#### [ main.js ]
```
async function getStyleWithPreferredLanguage(preferredLanguage) {
const styleUrl = `https://maps.geo.${awsRegion}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${apiKey}`;
return fetch(styleUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(styleObject => {
if (preferredLanguage !== "en") {
styleObject = setPreferredLanguage(styleObject, preferredLanguage);
}
return styleObject;
})
.catch(error => {
console.error('Error fetching style:', error);
});
}
const setPreferredLanguage = (style, language) => {
let nextStyle = { ...style };
nextStyle.layers = nextStyle.layers.map(l => {
if (l.type !== 'symbol' || !l?.layout?.['text-field']) return l;
return updateLayer(l, /^name:([A-Za-z\-\_]+)$/g, `name:${language}`);
});
return nextStyle;
};
const updateLayer = (layer, prevPropertyRegex, nextProperty) => {
const nextLayer = {
...layer,
layout: {
...layer.layout,
'text-field': recurseExpression(
layer.layout['text-field'],
prevPropertyRegex,
nextProperty
)
}
};
return nextLayer;
};
const recurseExpression = (exp, prevPropertyRegex, nextProperty) => {
if (!Array.isArray(exp)) return exp;
if (exp[0] !== 'coalesce') return exp.map(v =>
recurseExpression(v, prevPropertyRegex, nextProperty)
);
const first = exp[1];
const second = exp[2];
let isMatch =
Array.isArray(first) &&
first[0] === 'get' &&
!!first[1].match(prevPropertyRegex)?.[0];
isMatch = isMatch && Array.isArray(second) && second[0] === 'get';
isMatch = isMatch && !exp?.[4];
if (!isMatch) return exp.map(v =>
recurseExpression(v, prevPropertyRegex, nextProperty)
);
return [
'coalesce',
['get', nextProperty],
['get', 'name:en'],
['get', 'name']
];
};
```
------
# How to set the political view of a map
Amazon Location Service enables you to set the political view to ensure your application complies with local laws. You can set a political view and compare maps from different political perspectives.
**Note**
For more information, see [Localization and internationalization](maps-localization-internationalization.md).
## Set political view and compare with international perspective
In this example, you will create and compare maps from two different political views: an international perspective and Turkey's view on Cyprus.
### Political view comparison example
------
#### [ index.html ]
```
Display a map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body { height: 100%; }
#internationalView, #turkeyView { height: 100%; width: 100%; }
.maps {
display: flex;
width: 100%;
height: 100%;
}
```
------
# How to filter POI on the map
Amazon Location Service allows you to select the POI (point-of-interest) categories relevant to your use case. Learn more about the standard map style, [Rich POI](https://docs.aws.amazon.com/location/latest/developerguide/standard-map-style.html#rich-poi)
## Filter POI
In this example, you display an interactive map that allows users to filter on POI categories.
------
#### [ Index.html ]
```
POI demo
```
------
#### [ style.css ]
```
body {
margin: 0;
padding: 0;
}
html,
body,
#map {
height: 100%;
}
#buttons {
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
top: 0;
min-width: 100px;
max-height: calc(100% - 2rem);
overflow: auto;
padding: 1rem;
background-color: white;
margin: 0;
}
.button {
display: inline-block;
cursor: pointer;
padding: 8px;
border-radius: 3px;
margin-top: 10px;
font-size: 12px;
text-align: center;
color: #fff;
background: #8a8a8a;
font-family: sans-serif;
font-weight: bold;
}
.button:first-child {
margin-top: 0;
}
.active {
background: #ee8a65;
}
```
------
# How to create topographic maps
Amazon Location Service allows you to create topographic maps using Terrain and Contour density features to visualize elevation changes and geographic characteristics.
## Show Hillshade
The Terrain feature allows you to visualize Hillshade, elevation changes and related geographic features.
### Hillshade example
------
#### [ index.html ]
```
Terrain Map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Show elevation with Contour Density lines
Amazon Location Service allows you to add Contour Density features to your map. This provides visualization of geographic steepness and elevation changes.
### Contour Density example
------
#### [ index.html ]
```
Contour Map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
## Show both Hillshade and Contour Density lines
With Amazon Location Service you to combine both Hillshade and Contour Density features on your map for comprehensive terrain visualization. This provides enhanced depth perception and a complete understanding of topographical variations and terrain characteristics.
### Hillshade with Contour Density example
------
#### [ index.html ]
```
Hillshade and Contour Map
```
------
#### [ style.css ]
```
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
```
------
# How to show real-time traffic on a map
Using Amazon Location Service you can add traffic features to your map. This provides real-time traffic data to show current traffic conditions such as current road congestion, construction, and incidents, helping you make routing choices.
## Make a map with real-time traffic
This example shows how to create a map with real-time traffic data.
### Real-time Traffic example
------
#### [ index.html ]
```
Traffic Map
```
------
#### [ style.css ]
```
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
```
------
# How to create a logistics map
The TravelModes feature lets you build logistic maps using Amazon Location Service. TravelModes displays relevant routing information for Truck navigation with related road restrictions. Use [Transit TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-show-transit-details-map.html) to show public transportation details.
## Create a map with Truck TravelMode
This example shows how to create a map with `Truck` `TravelMode` for logistic routing.
### Truck example
------
#### [ index.html ]
```
Truck Map
```
------
#### [ style.css ]
```
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
```
------
# How to show transit details on a map
Amazon Location Service lets you add transit features to maps. The `Transit` `TravelMode` displays routing information for public transit, such as color-coded train lines. Also check how to set [logistics TravelMode](https://docs.aws.amazon.com/location/latest/developerguide/how-to-create-logistic-map.html) for additional options.
## Create a map with transit details
This example shows how to create a map with transit details with Transit TravelMode for public transportation.
### Transit example
------
#### [ index.html ]
```
Transit Map
```
------
#### [ style.css ]
```
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
```
------
# How to create a 3D map
Amazon Location Service lets you add three-dimensional features to maps, such as `Terrain3D` to display elevation data as a three-dimensional surface, or `Buildings3D` to display urban structures with height and volume.
## Create a map with three-dimensional terrain details
This example shows how to create a map with `Terrain3D` parameter.
### Terrain3D example
------
#### [ index.html ]
```
3D Terrain
```
------
#### [ style.css ]
```
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
```
------
## Create a map with three-dimensional buildings details
This example shows how to create a map with `Buildings3D` parameter.
### Buildings3D example
------
#### [ index.html ]
```
3D Buildings
```
------
#### [ style.css ]
```
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
```
------
## Enable/disable Globe view
This example shows how to enable or disable the Globe view projection. By default, Globe view is enabled.
### Globe view example
------
#### [ index.html ]
```
Globe View
```
------
#### [ style.css ]
```
body {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100vh;
}
```
------