How to use style-change event of VectorTileLayer

[YukiOZAWA]

VectorTileLayer class has style-change event.

This event don't fire even if change a style of VectorTileLayer using setStyle methods.

I want to use style-change event.

var map = new Map();

//make map view and bind it to the map
var view = new MapView({
  container: "viewDiv",
  map: map,
  center: [-100.33, 25.69],
  zoom: 10
});

var tileLyr = new VectorTileLayer({
  url: "http://www.arcgis.com/sharing/rest/content/items/3b8814f6ddbd485cae67e8018992246e/resources/styles/r..."
});
map.add(tileLyr);

on(changeStyle, "click", function() {
  tileLyr.setStyle("http://www.arcgis.com/sharing/rest/content/items/103d0c867a9640e3a6d44224196de1fd/resources/styles/r...");
});

tileLyr.on("style-change", function(){
  console.log("style changed");
});

[Noah-Sager]

Hi Yuki,

I was also not able to get the "style-change" event to fire using the setStyle method. This might be an issue with Beta 2, but I will do some more research.

In the meantime, it is possible to use .then() after the setStyle, because setStyle returns a promise. See fiddle below.

http://jsfiddle.net/noahs42/2z7pzu9f​

[YukiOZAWA]

Hi Noah,

I was able to try your sample and use promise of setStyle.

Thanks so much.

[KristianEkenes]

Hi Yuki,

Yes, the 'style-change' event is not working in 4.0. We'll remove it from the documentation. You can use .then() as Noah suggested, or you can watch the style property on the layer like this:

tileLyr.watch("style", function(newStyle, formerStyle){
  console.log("style changed from ", formerStyle, " to ", newStyle);
});

Watching properties is discussed here: Working with properties | ArcGIS API for JavaScript