Custom image for markerFile - Dont understand how it works

[Sunny-Sol]

maptalks's version and what browser you use?

chrome

Issue description

im trying to use a custom image for the markerFile, i have tried both local path and http path
It doesnt show up

Please provide a reproduction URL (on any jsfiddle like site)

https://masterarms.tech/liberation/

[fuzhenn]

Confirmed it's a bug which is caused by orders of resources loading.

If you need a quick fix, you can have a try:

• move the outlined Marker and Circle into the VectorLayer's geometries array (after THEATRE), as the images shown below:

[Sunny-Sol]

Hi, i tried and still cant make sense of it...
Please see these two examples, one with an image file linked from maptalks and one from my own web-adress

Image Not working

var arcUrl = 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer';
      maptalks.SpatialReference.loadArcgis(arcUrl + '?f=pjson', function (err, conf) {
        if (err) {
          throw new Error(err);
        }
        var ref = conf.spatialReference;
        ref.projection = 'EPSG:3857';
        ref.fullExtent = null;
        var map = new maptalks.Map('map', {
          center: [33.510414,34.278336],
          zoom: 6.5,
          pitch : 11,
          rotate: -5,
          minZoom: 1,
          maxZoom : 16,
          spatialReference : ref,
          baseLayer: new maptalks.TileLayer('base', {
            'tileSystem' : conf.tileSystem,
            'tileSize' : conf.tileSize,
            'urlTemplate' : arcUrl + '/tile/{z}/{y}/{x}',
            'attribution' : '&copy; <a target="_blank" href="' + arcUrl + '"">ArcGIS</a>',
            cssFilter : 'sepia(15%) invert(5%)',
            
            
          }),
          
        });
        
      var center = map.getCenter();

      var layer = new maptalks.VectorLayer('vector').addTo(map);

      var marker1 = new maptalks.Marker(
        center.sub(0.009, 0),
        {
          'symbol' : {
            'markerFile'   : 'https://masterarms.tech/liberation/IMAGES/MARKERS/image026.png',
            'markerWidth'  : 28,
            'markerHeight' : 40,
            'markerDx'     : 0,
            'markerDy'     : 0,
            'markerOpacity': 1
          }
        }
      ).addTo(layer);})

---

Image Is working

var arcUrl = 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer';
      maptalks.SpatialReference.loadArcgis(arcUrl + '?f=pjson', function (err, conf) {
        if (err) {
          throw new Error(err);
        }
        var ref = conf.spatialReference;
        ref.projection = 'EPSG:3857';
        ref.fullExtent = null;
        var map = new maptalks.Map('map', {
          center: [33.510414,34.278336],
          zoom: 6.5,
          pitch : 11,
          rotate: -5,
          minZoom: 1,
          maxZoom : 16,
          spatialReference : ref,
          baseLayer: new maptalks.TileLayer('base', {
            'tileSystem' : conf.tileSystem,
            'tileSize' : conf.tileSize,
            'urlTemplate' : arcUrl + '/tile/{z}/{y}/{x}',
            'attribution' : '&copy; <a target="_blank" href="' + arcUrl + '"">ArcGIS</a>',
            cssFilter : 'sepia(15%) invert(5%)',
            
            
          }),
          
        });
        
      var center = map.getCenter();

      var layer = new maptalks.VectorLayer('vector').addTo(map);

      var marker1 = new maptalks.Marker(
        center.sub(0.009, 0),
        {
          'symbol' : {
            'markerFile'   : 'https://raw.githubusercontent.com/maptalks/examples/master/src/style/line-marker/plane.png',
            'markerWidth'  : 28,
            'markerHeight' : 40,
            'markerDx'     : 0,
            'markerDy'     : 0,
            'markerOpacity': 1
          }
        }
      ).addTo(layer);})

[Sunny-Sol]

[fuzhenn]

Thanks for reporting.

This is caused by 2 reasons:

• image026.png is blocked by server's CORS, but plane.png is not.
• we changed to fetch image in worker in previous version for performance but it strictly requires CORS permits.

We are changing back to load image by Image object, and it should resolve this bug.

[Sunny-Sol]

Thanks alot for your quick replies!
So if i understand you correctly, there is a new build somewhere where the CORS issue does not affect your local images?
If so, can you please link it? Or instruct where in the code i can change it?

edit
Got it to work with the plugin "Live Server" for VB code and your latest code for maptalks
Have not tested it online yet