---
page_type: sample
description: A module for the Azure Maps Web SDK that allows swiping between two overlapping maps, ideal for comparing two overlapping data sets.
languages:
- javascript
- typescript
products:
- azure
- azure-maps
---
# Azure Maps Swipe Map module
A module for the Azure Maps Web SDK that allows swiping between two overlapping maps, ideal for comparing two overlapping data sets.
**Samples**
[Swipe between two maps](https://samples.azuremaps.com/?sample=swipe-between-two-maps)
[](https://samples.azuremaps.com/?sample=swipe-between-two-maps)
[Swipe map with fullscreen support](https://samples.azuremaps.com/?sample=swipe-map-with-fullscreen-support)
[](https://samples.azuremaps.com/?sample=swipe-map-with-fullscreen-support)
[Swipe map module options](https://samples.azuremaps.com/?sample=swipe-map-module-options)
[](https://samples.azuremaps.com/?sample=swipe-map-module-options)
## Getting started
Download the project and copy the `azure-maps-swipe-map` JavaScript file from the `dist` folder into your project.
**Usage**
```html
```
## API Reference
### SwipeMap class
Namespace: `atlas`
A control that allows swiping between two overlapping maps, ideal for comparing two overlapping data sets.
**Contstructor**
> `SwipeMap(primaryMap: atlas.Map, secondaryMap: atlas.Map, options?: SwipeMapOptions)`
**Methods**
| Name | Return type | Description |
|------|-------------|-------------|
| `dispose()` | | Doisposes the control. |
| `getOptions()` | `SwipeMapOption` | Gets the options of the control. |
| `setOptions(options: SwipeMapOption)` | | Sets the options of the control. |
**Events**
| Name | Return type | Description |
|------|-------------|-------------|
| `positionChanged` | `number` | Event fired when the slider position has changed. returns the slider position value in pixels. This event can be attached to either map. |
### SwipeMapOption interface
Options for the `SwipeMap` class.
**Properties**
| Name | Type | Description |
|------|------|-------------|
| `interactive` | `boolean` | Specifies if the slider can be moved using mouse, touch or keyboard. Default: `true` |
| `orientation` | `'vertical'` \| `'horizontal'` | The orientation of the swipe map control. Can be `vertical` or `horizontal`. Default: `vertical` |
| `sliderPosition` | `number` | The position of the slider in pixels relative to the left or top edge of the viewport, depending on orientation. Defaults to half the width or height depending on orientation. |
| `style` | `'light` \| `'dark'` \| `string` | The style of the control. Can be; `light`, `dark`, `auto`, or any CSS3 color. Overridden if device is in high contrast mode. Default `light`. |
## Related Projects
* [Azure Maps Web SDK Open modules](https://github.com/microsoft/Maps/blob/master/AzureMaps.md#open-web-sdk-modules) - A collection of open source modules that extend the Azure Maps Web SDK.
* [Azure Maps Web SDK Samples](https://github.com/Azure-Samples/AzureMapsCodeSamples)
* [Azure Maps Gov Cloud Web SDK Samples](https://github.com/Azure-Samples/AzureMapsGovCloudCodeSamples)
* [Azure Maps & Azure Active Directory Samples](https://github.com/Azure-Samples/Azure-Maps-AzureAD-Samples)
* [List of open-source Azure Maps projects](https://github.com/microsoft/Maps/blob/master/AzureMaps.md)
## Additional Resources
* [Azure Maps (main site)](https://azure.com/maps)
* [Azure Maps Documentation](https://docs.microsoft.com/azure/azure-maps/index)
* [Azure Maps Blog](https://azure.microsoft.com/blog/topics/azure-maps/)
* [Microsoft Q&A](https://docs.microsoft.com/answers/topics/azure-maps.html)
* [Azure Maps feedback](https://feedback.azure.com/forums/909172-azure-maps)
## Contributing
We welcome contributions. Feel free to submit code samples, file issues and pull requests on the repo and we'll address them as we can.
Learn more about how you can help on our [Contribution Rules & Guidelines](https://github.com/Azure-Samples/azure-maps-swipe-map/blob/master/CONTRIBUTING.md).
You can reach out to us anytime with questions and suggestions using our communities below:
* [Microsoft Q&A](https://docs.microsoft.com/answers/topics/azure-maps.html)
* [Azure Maps feedback](https://feedback.azure.com/forums/909172-azure-maps)
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
## License
MIT
See [License](https://github.com/Azure-Samples/azure-maps-swipe-map/blob/master/LICENSE.md) for full license text.
](https://samples.azuremaps.com/?sample=swipe-between-two-maps)
[Swipe map with fullscreen support](https://samples.azuremaps.com/?sample=swipe-map-with-fullscreen-support)
](https://samples.azuremaps.com/?sample=swipe-map-with-fullscreen-support)
[Swipe map module options](https://samples.azuremaps.com/?sample=swipe-map-module-options)
](https://samples.azuremaps.com/?sample=swipe-map-module-options)
## Getting started
Download the project and copy the `azure-maps-swipe-map` JavaScript file from the `dist` folder into your project.
**Usage**
```html