Customize marker with sprite image

[xcwxc]

Hi there,

I'd like to add a sprite image as a marker icon,but I didn't find the corresponding configuration item in JS API V3.x

Here is a code snippet for API V2 but not working on V3

---

var iconPackUrl = 'http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/img/sprites.png',

// create an icon from the icon pack url, specify the size (30px x 30px) and an offset
// in the image where icon is (35px from the left border, 35px from the top).
greyPlaneBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 30, 30, 35, 35),

// create a second icon from the same url, specify the size (28px x 27px) and another offset
// in the image where icon is (5px from the left border, 72px from the top).
greenPlaneBitmap = new nokia.maps.gfx.BitmapImage(iconPackUrl, null, 28, 27, 5, 72),

// Create marker no 1
plane1 = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.381667, 173.166944), {
  icon: greyPlaneBitmap
}),

// Create marker no 2
plane2 = new nokia.maps.map.Marker(new nokia.maps.geo.Coordinate(1.371667, 173.146944), {
  icon: greenPlaneBitmap
}),

container = new nokia.maps.map.Container();
container.objects.addAll([plane1, plane2]);
map.objects.add(container);
map.zoomTo(container.getBoundingBox());
map.set('baseMapType', map.SATELLITE);

[germanz]

Hi @xcwxc, unfortunately sprites are not supported in version 3.x. Also note that the code you mentioned uses unsupported legacy API (v2). Main concepts like map, layers, markers remained in v 3.x as well, however there are quite some interface differences. Here are some examples to get you started: https://developer.here.com/documentation/examples/maps-js

Below is an example of code with a basic functionality of cropping the existing sprite. You might need to use an image of a better quality and individual icons to avoid a runtime cropping.

const iconPackUrl = 'http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/advanced-examples/img/sprites.png';

function crop(url, w, h, x, y) {
  const img = new Image();
  img.src = iconPackUrl;
  img.crossOrigin = "Anonymous";

  const canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;

  return new Promise((resolve, reject) => {

    img.addEventListener("load", () => {
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, x, y, w, h, 0, 0, w, h);
      resolve(canvas);
    });
  })
}

Promise.all([
  crop(iconPackUrl, 30, 30, 35, 35),
  crop(iconPackUrl, 28, 27, 5, 72)
]).then(([img1, img2]) => {
  const greyPlaneIcon = new H.map.Icon(img1);
  const greenPlaneBitmap = new H.map.Icon(img2);

  // Create marker no 1
  const plane1 = new H.map.Marker({
    lat: 1.381667,
    lng: 173.166944
  }, {
    icon: greyPlaneIcon
  });

  // Create marker no 2
  const plane2 = new H.map.Marker({
    lat: 1.371667,
    lng: 173.146944
  }, {
    icon: greenPlaneBitmap
  });

  const group = new H.map.Group({
    objects: [plane1, plane2]
  });
  map.addObject(group);
  map.getViewModel().setLookAtData({
    bounds: group.getBoundingBox()
  });

  const maptypes = new H.service.Platform({
    apikey: 'bGKdgWos4SIQlvctc8qub_sl7Qq9Scz5w5JMAeTlRzw'
  }).createDefaultLayers();
  map.setBaseLayer(maptypes.raster.satellite.map);
})

[xcwxc]

@germanz thanks a lot!