feat: Add LabelStyle support and complete IconStyle support for KML

placemark · Jun 13, 2020 · f920b16 · f920b16
1 parent cdae0c2
commit f920b16
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 8 deletions.
diff --git a/lib/kml.js b/lib/kml.js
@@ -155,6 +155,8 @@ function getPlacemark(root, styleIndex, styleMapIndex, styleByHash) {
   const timeSpan = get1(root, "TimeSpan");
   const timeStamp = get1(root, "TimeStamp");
   const extendedData = get1(root, "ExtendedData");
+  let iconStyle = get1(root, "IconStyle");
+  let labelStyle = get1(root, "LabelStyle");
   let lineStyle = get1(root, "LineStyle");
   let polyStyle = get1(root, "PolyStyle");
   const visibility = get1(root, "visibility");
@@ -177,16 +179,10 @@ function getPlacemark(root, styleIndex, styleMapIndex, styleByHash) {
     // Try to populate the lineStyle or polyStyle since we got the style hash
     const style = styleByHash[properties.styleHash];
     if (style) {
+      if (!iconStyle) iconStyle = get1(style, "IconStyle");
+      if (!labelStyle) labelStyle = get1(style, "LabelStyle");
       if (!lineStyle) lineStyle = get1(style, "LineStyle");
       if (!polyStyle) polyStyle = get1(style, "PolyStyle");
-      const iconStyle = get1(style, "IconStyle");
-      if (iconStyle) {
-        const icon = get1(iconStyle, "Icon");
-        if (icon) {
-          const href = nodeVal(get1(icon, "href"));
-          if (href) properties.icon = href;
-        }
-      }
     }
   }
   if (description) properties.description = description;
@@ -198,6 +194,38 @@ function getPlacemark(root, styleIndex, styleMapIndex, styleByHash) {
   if (timeStamp) {
     properties.timestamp = nodeVal(get1(timeStamp, "when"));
   }
+  if (iconStyle) {
+    const iconstyles = kmlColor(nodeVal(get1(iconStyle, "color")));
+    const icolor = iconstyles[0];
+    const iopacity = iconstyles[1];
+    const iscale = parseFloat(nodeVal(get1(iconStyle, "scale")));
+    const iheading = parseFloat(nodeVal(get1(iconStyle, "heading")));
+    const ihotspot = get1(iconStyle, "hotSpot");
+    if (ihotspot) {
+      const left = parseFloat(ihotspot.getAttribute('x'));
+      const top = parseFloat(ihotspot.getAttribute('y'));
+      if (!isNaN(left) && !isNaN(top)) properties["icon-offset"] = [left, top];
+    }
+    const icon = get1(iconStyle, "Icon");
+    if (icon) {
+      const href = nodeVal(get1(icon, "href"));
+      if (href) properties.icon = href;
+    }
+    if (icolor) properties["icon-color"] = icolor;
+    if (!isNaN(iopacity)) properties["icon-opacity"] = iopacity;
+    if (!isNaN(iscale)) properties["icon-size"] = iscale;
+    if (!isNaN(iheading)) properties["icon-rotate"] = iheading;
+  }
+  if (labelStyle) {
+    const labelstyles = kmlColor(nodeVal(get1(labelStyle, "color")));
+    const lcolor = labelstyles[0];
+    const lopacity = labelstyles[1];
+    const lscale = parseFloat(nodeVal(get1(labelStyle, "scale")));
+    if (lcolor) properties["text-color"] = lcolor;
+    if (!isNaN(lopacity)) properties["text-opacity"] = lopacity;
+    if (!isNaN(lscale)) properties["text-size"] = lscale;
+    properties["text-field"] = "name";
+  }
   if (lineStyle) {
     const linestyles = kmlColor(nodeVal(get1(lineStyle, "color"))),
       color = linestyles[0],

diff --git a/tap-snapshots/test-index.test.js-TAP.test.js b/tap-snapshots/test-index.test.js-TAP.test.js
@@ -9664,6 +9664,11 @@ Object {
       "properties": Object {
         "description": "\\n\\n   ",
         "icon": "http://maps.google.com/mapfiles/kml/paddle/grn-circle.png",
+        "icon-offset": Array [
+          32,
+          1,
+        ],
+        "icon-size": 1.3,
         "name": "\\n12/04/2014 11:24 AM (départ)\\n   ",
         "styleHash": "7f350914",
         "styleUrl": "#start",
@@ -9853,6 +9858,7 @@ Object {
         ],
         "description": "\\n\\n   ",
         "icon": "http://earth.google.com/images/kml-icons/track-directional/track-0.png",
+        "icon-size": 1.3,
         "name": "\\n12/04/2014 11:24 AM\\n   ",
         "stroke": "#ff0000",
         "stroke-opacity": 0.4980392156862745,
@@ -9875,6 +9881,11 @@ Object {
       "properties": Object {
         "description": "\\nCréé par Google Mes parcours sur Android\\n\\nNom : 12/04/2014 11:24 AM\\nType d'activité : course à pied\\nDescription : -\\nDistance totale : 10,43 km (6,5 mi)\\nDurée totale : 1:13:38\\nDurée du déplacement : 1:08:20\\nVitesse moyenne : 8,49 km/h (5,3 mi/h)\\nVitesse moyenne de déplacement : 9,16 km/h (5,7 mi/h)\\nVitesse max. : 12,84 km/h (8,0 mi/h)\\nVitesse moyenne : 7:04 min/km (11:22 min/mi)\\nAllure moyenne : 6:33 min/km (10:33 min/mi)\\nVitesse maximale : 4:40 min/km (7:31 min/mi)\\nÉlévation max. : 1020 m (3347 pi)\\nÉlévation min. : 678 m (2223 pi)\\nDénivelé : 1095 m (3593 pi)\\nInclinaison max. : 21 %\\nInclinaison min. : -24 %\\nDate d'enregistrement : 12/04/2014 11:24 AM\\n\\n   ",
         "icon": "http://maps.google.com/mapfiles/kml/paddle/red-circle.png",
+        "icon-offset": Array [
+          32,
+          1,
+        ],
+        "icon-size": 1.3,
         "name": "\\n12/04/2014 11:24 AM (fin)\\n   ",
         "styleHash": "-16b4bba1",
         "styleUrl": "#end",
@@ -10493,6 +10504,11 @@ Object {
       },
       "properties": Object {
         "icon": "http://maps.google.com/mapfiles/kml/paddle/grn-circle.png",
+        "icon-offset": Array [
+          32,
+          1,
+        ],
+        "icon-size": 1.3,
         "name": "8/8/2013 17:20 (Start)",
         "styleHash": "7f350914",
         "styleUrl": "#start",
@@ -10607,6 +10623,7 @@ Object {
           "2013-08-08T15:25:03.000Z",
         ],
         "icon": "http://earth.google.com/images/kml-icons/track-directional/track-0.png",
+        "icon-size": 1.3,
         "name": "8/8/2013 17:20",
         "stroke": "#ff0000",
         "stroke-opacity": 0.4980392156862745,
@@ -10628,6 +10645,11 @@ Object {
       },
       "properties": Object {
         "icon": "http://maps.google.com/mapfiles/kml/paddle/red-circle.png",
+        "icon-offset": Array [
+          32,
+          1,
+        ],
+        "icon-size": 1.3,
         "name": "8/8/2013 17:20 (End)",
         "styleHash": "-16b4bba1",
         "styleUrl": "#end",
@@ -11429,6 +11451,11 @@ Object {
       },
       "properties": Object {
         "icon": "http://maps.google.com/mapfiles/kml/paddle/grn-circle.png",
+        "icon-offset": Array [
+          32,
+          1,
+        ],
+        "icon-size": 1.3,
         "name": "8/8/2013 17:20 (Start)",
         "styleHash": "7f350914",
         "styleUrl": "#start",
@@ -11543,6 +11570,7 @@ Object {
           "2013-08-08T15:25:03.000Z",
         ],
         "icon": "http://earth.google.com/images/kml-icons/track-directional/track-0.png",
+        "icon-size": 1.3,
         "name": "8/8/2013 17:20",
         "stroke": "#ff0000",
         "stroke-opacity": 0.4980392156862745,
@@ -11564,6 +11592,11 @@ Object {
       },
       "properties": Object {
         "icon": "http://maps.google.com/mapfiles/kml/paddle/red-circle.png",
+        "icon-offset": Array [
+          32,
+          1,
+        ],
+        "icon-size": 1.3,
         "name": "8/8/2013 17:20 (End)",
         "styleHash": "-16b4bba1",
         "styleUrl": "#end",
@@ -17615,6 +17648,9 @@ Object {
       "properties": Object {
         "description": "Here is some descriptive text",
         "icon": "http://myserver.com/icon.jpg",
+        "icon-color": "#ff00ff",
+        "icon-opacity": 0.6313725490196078,
+        "icon-size": 1.399999976158142,
         "name": "Google Earth - New Polygon",
         "styleHash": "34215c41",
         "styleUrl": "#a",
@@ -17632,12 +17668,38 @@ Object {
       },
       "properties": Object {
         "icon": "http://myserver.com/icon.jpg",
+        "icon-color": "#ff00ff",
+        "icon-opacity": 0.6313725490196078,
+        "icon-size": 1.399999976158142,
         "name": "Google Earth - New Path",
         "styleHash": "149ab242",
         "styleUrl": "#b",
       },
       "type": "Feature",
     },
+    Object {
+      "geometry": Object {
+        "coordinates": Array [
+          -122.0822035425683,
+          37.42228990140251,
+          0,
+        ],
+        "type": "Point",
+      },
+      "properties": Object {
+        "icon": "http://myserver.com/icon.jpg",
+        "icon-color": "#ff00ff",
+        "icon-opacity": 0.6313725490196078,
+        "icon-size": 1.399999976158142,
+        "name": "Google Earth - New Label",
+        "styleHash": "-6528509d",
+        "styleUrl": "#c",
+        "text-color": "#000000",
+        "text-field": "name",
+        "text-opacity": 1,
+      },
+      "type": "Feature",
+    },
   ],
   "type": "FeatureCollection",
 }

diff --git a/test/data/style.kml b/test/data/style.kml
@@ -18,6 +18,18 @@
       </Icon>
     </IconStyle>
   </Style>
+  <Style id="c">
+    <IconStyle>
+      <color>a1ff00ff</color>
+      <scale>1.399999976158142</scale>
+      <Icon>
+        <href>http://myserver.com/icon.jpg</href>
+      </Icon>
+    </IconStyle>
+    <LabelStyle>
+      <color>ff000000</color>
+    </LabelStyle>
+  </Style>
   <Placemark>
     <name>Google Earth - New Polygon</name>
     <description>Here is some descriptive text</description>
@@ -33,5 +45,12 @@
       <coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
     </Point>
   </Placemark>
+  <Placemark>
+    <name>Google Earth - New Label</name>
+    <styleUrl>#c</styleUrl>
+    <Point>
+      <coordinates>-122.0822035425683,37.42228990140251,0</coordinates>
+    </Point>
+  </Placemark>
 </Document>
 </kml>