Display points of interest on the map

  • Article

Note

Bing Maps SDK for Android and iOS retirement

Bing Maps SDK for Android and iOS is deprecated and will be retired. Free (Basic) account customers can continue to use Bing Maps SDK for Android and iOS until June 30th, 2025. Enterprise account customers can continue to use Bing Maps SDK for Android and iOS until June 30th, 2028. To avoid service disruptions, all implementations using Bing Maps SDK for Android and iOS 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.

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.

Use MapIcon to add a graphical image and text at a location within the map.

To get your pushpin to look pixel-perfect, you'll also want to review how to anchor your MapIcons to make them align with the chosen location on a map.

Examples

Add a default pushpin to the map

Java

MapIcon icon = new MapIcon();
icon.setLocation(new Geopoint(0, 0, 0, AltitudeReferenceSystem.SURFACE));
MapElementLayer elementLayer = new MapElementLayer();
elementLayer.getElements().add(icon);
mMap.getLayers().add(elementLayer);

Swift

let icon = MSMapIcon()
icon.location = MSGeopoint(
    latitude: 0,
    longitude: 0,
    altitude: 0,
    altitudeReferenceSystem: .surface)
let elementLayer = MSMapElementLayer()
elementLayer.elements.add(icon)
mMap.layers.add(elementLayer)

Objective-C

MSMapIcon *icon = [MSMapIcon icon];
icon.location = [MSGeopoint geopointWithLatitude:0
                                       longitude:0
                                        altitude:0
                         altitudeReferenceSystem:MSMapAltitudeReferenceSystemSurface];
MSMapElementLayer* elementLayer = [MSMapElementLayer layer]
[elementLayer.elements addMapElement:icon];
[mMap.layers addMapLayer:elementLayer]

Default icon

Set a pushpin image

The following example shows how to assign a custom image loaded from resource, and center the image on the location.

Java

icon.setImage(new MapImage(BitmapFactory.decodeResource(getResources(), imageIndex)));
icon.setNormalizedAnchorPoint(new PointF(0.5f, 1.0f));  // Center against the bottom of the image

Swift

icon.image = MSMapImage(uiImage:UIImage(named: "pushpin")!)
icon.normalizedAnchorPoint = CGPoint(x:0.5, y:1.0)

Objective-C

icon.image = [MSMapImage imageWithUIImage:[UIImage imageNamed:@"pushpin"]];
icon.normalizedAnchorPoint = CGPointMake(0.5f, 1.0f);  // Center against the bottom of the image

Add a pushpin with SVG image

You can also use an SVG image to create a MapImage to specify the custom image.

Swift

func addSvgIconAtMapCenter() {
    let mapIcon = MSMapIcon()
    mapIcon.location = MSGeopoint(latitude: mapView.mapCenter.position.latitude, longitude: mapView.mapCenter.position.longitude)
    let svgString = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"50\" height=\"50\"><circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"orange\" stroke-width=\"4\" fill=\"yellow\" /></svg>"
    let svgData = svgString.data(using: .utf8)
    mapIcon.image = MSMapImage(svgImage: svgData!)
    let mapIconLayer = MSMapElementLayer()
    mapView.layers.add(mapIconLayer)
    mapIconLayer.elements.add(mapIcon)
}

SVG Icon

See also: