workaround for escaping of { } in tileset url (#22)

CHANGES.md

@@ -1,7 +1,9 @@
 v1.0.2
 ======
-* fixed fitToMarkers (#31, thanks to Horacio Gonzalez)
-* fixed an endless loop on dragging a highly zoomed map (#23)
+* workaround for {s},{x},{y},{z} being escaped in tileset urls (thanks to Kevin Schaaf, John Eckhart, JustinCase1089)
+* fixed fitToMarkers (thanks to Horacio Gonzalez)
+* fixed an endless loop on dragging a highly zoomed map
+* various documentation fixes (thanks to David Calhoun)
 
 v1.0.1
 ======

demo.html

@@ -150,7 +150,7 @@ <h2 id="marker">Marker</h2>
 
 <p>Markers can be defined using html tags as well. The following examples creates a semi transparent marker on the left hand side. And a second marker with a popup on click.</p>
 
-<leaflet-map fit-to-markers="true">
+<leaflet-map fit-to-markers>
 	<leaflet-marker latitude="51.5" longitude="-0.10" title="Transparent" opacity="0.6">
 	</leaflet-marker>
 
@@ -161,7 +161,7 @@ <h2 id="marker">Marker</h2>
 </leaflet-map>
 
 <pre class="html"><code>
-&lt;<span class="i">leaflet-map</span> <span class="a">fit-to-markers</span>="<span class="v">true</span>"&gt;
+&lt;<span class="i">leaflet-map</span> <span class="a">fit-to-markers</span>&gt;
 
     &lt;<span class="i">leaflet-marker</span> <span class="a">latitude</span>="<span class="v">51.5</span>" <span class="a">longitude</span>="<span class="v">-0.10</span>" <span class="a">title</span>="<span class="v">Transparent</span>"
         <span class="a">opacity</span>="<span class="v">0.6</span>"&gt;  &lt;/<span class="i">leaflet-marker</span>&gt;
@@ -321,7 +321,6 @@ <h2 id="tilelayer">Tile layer</h2>
 
 <p>Custom tile layers, for example from online games can be defined using the leaflet-tilelayer element. If there is no explicit tilelayer defined, a default one will be used as shown in previous examples.</p>
 
-
 <leaflet-map latitude="78.8" longitude="-96" zoom="5" min-zoom="2" max-zoom="6">
 	<leaflet-tilelayer 
 		url="https://stendhalgame.org/map/3/{z}-{x}-{y}.png"
@@ -333,7 +332,6 @@ <h2 id="tilelayer">Tile layer</h2>
 
 </leaflet-map>
 
-
 <pre class="html"><code>
 &lt;<span class="i">leaflet-map</span> <span class="a">latitude</span>="<span class="v">78.8</span>" <span class="a">longitude</span>="<span class="v">-96</span>" <span class="a">zoom</span>="<span class="v">5</span>" <span class="a">max-zoom</span>="<span class="v">6</span>"&gt;
 

leaflet-layer.html

@@ -329,7 +329,8 @@
 
 	_containerChanged: function() {
 		if (this.container) {
-			var layer = L.tileLayer(this.url, {
+			var cleanedUrl = this.url.replace(new RegExp("%7B([sxyz])%7D", "g"), '{$1}');
+			var layer = L.tileLayer(cleanedUrl, {
 				attribution: Polymer.dom(this).innerHTML + this.attribution,
 				minZoom: this.minZoom,
 				maxZoom: this.maxZoom,
@@ -359,7 +360,8 @@
 
 	_urlChanged: function() {
 		if (this.layer) {
-			this.layer.setUrl(this.url);
+			var cleanedUrl = this.url.replace(new RegExp("%7B([sxyz])%7D", "g"), '{$1}');
+			this.layer.setUrl(cleanedUrl);
 		}
 	}
 });