Add videoUrl support to popup

README.md

@@ -7,6 +7,7 @@ map web page for plotting "things" on.
 ![Map Image](https://dceejay.github.io/pages/images/redmap.png)
 
 ### Changes
+ - v1.1.8 - add videoUrl property to allow mp4 insert in popup
  - v1.1.7 - extend path correctly - Issue #28
  - v1.1.6 - cleanup/remove excess logging
  - v1.1.5 - add ttl property to set expiry time (secs) of individual marker, and let command clear:"layername" delete a complete layer.
@@ -63,6 +64,7 @@ Optional properties include
  - **iconColor** : Standard CSS color name or #rrggbb hex value.
  - **ttl** : time to live, how long an individual marker stays on map in seconds (overrides general maxage setting)
  - **photoUrl** : adds an image pointed at by the url to the popup box.
+ - **videoUrl** : adds an mp4 video pointed at by the url to the popup box. Ideally 320x240 in size.
  - **weblink** : adds a link to an external page for more information. Either set a url as a *string*, or an *object* like `{name:"BBC News", url:"news.bbc.co.uk"}`
  - **deleted** : set to <i>true</i> to remove the named marker. (default false)
  - **addtoheatmap** : set to <i>false</i> to exlcude point from contributing to heatmap layer. (default true)

package.json

@@ -1,6 +1,6 @@
 {
     "name"          : "node-red-contrib-web-worldmap",
-    "version"       : "1.1.7",
+    "version"       : "1.1.8",
     "description"   : "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies"  : {
         "express": "^4.15.0",

worldmap/index.html

@@ -1000,6 +1000,10 @@ function setMarker(data) {
                 words += "<img src=\"" + data.photoUrl + "\" style=\"width:100%; margin-top:10px;\">";
                 delete data.photoUrl;
             }
+            if (data.hasOwnProperty("videoUrl")) {
+                words += '<video controls autoplay><source src="'+data.videoUrl+'" type="video/mp4">Your browser does not support the video tag.</video>';
+                delete data.videoUrl;
+            }
             if (data.hasOwnProperty("ttl")) {  // save expiry time for this marker
                 if (data.ttl != 0) {
                     marker.ts = parseInt(Date.now()/1000) + Number(data.ttl);
@@ -1026,7 +1030,7 @@ function setMarker(data) {
                     }
                 }
             }
-            marker.bindPopup(words);
+            marker.bindPopup(words, {keepInView:true, minWidth:348});
             marker._popup.dname = data.name;
             marker.lay = lay;                       // and the layer it is on
             var rightmenuMarker = L.popup().setContent("<b>"+data.name+"</b><br/><button onclick='delMarker(\""+data.name+"\");'>Delete</button>");

worldmap/worldmap.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# date: Oct 10th 2017 - v1.1.6
+# date: Oct 10th 2017 - v1.1.8
 
 CACHE:
 index.html
@@ -53,10 +53,7 @@ leaflet/images/spritesheet-2x.png
 leaflet/images/spritesheet.png
 leaflet/assets/shadow.png
 leaflet/assets/shadow@2x.png
-leaflet/font-awesome/fonts/FontAwesome.otf
-leaflet/font-awesome/fonts/fontawesome-webfont.eot
 leaflet/font-awesome/fonts/fontawesome-webfont.svg
-leaflet/font-awesome/fonts/fontawesome-webfont.ttf
 leaflet/font-awesome/fonts/fontawesome-webfont.woff
 leaflet/font-awesome/fonts/fontawesome-webfont.woff2
 leaflet/font-awesome/css/font-awesome.min.css