1

I am trying to change the default Marker Icon with a .png image on my local system MacOs
The .png image file is located in the same directory as the HTML code

I tried adding the variable reference like this -

var icon = new H.map.Icon('file:///customIcon.png');

I'm getting CORS error -

Access to image at 'file:///customIcon.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

Following is my code -

<!DOCTYPE html>
<html>
<head>
  <title>HERE Maps Multiple Markers Example</title>
  <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
  <style>
    #map {
      height: 500px;
      width: 100%;
    }

    #panel {
        width: 100%;
        height: 400px;
    }
  </style>
</head>
<body>

  <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>

  <div id="map"></div>

  <script>
    
    function initMap() {
      
      function addClickableMarkers(map) {
        var mapMarkers = [];

        var group = new H.map.Group();

        map.addObject(group);

        group.addEventListener('tap', function (evt) {
          var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
            content: evt.target.getData()
          });
          
          ui.addBubble(bubble);
        }, false);


        var icon = new H.map.Icon('file:///customIcon.png');
        var marker = new H.map.Marker({lat: 53.439, lng: -2.221}
        ,{
          // icon: new H.map.Icon("https://cdn0.iconfinder.com/data/icons/daily-boxes/150/phone-box-32.png")
          icon: icon
        });
        marker.setData('<div><a href="https://www.mcfc.co.uk">Manchester City</a></div><div>City of Manchester Stadium<br />Capacity: 55,097</div>');
        group.addObject(marker);
        mapMarkers.push(marker);

        var marker = new H.map.Marker({lat: 53.430, lng: -2.961});
        marker.setData('<div><a href="https://www.liverpoolfc.tv">Liverpool</a></div><div>Anfield<br />Capacity: 54,074</div>');
        group.addObject(marker);
        mapMarkers.push(marker);

        return {
          mapGroup: group,
          mapMarkers: mapMarkers
        }

      }

      var platform = new H.service.Platform({
        apikey: "HERE_MAPS_API_KEY"
      });
      
      var defaultLayers = platform.createDefaultLayers();

        
      var map = new H.Map(document.getElementById('map'),
        defaultLayers.vector.normal.map, {
        center: {lat: 53.430, lng: -2.961},
        zoom: 7,
        pixelRatio: window.devicePixelRatio || 1
      });

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

      var ui = H.ui.UI.createDefault(map, defaultLayers);

      const groupAndMarkers = addClickableMarkers(map);

    }

    window.addEventListener('load', initMap);
  </script>
</body>
</html>

Some references -
https://developer.here.com/documentation/examples/maps-js/infobubbles/open-infobubble

How to add custom markers icons in Here Maps API 3.0

Dev1ce
  • 5,390
  • 17
  • 90
  • 150

1 Answers1

0

The simplest way to fix the CORS error is to feed the file via a local server to the application. You can just start the server ( if using visual studio there's a direct button at the bottom ) and then the CORS error will be gone.

Pawan Shukla
  • 27
  • 4