How can I add a custom HTML map marker to a Nokia HERE map?

Question

From what I'm reading of the documentation on Nokia maps I can add custom marker using a vector based drawing API: http://developer.nokia.com/Community/Wiki/HERE_Maps_API_-_How_to_create_custom_graphics_marker

You can create custom graphic markers but only based on a sprite: http://heremaps.github.io/examples/examples.html#sprite-markers

Or you can add their own markers: http://developer.nokia.com/Community/Wiki/HERE_Maps_API_-_How_to_add_map_markers

But is there any way to provide an HTML snippet to position on the map like a map marker? That is how other map libraries work so I can completely control the map marker in HTML/CSS. I already have map markers I would like to use that are styled in HTML/CSS and would not like to duplicate that styling in custom JS.

Answer 1

If you are intent on using styled, injected HTML, it would be possible to create a series of custom components (one for each marker) and attach them to the map. This would inject a block level element for each component which you could style as you see fit.

This is not entirely dissimilar to the simple GroundOverlay component I used to use before the ImgTileProvider class was exposed in the API - it injects a <IMG> element and resizes on zoomLevel (which you will probably need to remove) , but still effectively attaches a piece of HTML to a specific anchor point on the map.

For most simple applications I would usually use Markers (with or without my own iconography) or Infobubbles though. These lead to a more responsive and standard UI and don't clutter the map.

function extend(B, A) {
  function I() {}
  I.prototype = A.prototype;
  B.prototype = new I();
  B.prototype.constructor = B;
}

function GroundOverlay(url, boundingBox) {
  nokia.maps.map.component.Component.call(this);
  this.init(url, boundingBox);
}

extend(GroundOverlay,
    nokia.maps.map.component.Component);


GroundOverlay.prototype.init = function (url, boundingBox) {
  var that = this;
  that.overlayDiv  = document.createElement('div');
  that.overlayDiv.style.position = 'absolute';
  that.overlayDiv.style.cursor = 'default';
  that.overlayImage = document.createElement('img');
  that.overlayImage.id = 'groundoverlay';
  that.overlayDiv.appendChild(that.overlayImage);

  that.set('url', url);
  that.set('boundingBox', boundingBox);
  that.set('visible', true);
  that.set('opacity', 1);

  that.addOverlay = function () {
    var isVisible = that.get('visible'),
      bbox,
      topLeft,
      bottomRight;

    if (isVisible === false) {
      that.overlayDiv.style.display = 'none';
    } else {
      bbox = that.get('boundingBox');
      topLeft = that.map.geoToPixel(bbox.topLeft);
      bottomRight = that.map.geoToPixel(bbox.bottomRight);
      that.overlayDiv.style.display = 'block';
      that.overlayDiv.style.left = topLeft.x + 'px';
      that.overlayDiv.style.top = topLeft.y + 'px';
      that.overlayDiv.style.width = (bottomRight.x - topLeft.x) + 'px';
      that.overlayDiv.style.height = (bottomRight.y - topLeft.y) + 'px';
      that.overlayImage.src = that.get('url');
      that.overlayImage.style.width = (bottomRight.x - topLeft.x) + 'px';
      that.overlayImage.style.height = (bottomRight.y - topLeft.y) + 'px';
      that.overlayImage.style.opacity = that.get('opacity');
    }
  };

  that.addObserver('opacity', that.addOverlay);
  that.addObserver('visible', that.addOverlay);
  that.addObserver('url', that.addOverlay);
  that.addObserver('boundingBox', that.addOverlay);

  that.eventHandlers = {
    dragListener : function (evt) {
      var newGeo = that.map.pixelToGeo(
        that.map.width / 2 - evt.deltaX,
        that.map.height / 2 - evt.deltaY
      );
      that.map.set('center', newGeo);
      evt.stopPropagation();
    },
    dblClickListener :  function (evt) {
      evt.target = this.parentNode.parentNode;
      that.map.dispatch(evt);
    },
    mouseWheelListener :  function (evt) {
      evt.target = this.parentNode.parentNode;
      that.map.dispatch(evt);
    }
  };
};


GroundOverlay.prototype.attach = function (map) {
  this.map = map;
  var controls = map.getUIContainer().firstChild,
    child = controls.firstChild;
  controls.insertBefore(this.overlayDiv, child);

  map.addObserver('center', this.addOverlay);
  map.addObserver('zoomLevel', this.addOverlay);

  if (!this.evtTarget) {
    this.evtTarget =  nokia.maps.dom.EventTarget(
      document.getElementById('groundoverlay')
    ).enableDrag();
    this.evtTarget.addListener('drag', this.eventHandlers.dragListener);
    this.evtTarget.addListener('dblclick', this.eventHandlers.dblClickListener);
    this.evtTarget.addListener('mousewheel', this.eventHandlers.mouseWheelListener);
    this.addOverlay();
  }
};

GroundOverlay.prototype.detach = function (map) {
  this.map = null;
  map.removeObserver('center', this.addOverlay);
  map.removeObserver('zoomLevel', this.addOverlay);
  this.overlayDiv.parentNode.removeChild(this.overlayDiv);
};

GroundOverlay.prototype.getId = function () {
  return 'GroundOverlay';
};


GroundOverlay.prototype.getVersion = function () {
  return '1.0.0';
};