smcgeeesriuk-esridist

How to fix a Marker Symbol to the map (JS API 4.x)

Blog Post created by smcgeeesriuk-esridist Employee on Feb 9, 2018

Q: Can I fix my marker symbols so they don't scale when I zoom in and out? (in the ArcGIS API for JavaScript 4.x). 

Quick answer is no... Not out of the box yet

 

But, there's a rather quick and easy workaround you can implement.

 

Here's an example of the workaround

Left image = normal behavior/fixed to screen. Right image = workaround/fixed to map

Example gif

Click here for sample.

 

I've been asked about it a few times. So I decided to write a short snippet and example.

 

How do we define what "fixed" is? 

 

The solution I found was to have the maximum zoom level constraint linked to the marker symbol's pixels. So if the maximum zoom level is constrained to "23", then define the height and width for your marker symbol at that level.

 

For my sample code above, I exaggerated it quite a bit and went for max zoom level of 24 and image height/width 40,000 pixels.

 

24 : 40,000 px

var maxZoom = 24 
var baseImageHeight= 40000 //px
var baseImageWidth = 40000 //px

/*normal map code and marker symbol added here with "pointGraphic" graphics layer*/

view.then(function(){

   watchUtils.when(view, "scale", rescaleMarker);
})

function rescaleMarker(){

   pointGraphic.symbol.width = baseImageWidth* 1/(Math.pow(2,(Math.abs(maxZoom - view.zoom))))
   pointGraphic.symbol.height = baseImageHeight* 1/(Math.pow(2,(Math.abs(maxZoom - view.zoom))))

}

 

This basically overrides the default symbol height and width. This then fixes it to the map! This can be done for feature layers as well, with a little tweaking.

 

 

This is also a feature request I've submitted as a result of having the question a few times. 

Outcomes