Add emoji icon support 👍

CHANGELOG.md

@@ -1,5 +1,6 @@
 ### Change Log for Node-RED Worldmap
 
+ - v1.5.23 - Let icon support use of emoji specified as :emoji name:  
  - v1.5.22 - Slight adjust to label positions for default map marker icon. Add .lineColor for bearing lines
  - v1.5.21 - Add .label option to display permanent label. Clean up some excess debug logging
  - v1.5.20 - Let worldmap in node send message after out node has initialised

README.md

@@ -9,6 +9,7 @@ map web page for plotting "things" on.
 
 ### Updates
 
+- v1.5.23 - Let icon support use of emoji specified as :emoji name:  
 - v1.5.22 - Slight adjust to label positions for default map marker icon. Add .lineColor for bearing lines
 - v1.5.21 - Add .label option to display permanent label. Clean up some excess debug logging
 - v1.5.18 - Update Leaflet.vector-markers to 0.0.6 (https://github.com/hiasinho/Leaflet.vector-markers)
@@ -60,7 +61,7 @@ Optional properties include
  - **bearing** : combined with speed, draws a vector.
  - **accuracy** : combined with bearing, draws a polygon of possible direction.
  - **lineColor** : CSS color name or #rrggbb value for bearing line or accuracy polygon
- - **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name.
+ - **icon** : <a href="https://fontawesome.com/v4.7.0/icons/" target="mapinfo">font awesome</a> icon name, or :emoji name:
  - **iconColor** : Standard CSS colour name or #rrggbb hex value.
  - **SIDC** : NATO symbology code (instead of icon). See below.
  - **building** : OSMbulding GeoJSON feature set to add 2.5D buildings to buildings layer. See below.
@@ -81,6 +82,8 @@ Any other `msg.payload` properties will be added to the icon popup text box.
 You may select any of the Font Awesome set of [icons](https://fontawesome.com/v4.7.0/icons/).
 If you use the name without the fa- prefix (eg `male`) you will get the icon inside a generic marker shape. If you use the fa- prefix (eg `fa-male`) you will get the icon on its own.
 
+You can also specify an emoji as the icon by using the :emoji name: syntax - for example `:smile:`. Here is a **[list of emojis](https://github.com/dceejay/RedMap/blob/master/emojilist.md)**.
+
 There are also several special icons...
 
  - **plane** : a plane icon that aligns with the bearing of travel.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-contrib-web-worldmap",
-    "version": "1.5.22",
+    "version": "1.5.23",
     "description": "A Node-RED node to provide a web page of a world map for plotting things on.",
     "dependencies": {
         "cgi": "0.3.1",

worldmap.html

@@ -106,7 +106,7 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
         <li><code>speed</code> : combined with bearing, draws a vector.</li>
         <li><code>bearing</code> : combined with speed, draws a vector.</li>
         <li><code>accuracy</code> : combined with bearing, draws a polygon of possible direction.</li>
-        <li><code>icon</code> : <a href="https://fontawesome.com/v4.7.0/icons/" target="_new">font awesome</a> icon name</li>
+        <li><code>icon</code> : <a href="https://fontawesome.com/v4.7.0/icons/" target="_new">font awesome</a> icon name or <a href="https://github.com/dceejay/RedMap/blob/master/emojilist.md" target="_new">:emoji name:</a>.</li>
         <li><code>iconColor</code> : standard CSS color name or #rrggbb hex value.</li>
         <li><code>SIDC</code> : NATO symbology code (instead of icon).</li>
         <li><code>label</code> : permanent label next to icon.</li>
@@ -120,7 +120,8 @@ then by default <code>⌘⇧m</code> - <code>ctrl-shift-m</code> will load the m
     <p>Any other sub-properties of <code>msg.payload</code> will be added to the icon popup text box as extra information.</p>
     <p>Icons of type <i>plane</i>, <i>ship</i>, <i>car</i>, <i>uav</i> or <i>arrow</i> will use built in SVG icons that align to the
     <code>bearing</code> value.</p>
-    <p>Font Awesome (<a href="https://fontawesome.com/v4.7.0/icons/" target="_new">fa-icons 4.7</a>) can also be used, as can NATO symbology codes (SIDC).</p>
+    <p>Font Awesome (<a href="https://fontawesome.com/v4.7.0/icons/" target="_new">fa-icons 4.7</a>) can also be used, as can
+    NATO symbology codes (SIDC), or <a href="https://github.com/dceejay/RedMap/blob/master/emojilist.md" target="_new">:emoji name:</a>.</p>
     <p>See the <a href="https://www.npmjs.com/package/node-red-contrib-web-worldmap" target="_new">README</a> for further
     details and examples of icons and commands for drawing <b>lines</b> and <b>areas</b>, and to <b>add layers</b> and
     to <b>control</b> the map remotely, including how to use a local map server.</p>

worldmap/index.html

@@ -64,6 +64,7 @@
     <script type="text/javascript" src="leaflet/leaflet.label.js"></script>
 
     <script type="text/javascript" src="leaflet/dialog-polyfill.js"></script>
+    <script type="text/javascript" src="images/emoji.js"></script>
     <link rel="stylesheet" type="text/css" href="leaflet/dialog-polyfill.css"/>
 </head>
 
@@ -600,6 +601,7 @@ var hiderightclick = false;
 var addThing = function() {
     var thing = document.getElementById('rinput').value;
     map.closePopup();
+    popped = false;
     var bits = thing.split(",");
     var icon = (bits[1] || "circle").trim();
     var lay = (bits[2] || "_drawing").trim();
@@ -1190,6 +1192,17 @@ function setMarker(data) {
             marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
             labelOffset = [14,-16];
         }
+        else if (data.icon && (data.icon.match(/^:.*:$/g))) {
+            var em = emojify(data.icon);
+            var col = data.iconColor || "#910000";
+            myMarker = L.divIcon({
+                className:"emicon",
+                html: '<center><span style="font-size:2em; color:'+col+'">'+em+'</span></center>',
+                iconSize: [32, 32]
+            });
+            marker = L.marker(ll, {title:data.name, icon:myMarker, draggable:drag});
+            labelOffset = [20,-12];
+        }
         else {
             myMarker = L.VectorMarkers.icon({
                 icon: data.icon || "circle",

worldmap/worldmap.appcache

@@ -1,12 +1,13 @@
 CACHE MANIFEST
-# date: Feb 8th 2019 - v1.5.22
+# date: Feb 11th 2019 - v1.5.23
 
 CACHE:
 index.html
 favicon.ico
+css/map.css
+images/emoji.js
 images/node-red.png
 images/world-50m-flat.json
-css/map.css
 leaflet/L.Terminator.js
 leaflet/Leaflet.Dialog.css
 leaflet/Leaflet.Dialog.js
@@ -38,6 +39,8 @@ leaflet/leaflet.draw.css
 leaflet/leaflet.draw.js
 leaflet/leaflet.fullscreen.css
 leaflet/leaflet.js
+leaflet/leaflet.label.css
+leaflet/leaflet.label.js
 leaflet/leaflet.markercluster.js
 leaflet/leaflet.markercluster.freezable-src.js
 leaflet/leaflet.measurecontrol.css