Login/Register
How to add custom markers icons in Here Maps API 3.0
Asked Answered
Solved javascriptmapshere-api
B

2

5

I want to use custom markers using Here Maps with JavaScript, but I tried the documentation and unfortunately I don't understand how to set a custom marker with a custom icon.

In this sample bellow I set a position and marker, but I can't figure out how to set my custom marker with .png or .svg icons and set as the default marker.

Link to the docs of Here Maps

function addMarkersToMap(map) {
  var parisMarker = new H.map.Marker({
    lat: 48.8567,
    lng: 2.3508
  });
  map.addObject(parisMarker);

  var romeMarker = new H.map.Marker({
    lat: 41.9,
    lng: 12.5
  });
  map.addObject(romeMarker);

  var berlinMarker = new H.map.Marker({
    lat: 52.5166,
    lng: 13.3833
  });
  map.addObject(berlinMarker);

  var madridMarker = new H.map.Marker({
    lat: 40.4,
    lng: -3.6833
  });
  map.addObject(madridMarker);

  var londonMarker = new H.map.Marker({
    lat: 51.5008,
    lng: -0.1224
  });
  map.addObject(londonMarker);
}

// Initialize the platform object:
const platform = new H.service.Platform({
  app_id: 'XXXXXXXXXXXXXX',
  app_code: 'XXXXXXXXXXX',
  useCIT: true,
  useHTTPS: true,
});

const maptypes = platform.createDefaultLayers();

// Instantiate (and display) a map object:
this.map = new H.Map(
  this.$el.querySelector('#mapContainer'),
  maptypes.normal.map, {
    zoom: 4,
    center: {
      lat: 50,
      lng: 5
    },
  },
);

var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

// Create the default UI components
var ui = H.ui.UI.createDefault(this.map, maptypes, 'pt-BR');

// Now use the map as required...
addMarkersToMap(this.map);

Thanks.

Bartle answered 14/7, 2018 at 16:30 Comment(0)
R
17

To specify a custom image as a marker icon, create an H.map.Icon instance with your image (and custom options, when needed):

// using a PNG icon with its natural size (which is 32x32 in this case)
var pngIcon = new H.map.Icon("https://cdn0.iconfinder.com/data/icons/daily-boxes/150/phone-box-32.png");      

// optionally - resize a larger PNG image to a specific size
var pngIcon = new H.map.Icon("https://cdn3.iconfinder.com/data/icons/tourism/eiffel200.png", {size: {w: 56, h: 56}});

// optionally - resize a larger SVG image to a specific size
var svgIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/190/190488.svg", {size: {w: 32, h: 32}});

Then, when creating the specific marker (H.map.Marker), set the icon option to the custom icon:

var marker = new H.map.Marker({
    lat: 48.8567,
    lng: 2.3508
  }, {
    icon: customIcon
  }
);

Alternatively you can use an H.mapDomIcon, when you use markers (H.map.DomMarker) with HTML/SVG content.

Example with different PNG and SVG marker icons

#mapContainer {
  width: 100%;
  height: 400px;
  background: grey;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1526040296" />
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>

<body>
  <div id="mapContainer"></div>
  <script>
    function addMarkersToMap(map) {
      // icons
      // resize a larger PNG image to a specific size
      var parisPngIcon = new H.map.Icon("https://cdn3.iconfinder.com/data/icons/tourism/eiffel200.png", {size: {w: 56, h: 56}});
      
      // resize a larger SVG image to a specific size
      var romeSvgIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/190/190488.svg", {size: {w: 32, h: 32}});
      
      // resize another larger SVG image to a specific size
      var berlinSvgIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/762/762831.svg", {size: {w: 24, h: 24}});
      
      // resize another larger SVG image to a specific size
      var madridSvgIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/738/738671.svg", {size: {w: 32, h: 32}});
            
      // using the PNG icons natural size (which is 32x32 in this case)
      var londonPngIcon = new H.map.Icon("https://cdn0.iconfinder.com/data/icons/daily-boxes/150/phone-box-32.png");
      
      // markers
      var parisMarker = new H.map.Marker({
        lat: 48.8567,
        lng: 2.3508
      }, {icon: parisPngIcon});
      map.addObject(parisMarker);

      var romeMarker = new H.map.Marker({
        lat: 41.9,
        lng: 12.5
      }, {icon: romeSvgIcon});
      map.addObject(romeMarker);

      var berlinMarker = new H.map.Marker({
        lat: 52.5166,
        lng: 13.3833
      }, {icon: berlinSvgIcon});
      map.addObject(berlinMarker);

      var madridMarker = new H.map.Marker({
        lat: 40.4,
        lng: -3.6833
      }, {icon: madridSvgIcon});
      map.addObject(madridMarker);

      var londonMarker = new H.map.Marker({
        lat: 51.5008,
        lng: -0.1224
      }, {icon: londonPngIcon});
      map.addObject(londonMarker);
    }

    // Initialize the platform object:
    const platform = new H.service.Platform({
      app_id: 'DemoAppId01082013GAL',
      app_code: 'AJKnXv84fjrb0KIHawS0Tg',
      useCIT: true,
      useHTTPS: true
    });

    const maptypes = platform.createDefaultLayers();

    // Instantiate (and display) a map object:
    this.map = new H.Map(
      document.querySelector('#mapContainer'),
      maptypes.normal.map, {
        zoom: 4,
        center: {
          lat: 50,
          lng: 5
        },
      },
    );

    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

    // Create the default UI components
    var ui = H.ui.UI.createDefault(this.map, maptypes, 'pt-BR');

    // Now use the map as required...
    addMarkersToMap(this.map);
  </script>
</body>
</html>

Example with a default marker icon as PNG or SVG

#mapContainer {
  width: 100%;
  height: 400px;
  background: grey;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1526040296" />
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-ui.js"></script>
  <script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
</head>

<body>
  <div id="mapContainer"></div>
  <script>
    function addMarkersToMap(map) {
      // default icon (PNG or SVG can be used also)
      var defaultIcon = new H.map.Icon("https://image.flaticon.com/icons/svg/252/252025.svg", {size: {w: 32, h: 32}});
            
      // markers
      var parisMarker = new H.map.Marker({
        lat: 48.8567,
        lng: 2.3508
      }, {icon: defaultIcon});
      map.addObject(parisMarker);

      var romeMarker = new H.map.Marker({
        lat: 41.9,
        lng: 12.5
      }, {icon: defaultIcon});
      map.addObject(romeMarker);

      var berlinMarker = new H.map.Marker({
        lat: 52.5166,
        lng: 13.3833
      }, {icon: defaultIcon});
      map.addObject(berlinMarker);

      var madridMarker = new H.map.Marker({
        lat: 40.4,
        lng: -3.6833
      }, {icon: defaultIcon});
      map.addObject(madridMarker);

      var londonMarker = new H.map.Marker({
        lat: 51.5008,
        lng: -0.1224
      }, {icon: defaultIcon});
      map.addObject(londonMarker);
    }

    // Initialize the platform object:
    const platform = new H.service.Platform({
      app_id: 'DemoAppId01082013GAL',
      app_code: 'AJKnXv84fjrb0KIHawS0Tg',
      useCIT: true,
      useHTTPS: true
    });

    const maptypes = platform.createDefaultLayers();

    // Instantiate (and display) a map object:
    this.map = new H.Map(
      document.querySelector('#mapContainer'),
      maptypes.normal.map, {
        zoom: 4,
        center: {
          lat: 50,
          lng: 5
        },
      },
    );

    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));

    // Create the default UI components
    var ui = H.ui.UI.createDefault(this.map, maptypes, 'pt-BR');

    // Now use the map as required...
    addMarkersToMap(this.map);
  </script>
</body>
</html>

As far as I know, there is no such functionality to just set a default marker icon for the map (e.g. map.setDefaultMarkerIcon(...)). Either you just create a custom icon, which you can use, when instantiating a marker:

var icon = new H.map.Icon("...");
var marker = new H.map.Marker({lat: 48.8567, lng: 2.3508}, {icon: icon});

Or encapsulate the marker creation into a function and create the markers via:

var defaultIcon = new H.map.Icon("...");  

function createMarker(lat, lng) {
  return new H.map.Marker({lat: lat, lng: lng}, {icon: defaultIcon});
}

var marker = createMarker(48.8564, 2.3564);

More information about customizing markers and their icons

Also your sample code had some remainder code that can cause an error, when unnoticed:

this.$el.querySelector('#mapContainer')

so In order to provide a working example, I just used a simpler solution to select the <div> element, which will be used as the map container:

document.querySelector('#mapContainer')

Marker Icon PNG/SVG Credits:

Reproachless answered 15/7, 2018 at 14:27 Comment(0)
W
1

In case you are getting coordinates from database.

<script>
var contractors = <?php echo json_encode($contractors); ?>;
var contractorIcon = new H.map.Icon("https://img.icons8.com/color/64/000000/worker-male.png", {size: {w: 36, h: 36}});
for (let con = 0; con < contractors.length; con++) { 
        var parisMarker = new H.map.Marker(
                 {lat:coordinates[i], lng: coordinates[i+1]}, 
                 {icon: contractorIcon}
);
</script>

enter image description here

Witenagemot answered 24/11, 2020 at 8:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.