topic Re: Adding Custom Style to Vector Tiles in ArcGIS Online Questions

Adding Custom Style to Vector Tiles

mpboyle — Wed, 19 Apr 2017 21:45:35 GMT

I created a hosted vector tile layer and would like to create a custom style. I have read through the docs on how to create a custom style (save a layer, edit the style, update the style), but when I try to add the styled layer to a web map, it seems to fail to load, as it never displays.

Am I missing something in the styled .json file, like paths to the sprites, glyphs, or url defined at the beginning of the json...?

The URL to my test vector tile layer using a custom style can be found here.

Thanks!

Re: Adding Custom Style to Vector Tiles

KellyGerrow — Fri, 21 Apr 2017 00:32:57 GMT

Hi Matt,

I can't seem to access the url posted, can you repost the link?

-Kelly

Re: Adding Custom Style to Vector Tiles

mpboyle — Fri, 21 Apr 2017 13:00:14 GMT

Kelly Gerrow‌,

I probably deleted it when testing, sorry!

The URL to the source vector tile layer I'm using to test can be found here. Whenever I copy the layer and save it, I never seem to get the option for 'Download Style', I can view the style, but that's it.

Re: Adding Custom Style to Vector Tiles

ChrisWhitmore — Fri, 21 Apr 2017 15:08:57 GMT

Hi Matt, it looks like there is an issue with parsing certain characters in the layer's style - the '<' and '>' characters aren't being handled correctly when copying the layer (it appears the layer names used to create the vector tile layer have the greater than / less than symbols: "source-layer": "Background, >9k" for ex).

This is ultimately what's causing the issue. The workaround is to upload the style json file directly. That will bypass the systems handling of the style json (and subsequently the parsing issue when copying the layer). Attached is the "copied" json you can use to upload on the copied layer (and can be customized however you need first). It'll be easier to use this json rather than downloading directly from the hosted layer. The hosted layer's style has relative urls which won't resolve correctly if directly copied to a different layer (when copying in the map viewer, the viewer handles the updating of the urls to point to the correct resources. the json i posted has the updated urls). I was able to check out the initial layer you posted before it was deleted - it looks like this was the issue for that layer (relative url could not resolve correctly so the layer did not load at all).

We'll look into fixing the parsing issue for < and > for the next release.

If you need this same fix for other hosted layers (would think so since this one is a test), check out the urls in the attached json. There are three urls that will need to be updated to point to to the original source vector tile layer (effectively hardcoding the urls rather than persisting the relative urls), which hosts all the resources used for copies.

Sorry for the hassle. Let me know if you run into issues or if this doesn't make any sense

Chris

Re: Adding Custom Style to Vector Tiles

mpboyle — Fri, 21 Apr 2017 17:51:52 GMT

Chris Whitmore‌,

I had a feeling it might be characters within the layer names! I went through and eliminated commas but hadn't gotten to the other characters yet.

I appreciate the help!!!

On a side note...I have another question regarding offsetting vector tile labels, if you have any insights on this it would be appreciated. Can it be handled using text-offset property within the style?

Re: Adding Custom Style to Vector Tiles

mpboyle — Fri, 21 Apr 2017 18:45:20 GMT

Chris Whitmore‌,

I removed all special characters I could find (, / <>) from the layers and label classes and am still not getting the 'Download Style' option when saving a layer from the hosted vector tile layer.

The steps I'm doing are:

1) Adding the original hosted vector tile layer to a web map

2) Copy the layer

3) Save the copied layer

Updated hosted vector tile layer: http://linncounty-gis.maps.arcgis.com/home/item.html?id=dd4f63dd42834faabb2823d85f70dab4

Shared saved layer of hosted vector tile layer: http://linncounty-gis.maps.arcgis.com/home/item.html?id=8cb312e64ae245a0917ba18601ed90c8

Am I missing a step...? Do I need to place the URLs within the styled json?...shouldn't this be done automatically based on your above comments and the steps I'm taking?

Re: Adding Custom Style to Vector Tiles

mpboyle — Fri, 21 Apr 2017 20:15:09 GMT

cwhitmore-esristaff‌,

Last mention, I promise

It seems like just updating the previous vector tile package wasn't clearing out the json style because the '<>' symbols were still within layer names. So...I went ahead and created a new vector tile package item, published it to a hosted vector tile layer, and then copied and saved a layer. I now have the 'Download Style' as an option.

Thanks again for pointing me in the right direction!

Re: Adding Custom Style to Vector Tiles

ChrisWhitmore — Fri, 21 Apr 2017 20:17:09 GMT

For the label offset issue, it looks like it might be an authoring issue when the VTPK was created (as the style json doesn't seem to include the offset) - I'll look into it. But it can be added manually to the style, though:

"text-offset"

Positive values indicate right and down, while negative values indicate left and up.

To the school layers, I added "text-offset": [5, 5], which moved the labels down and to the right. Here's how that looks for the layer (should be able to tweak the other text formatting options to make it look better if necessary):

Here's the copy I made with the offset. If you search for "text-offset": [5, 5] in the style json, you can see where it needs to be added in the layout section.

https://www.arcgis.com/home/item.html?id=cdabb056851c437b82da19b73b34d086

For the other issue, I seemed to be able to copy the new hosted layer successfully (this is the one I copied: http://linncounty-gis.maps.arcgis.com/home/item.html?id=dd4f63dd42834faabb2823d85f70dab4 )

The resulting layer had download available, etc without any manual tweaking. I do see the same issue on the copied layer though. Mind to try again? Everything seems ok now from what I can tell. Definitely shouldn't need to do any url updates or anything.

Re: Adding Custom Style to Vector Tiles

ChrisWhitmore — Fri, 21 Apr 2017 20:18:05 GMT

ok cool! ignore the second half of my post above then

Re: Adding Custom Style to Vector Tiles

LinnGIS — Fri, 21 Apr 2017 21:27:58 GMT

Chris Whitmore‌,

Something else I noticed when trying to apply custom styles...

I have several layers within my project where there is only a single layer, but that single layer has multiple label classes corresponding to different zoom scales (ex: as you zoom in, labels get larger, more labels appear, etc...).

It seems that within the styling, the label class 'minzoom' and 'maxzoom' property is not assigned properly, they are only assigned a minzoom property and it is the same for all configs, below are some screenshots to illustrate...

ArcGIS Pro --- single address point layer, set to not display when zoomed out beyond 1:2257.

Address points layer has 3 label classes with scale dependencies at each zoom level below 1:2257. The labels turn on and off as expected within ArcGIS Pro.

Vector Tile Styling for address points --- minzoom property is the same for all and no maxzoom property. I tried styling the 2k label class to red (#ff0000) and making the text very small to make the style stand out, but I don't notice any difference.

I did notice that the road labels seem to work as expected within the vector tile styling and I'm guessing that's because they have minzoom and maxzoom properties set correctly. The roads layers use alternate symbols and scale-based sizing.

Re: Adding Custom Style to Vector Tiles

ChrisWhitmore — Mon, 24 Apr 2017 23:58:39 GMT

Hi Matt - Thanks for the details on the issue with zoom levels; I passed it on the folks working on VTPK authoring in Pro.

You should be hearing from Support soon as well - I asked them to follow up on the differences you're seeing with the layers in Pro versus the resulting style on the vector tile layer.

Thanks,

Chris

Re: Adding Custom Style to Vector Tiles

deleted-user-Sh7q9fbKLpEv — Thu, 14 Dec 2017 19:03:33 GMT

Hi Chris Whitmore‌,

I'm experiencing the same issue as Matthew Boyle; I've created a copy of a hosted vector tile layer and do not have the option to "Download Style" from the AGOL item. Could you provide or point me towards some documentation on how to upload a tile layer's modified JSON style file?

Thanks!
Jacqueline

Re: Adding Custom Style to Vector Tiles

ChrisWhitmore — Sat, 16 Dec 2017 00:08:50 GMT

Hi Jacqueline, would it be possible to share the layer where you're seeing this behavior? It sounds like something in the style json is causing the page to fail to load completely.

If it's doable to share but needs to remain private - you can invite my account to a group. The username is cwwhitmore.

Thanks,

Chris