| title | description | author | ms.author | ms.date | ms.topic | ms.service | services | manager | ms.custom |
|---|---|---|---|---|---|---|---|---|---|
Handle mouse events with Azure Maps | Microsoft Docs |
How to make an interactive Javascript map with map events |
jingjing-z |
jinzh |
11/29/2018 |
conceptual |
azure-maps |
azure-maps |
codepen |
This article shows you how to use map class events property to highlight events on the map and on different layers of the map. It also shows you how to use the map class events property to highlight events when you interact with an HTML marker.
<iframe height='600' scrolling='no' title='Interacting with the map – mouse events' src='//codepen.io/azuremaps/embed/bLZEWd/?height=600&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Interact with the map – mouse events by Azure Maps (@azuremaps) on CodePen. </iframe>Play with the map above, and see the corresponding mouse events highlighted on the right. You can click on the JS tab to view and edit the JavaScript code. You can also click on the Edit on CodePen button and edit the code on CodePen.
<iframe height='600' scrolling='no' title='Interacting with the map – Layer Events' src='//codepen.io/azuremaps/embed/bQRRPE/?height=600&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Interacting with the map – Layer Events by Azure Maps (@azuremaps) on CodePen. </iframe>The code above highlights the name of the events that get fired up as you interact with the Symbol Layer. The Symbol, Bubble, Line, and Polygon layer all support the same set of events. The Tile Layer does not support any of these events.
<iframe height='500' scrolling='no' title='Interacting with the map - HTML Marker events' src='//codepen.io/azuremaps/embed/VVzKJY/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen Interacting with the map - HTML Marker events by Azure Maps (@azuremaps) on CodePen. </iframe>The code above adds Javascript map events to an HTML marker. It also highlights the name of the events that get fired up as you interact with the HTML marker.
Learn more about the classes and methods used in this article:
[!div class="nextstepaction"] Map
See the following articles for full code examples:
[!div class="nextstepaction"] Show search results
[!div class="nextstepaction"] Code sample page