Search code examples
javascriptcssmapshere-api

HERE map controls design

I'm using HERE maps API for javascript, but I want to change the design of the map controls like this:

I attached an example

HERE EXAMPLE

Is it even possible?

Solution

  • Absolutely Yes, I'm not sure what library and platform you are using, but here are some options:

    1. If you are using the "HERE Maps API for Javascript", please refer to https://developer.here.com/documentation/maps/3.1.24.0/dev_guide/topics/map-controls-ui.html, and searching the keywords "Managing the Position of UI Controls", the demo codes like below:

    var mapSettings = ui.getControl('mapsettings');
var zoom = ui.getControl('zoom');
var scalebar = ui.getControl('scalebar');

mapSettings.setAlignment('top-left');
zoom.setAlignment('top-left');
scalebar.setAlignment('top-left');

    If you are developing with its mobile SDKs (https://developer.here.com/products/here-sdk), it has the document of the SDK, which has a similar description as above, please check it out.

    1. Any other open source libraries, such as OpenLayers, Leaflets etc. the best way is modifying its CSS file to get the position what you want.