More friendly URL structures and style formatting assumptions

[jwasilgeo]

Recently when testing the L.esri.Vector.vectorTileLayer with a custom Koop VectorTileServer, I noticed the following errors coming from the Util.js helper functions, which made it impossible to successfully communicate with and render a layer:

• 1. Sometimes VectorTileServer properties about related URLs include "/" at the beginning, for example:
  defaultStyles: "/resources/styles"

  The beginning forward slash results in a defaultStylesUrl with too many forward slashes and some servers treat this as an invalid path. See Util.js's loadStyleFromService function.

  A similar issue exists when formatting the style object to meet the Mapbox spec, specifically for the source.tiles property. See Util.js's formatStyle function and focus on this line:
  source.tiles = [source.url + metadata.tiles[0]]

  Proposed changes:

  • Let's add more conditional checks and deal with extra slashes ourselves.

  • OR: Remove duplicate forward slashes from any URLs that are manually constructed or modified by Util.js. For example perhaps this string replacement that doesn't affect the valid double slashes at the https:// position:
    urlThatNeedsCleaning = urlThatNeedsCleaning.replace(/([^:]\/)\/+/g, "$1");

• 2. Some styles do not have sprite or glyphs properties. These are listed as optional in the Mapbox style spec. This block makes perhaps too many assumptions:

  esri-leaflet-vector/src/Util.js

  Lines 158 to 175 in d4d7eb1

  	// resolve absolute URLs for style.sprite and style.glyphs
  	if (style.sprite.indexOf('http') === -1) {
  	style.sprite = styleUrl.replace(
  	'styles/root.json',
  	style.sprite.replace('../', '')
  	);
  	}
  	if (style.glyphs.indexOf('http') === -1) {
  	style.glyphs = styleUrl.replace(
  	'styles/root.json',
  	style.glyphs.replace('../', '')
  	);
  	}
  	// add the token to the style.sprite and style.glyphs properties as a query param
  	style.sprite += token ? '?token=' + token : '';
  	style.glyphs += token ? '?token=' + token : '';

  Proposed changes:

  • Be more careful with assuming sprite or glyphs exist and do something like this for both:
    if (style.sprite && style.sprite.indexOf('http') === -1) { ...

  • And move these lines into their related if statements:

    esri-leaflet-vector/src/Util.js

    Lines 173 to 175 in d4d7eb1

    	// add the token to the style.sprite and style.glyphs properties as a query param
    	style.sprite += token ? '?token=' + token : '';
    	style.glyphs += token ? '?token=' + token : '';