Fix relative path issues for icons and other stuff.

Maps4HTML · Jun 14, 2016 · db4c973 · db4c973
1 parent 9736241
commit db4c973
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/blog/progressive-web-maps.html b/blog/progressive-web-maps.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
     <meta charset="utf-8" />
     <title>Progressive Web Maps</title>
-    <link rel='icon' href='MapsForHTML_16x16.png' sizes='16x16'>
+    <link rel='icon' href='../MapsForHTML_16x16.png' sizes='16x16'>
     <meta name="description" content="The HTML map element needs a community.  The Maps for HTML Community Group wants to adopt it.">
     <meta name="keywords" content="maps,maps for html,web maps,image maps,html5,Web map demos,Web map examples,progressive web apps,web platform,progressive web maps,polymer,javascript,css3,service workers,offline,mobile">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
@@ -189,12 +189,12 @@ <h3>Show Me The Map!</h3>
       </code>
       </pre>
       <!-- the @width / @height attributes take precedence over properties, but currently don't change to reflect updates -->
-      <img usemap="#dowslake" src="map1.png" width="700" height="400" alt="Dow's Lake area" />
+      <img usemap="#dowslake" src="../map1.png" width="700" height="400" alt="Dow's Lake area" />
       <map name="dowslake" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" controls hidden>
         <layer- id="osm" src="http://geogratis.gc.ca/mapml/osm/" label="Open Street Map" checked hidden></layer->
         <layer- id="canvec" label="CanVec+ 031G" src="http://geogratis.gc.ca/mapml/canvec/50k/features/" class="transparency"></layer->
         <!-- the HTML author can create MapML files and serve them as layers if they prefer -->
-        <layer- id="marker" label="Marker layer" src="marker.mapml"></layer->
+        <layer- id="marker" label="Marker layer" src="../marker.mapml"></layer->
 
         <area is="map-area" id="marker2" href='http://example.com/marker/' alt="Marker" coords="265,185" shape="marker">
         <area is="map-area" href='http://example.com/marker/' alt="Marker" coords="255,145,275,190" shape="rect" style="fill: none">

diff --git a/map-layer.html b/map-layer.html
@@ -166,7 +166,7 @@
         // zoom range, extent and projection are.  meta elements in content to
         // allow the author to provide this explicitly are one way, they will
         // be parsed from the second parameter here
-        this._layer = M.mapMLLayer(this.src, this);
+        this._layer = M.mapMLLayer(this.src ? new URI(this.src).resolve(new URI(this.baseURI)).toString(): null, this);
         this._layer.on('extentload', this._onLayerExtentLoad, this);
     },
     _attachedToMap: function() {

diff --git a/scripts/mapml.js b/scripts/mapml.js
@@ -847,9 +847,11 @@ M.MapMLLayer = L.Layer.extend({
         var projectionName = projection.getAttribute('name')?projection.getAttribute('name').trim():'projection';
         var projectionTemplate = projectionName + "={" + projectionName + "}";
 
-        var requestTemplate = bboxTemplate + "&" + zoomTemplate + "&" + projectionTemplate;
+        var requestTemplate = bboxTemplate + "&" + zoomTemplate + "&" + projectionTemplate,
+            base = new URI(this._href);
         action += ((action.search(/\?/g) === -1) ? "?" : "&") + requestTemplate;
-        return L.Util.template(action, values);
+        var rel = new URI(action).resolve(base).toString();
+        return L.Util.template(rel, values);
     },
     // this takes into account that WGS84 is considered a wildcard match.
     _projectionMatches: function(map) {
@@ -1150,10 +1152,7 @@ L.extend(M.MapMLFeatures, {
                         coords[0].innerHTML.split(/\s+/gi).forEach(parseNumber,coordinates);
 			latlng = coordsToLatLng(coordinates);
 
-                        /* can't use L.Icon.Default because L gets the path from
-                         * the <script> element for Leaflet, but that is not available
-                         * inside a Web Component / Custom Element */
-                        var pathToImages = "scripts/lib/images/";
+                        var pathToImages = L.Icon.Default.imagePath + "/";
                         var opacity = vectorOptions.opacity ? vectorOptions.opacity : null;
 			return pointToLayer ? pointToLayer(mapml, latlng) : 
                                 new L.Marker(latlng, {opacity: opacity, icon: L.icon({
@@ -1387,7 +1386,7 @@ M.mapMlLayerControl = function (layers, options) {
 // when used in a custom element, the leaflet script element is hidden inside
 // the import's shadow dom.
 L.Icon.Default.imagePath = (function () {
-        var imp = document.querySelector('link[rel="import"][href="web-map.html"]'),
+        var imp = document.querySelector('link[rel="import"][href*="web-map.html"]'),
             doc = imp ? imp.import : document,
             scripts = doc.getElementsByTagName('script'),
             leafletRe = /[\/^]leaflet[\-\._]?([\w\-\._]*)\.js\??/;

diff --git a/web-map.html b/web-map.html
@@ -184,7 +184,9 @@
             if (L.Browser.gecko) {
                 this.poster.removeAttribute('usemap');
             }
-            Polymer.dom(this.$.map).appendChild(this.poster);
+            if (this.poster) {
+                Polymer.dom(this.$.map).appendChild(this.poster);
+            }
           }
         }