Pushpin Class
Note
Bing Maps Web Control SDK retirement
Bing Maps Web Control SDK is deprecated and will be retired. Free (Basic) account customers can continue to use Bing Maps Web Control SDK until June 30th, 2025. Enterprise account customers can continue to use Bing Maps Web Control SDK until June 30th, 2028. To avoid service disruptions, all implementations using Bing Maps Web Control SDK will need to be updated to use Azure Maps Web SDK by the retirement date that applies to your Bing Maps for Enterprise account type. For detailed migration guidance, see Migrate from Bing Maps Web Control SDK and Migrate Bing Maps Enterprise applications to Azure Maps with GitHub Copilot.
Azure Maps is Microsoft's next-generation maps and geospatial services for developers. Azure Maps has many of the same features as Bing Maps for Enterprise, and more. To get started with Azure Maps, create a free Azure subscription and an Azure Maps account. For more information about azure Maps, see Azure Maps Documentation. For migration guidance, see Bing Maps Migration Overview.
Pushpins, sometimes also referred to as markers or MapIcons on other mapping platforms, are one of the primary ways of marking a location on a map. The Pushpin class derives from the IPrimitive interface.
Note: When an array of pushpins are added to the map or a layer, the first pushpin is rendered last. The idea being that if the array contained search results, the first/most relevant result would be rendered on top rather than being covered by other nearby pushpins. This is a fundamental change made to improve the user experience from how previous versions of Bing Maps rendered pushpins.
Constructor
Pushpin(location: Location, options?: PushpinOptions)
Methods
The Pushpin class has the following methods.
| Name | Return Type | Description |
|---|---|---|
getAnchor() |
Point | Returns the point on the pushpin icon which is anchored to the pushpin location. An anchor of (0,0) is the top left corner of the icon. |
getClickedStyleEnabled() |
boolean | Returns whether the pushpin clicked style is enabled. |
getColor() |
string or Color | Returns the color option of the pushpin. |
getCursor() |
string | Gets the css cursor value when the pushpin has mouse events on it. |
getDraggable() |
boolean | Returns a boolean indicating if the pushpin is draggable or not. |
getHoverStyleEnabled() |
boolean | Returns whether the default pushpin hover style is enabled. |
getIcon() |
string | Returns the pushpin icon path. |
getLocation() |
Location | Returns the location of the pushpin. |
getRoundClickableArea() |
boolean | Returns whether the clickable area of the pushpin is an ellipse. |
getText() |
string | Returns the text associated with the pushpin. |
getTextOffset() |
Point | Returns the amount the text is shifted from the pushpin icon. |
getTitle() |
string | Returns the title label of the Pushpin. |
getSubTitle() |
string | Returns the subtitle label of the Pushpin. |
getVisible() |
boolean | Returns a boolean indicating whether the pushpin is visible or not. A value of false indicates that the pushpin is hidden, although it is still an entity on the map. |
| setLocation(loc: Location) | Sets the location of the pushpin. | |
| setOptions(opt: PushpinOptions) | Sets options for the pushpin. |
Properties
| Name | Type | Description |
|---|---|---|
metadata |
object | Information that is linked to the pushpin. Some modules such as the GeoJSON, and Spatial Data Service modules will also often add information to this property. |
Events
| Name | Arguments | Description |
|---|---|---|
changed |
IPrimitiveChangedEventArgs | Occurs when the location or options of the pushpin has changed. |
click |
MouseEventArgs | Occurs when the mouse is used to click the pushpin. |
dblclick |
MouseEventArgs | Occurs when the mouse is used to double click the pushpin. |
drag |
MouseEventArgs | Occurs when the pushpin is being dragged. |
dragend |
MouseEventArgs | Occurs when the pushpin stops being dragged. |
dragstart |
MouseEventArgs | Occurs when the pushpin starts being dragged. |
mousedown |
MouseEventArgs | Occurs when the left mouse button is pressed when the mouse is over the pushpin. |
mouseout |
MouseEventArgs | Occurs when the mouse cursor moves out of the area covered by the pushpin. |
mouseover |
MouseEventArgs | Occurs when the mouse is over the pushpin. |
mouseup |
MouseEventArgs | Occurs when the left mouse button is lifted up when the mouse is over the pushpin. |
Examples
- Default Pushpin with Text
- Changing the color of the default Pushpin
- Custom Image Pushpin
- Custom SVG File Pushpin
- Custom Inline SVG Pushpin
- Dynamically create SVG Pushpin
- Custom Base64 Image Pushpin
- Custom Canvas Pushpin
- Font based Pushpins
- HTML Pushpin Overlay
- Image and Canvas Pushpin
- Pushpin Events
- Pushpin Hover Style
- Anchoring Pushpins