mapshaper 0.7.12 → 0.7.13

package/mapshaper.js

@@ -17490,7 +17490,7 @@
   // higher-level mapshaper-svg.mjs (which would otherwise form a cycle).
 
   function featureHasSvgSymbol(d) {
-    return !!(d && (d['svg-symbol'] || d.r));
+    return !!(d && (d['svg-symbol'] || d.r || d.icon || d['icon-size']));
   }
 
   function featureHasLabel(d) {
@@ -17763,6 +17763,9 @@
     'font-style': null,
     'font-stretch': null,
     'font-weight': null,
+    icon: null,
+    'icon-color': 'color',
+    'icon-size': 'number',
     'label-text': null,  // leaving this null
     'letter-spacing': 'measure',
     'line-height': 'measure',
@@ -18110,12 +18113,44 @@
     if (d['svg-symbol']) {
       return renderComplexSymbol(d['svg-symbol']);
     }
+    if (featureHasIcon(d)) {
+      return renderIcon(d);
+    }
     if (d.r > 0) {
       return circle(d);
     }
     return empty();
   }
 
+  function featureHasIcon(d) {
+    return !!(d && (d.icon || d['icon-size'] || (d['icon-color'] && d.r > 0)));
+  }
+
+  function renderIcon(d) {
+    var type = d.icon || 'circle';
+    var r = getIconRadius(d);
+    if (r > 0 === false) return empty();
+    if (type == 'circle') return circle(getIconStyleData(d, r));
+    if (type == 'square') return square(getIconStyleData(d, r), 0, 0);
+    if (type == 'ring') return ring(getIconStyleData(d, r), 0, 0);
+    if (type == 'star') return star(getIconStyleData(d, r));
+    message('Unknown icon type: ' + type);
+    return empty();
+  }
+
+  function getIconRadius(d) {
+    if (d['icon-size'] > 0) return d['icon-size'] / 2;
+    if (d.r > 0) return d.r;
+    return 5;
+  }
+
+  function getIconStyleData(d, r) {
+    var o = utils.extend({}, d);
+    o.r = r;
+    o.fill = d['icon-color'] || d.fill || 'black';
+    return o;
+  }
+
   function renderComplexSymbol(sym, x, y) {
     if (utils.isString(sym)) {
       sym = JSON.parse(sym);
@@ -18190,10 +18225,44 @@
         height: r * 2
       }
     };
-    applyStyleAttributes(o, 'point', d);
+    applyStyleAttributes(o, 'point', d, nonCirclePointFilter);
+    return o;
+  }
+
+  function ring(d, x, y) {
+    var o = circle(d, x, y);
+    o.properties.fill = 'none';
+    o.properties.stroke = d.fill;
+    if (!o.properties['stroke-width']) {
+      o.properties['stroke-width'] = 1;
+    }
     return o;
   }
 
+  function star(d) {
+    var coords = getStarCoords$1(d.r);
+    var o = importPolygon([coords]);
+    applyStyleAttributes(o, 'point', d, nonCirclePointFilter);
+    return o;
+  }
+
+  function nonCirclePointFilter(k) {
+    return k != 'r';
+  }
+
+  function getStarCoords$1(r) {
+    var coords = [];
+    var innerR = r * 0.42;
+    var angle, len;
+    for (var i=0; i<10; i++) {
+      len = i % 2 === 0 ? r : innerR;
+      angle = -Math.PI / 2 + i * Math.PI / 5;
+      coords.push([roundToTenths(Math.cos(angle) * len), roundToTenths(Math.sin(angle) * len)]);
+    }
+    coords.push(coords[0].concat());
+    return coords;
+  }
+
   function line(d, x, y) {
     var coords, o;
     coords = [[x, y], [x + (d.dx || 0), y + (d.dy || 0)]];
@@ -18899,7 +18968,7 @@
 
   // just a dot, no label or icon
   function isSimpleCircle(rec) {
-    return rec && (rec.r > 0 && !rec['svg-symbol'] && !rec['label-text']);
+    return rec && (rec.r > 0 && !rec['svg-symbol'] && !rec['label-text'] && !rec.icon && !rec['icon-size'] && !rec['icon-color']);
   }
 
   function importMultiPoint(coords, rec) {
@@ -18927,6 +18996,8 @@
     importPolygon: importPolygon
   });
 
+  var ILLUSTRATOR_PATH_VERTEX_LIMIT = 32000;
+
   //
   function exportSVG(dataset, opts) {
     var namespace = 'xmlns="http://www.w3.org/2000/svg"';
@@ -19091,6 +19162,7 @@ ${svg}
     var d = utils.defaults({layers: [lyr]}, dataset);
     var geojson = exportDatasetAsGeoJSON(d, opts);
     var features = geojson.features || geojson.geometries || (geojson.type ? [geojson] : []);
+    warnIfIllustratorPathLimitExceeded(lyr, features);
     var children = importGeoJSONFeatures(features, opts);
     // Drop empty placeholder <g/> elements (features whose geometry was null in the
     // source data, collapsed during simplification, or otherwise produced no
@@ -19109,6 +19181,53 @@ ${svg}
     return children;
   }
 
+  function warnIfIllustratorPathLimitExceeded(lyr, features) {
+    var count = 0;
+    var max = 0;
+    if (lyr.geometry_type != 'polygon' && lyr.geometry_type != 'polyline') return;
+    features.forEach(function(feature) {
+      var geom = feature.geometry || feature;
+      var n = countSvgPathVertices(geom);
+      if (n > ILLUSTRATOR_PATH_VERTEX_LIMIT) {
+        count++;
+        max = Math.max(max, n);
+      }
+    });
+    if (count > 0) {
+      warn(utils.format(
+        '%,d SVG path%s in layer "%s" contain%s more than %,d vertices; Adobe Illustrator may not import %s. The largest path has %,d vertices.',
+        count,
+        utils.pluralSuffix(count),
+        lyr.name || '[unnamed]',
+        count == 1 ? 's' : '',
+        ILLUSTRATOR_PATH_VERTEX_LIMIT,
+        count == 1 ? 'it' : 'them',
+        max
+      ));
+    }
+  }
+
+  function countSvgPathVertices(geom) {
+    var coords = geom && geom.coordinates;
+    if (!coords) return 0;
+    if (geom.type == 'LineString') return coords.length;
+    if (geom.type == 'MultiLineString' || geom.type == 'Polygon') {
+      return sumPathLengths(coords);
+    }
+    if (geom.type == 'MultiPolygon') {
+      return coords.reduce(function(sum, polygon) {
+        return sum + sumPathLengths(polygon);
+      }, 0);
+    }
+    return 0;
+  }
+
+  function sumPathLengths(paths) {
+    return paths.reduce(function(sum, path) {
+      return sum + path.length;
+    }, 0);
+  }
+
   function isEmptyPlaceholder(o) {
     return o.tag == 'g' && (!o.children || o.children.length === 0);
   }
@@ -19206,7 +19325,7 @@ ${svg}
     // TODO: set fill="none" in SVG symbols, not on the container
     //   (setting fill=none on the container overrides the default black fill
     //   on paths, which may alter the appearance of SVG icons loaded from external URLs).
-    if (lyr.geometry_type == 'polyline' || layerHasSvgSymbols(lyr)) {
+    if (lyr.geometry_type == 'polyline' || layerHasSvgSymbolField(lyr)) {
       layerObj.properties.fill = 'none';
     }
 
@@ -19229,6 +19348,15 @@ ${svg}
   }
 
   function layerHasSvgSymbols(lyr) {
+    return lyr.geometry_type == 'point' && lyr.data && (
+      lyr.data.fieldExists('svg-symbol') ||
+      lyr.data.fieldExists('icon') ||
+      lyr.data.fieldExists('icon-size') ||
+      (lyr.data.fieldExists('icon-color') && lyr.data.fieldExists('r'))
+    );
+  }
+
+  function layerHasSvgSymbolField(lyr) {
     return lyr.geometry_type == 'point' && lyr.data && lyr.data.fieldExists('svg-symbol');
   }
 
@@ -28250,7 +28378,7 @@ ${svg}
 
     };
 
-    this.getHelpMessage = function(cmdName) {
+    this.getHelpLines = function(cmdName) {
       var helpCommands, singleCommand, lines;
       if (cmdName) {
         singleCommand = findCommandDefn(cmdName, getCommands());
@@ -28262,113 +28390,115 @@ ${svg}
         helpCommands = getCommands().filter(function(cmd) {return cmd.name && cmd.describe || cmd.title;});
         lines = getMultiCommandLines(helpCommands);
       }
+      return lines;
+    };
 
-      return formatLines(lines);
-
-      function formatLines(lines) {
-        var colWidth = calcColWidth(lines);
-        var gutter = '  ';
-        var indent = runningInBrowser() ? '' : '  ';
-        var helpStr = lines.map(function(line) {
-          if (Array.isArray(line)) {
-            line = indent + utils.rpad(line[0], colWidth, ' ') + gutter + line[1];
-          }
-          return line;
-        }).join('\n');
-        return helpStr;
-      }
-
-      function getSingleCommandLines(cmd) {
-        var lines = [];
-        var options = [];
-        cmd.options.forEach(function(opt) {
-          options = options.concat(getOptionLines(opt));
-        });
+    this.getHelpMessage = function(cmdName) {
+      return formatLines(this.getHelpLines(cmdName));
+    };
 
-        lines.push('COMMAND', getCommandLine(cmd));
-        if (options.length > 0) {
-          lines.push('', 'OPTIONS');
-          lines = lines.concat(options);
+    function formatLines(lines) {
+      var colWidth = calcColWidth(lines);
+      var gutter = '  ';
+      var indent = runningInBrowser() ? '' : '  ';
+      var helpStr = lines.map(function(line) {
+        if (Array.isArray(line)) {
+          line = indent + utils.rpad(line[0], colWidth, ' ') + gutter + line[1];
         }
+        return line;
+      }).join('\n');
+      return helpStr;
+    }
 
-        // examples
-        if (cmd.examples) {
-          lines.push('', 'EXAMPLE' + (cmd.examples.length > 1 ? 'S' : ''));
-          cmd.examples.forEach(function(ex, i) {
-            if (i > 0) lines.push('');
-            ex.split('\n').forEach(function(line, i) {
-              lines.push('  ' + line);
-            });
-          });
-        }
-        return lines;
+    function getSingleCommandLines(cmd) {
+      var lines = [];
+      var options = [];
+      cmd.options.forEach(function(opt) {
+        options = options.concat(getOptionLines(opt));
+      });
+
+      lines.push('COMMAND', getCommandLine(cmd));
+      if (options.length > 0) {
+        lines.push('', 'OPTIONS');
+        lines = lines.concat(options);
       }
 
-      function getOptionLines(opt, cmd) {
-        var lines = [];
-        var description = opt.describe;
-        var label;
-        if (!description) ; else if (opt.label) {
-          lines.push([opt.label, description]);
-        } else if (opt.DEFAULT) {
-          label = opt.name + '=';
-          lines.push(['<' + opt.name + '>', 'shortcut for ' + label]);
-          lines.push([label, description]);
-        } else {
-          label = opt.name;
-          if (opt.alias) label += ', ' + opt.alias;
-          if (opt.type != 'flag' && !opt.assign_to) label += '=';
-          lines.push([label, description]);
-        }
-        return lines;
+      // examples
+      if (cmd.examples) {
+        lines.push('', 'EXAMPLE' + (cmd.examples.length > 1 ? 'S' : ''));
+        cmd.examples.forEach(function(ex, i) {
+          if (i > 0) lines.push('');
+          ex.split('\n').forEach(function(line, i) {
+            lines.push('  ' + line);
+          });
+        });
       }
+      return lines;
+    }
 
-      function getCommandLine(cmd) {
-        var name = cmd.name ? "-" + cmd.name : '';
-        if (cmd.alias) name += ', -' + cmd.alias;
-        return [name, cmd.describe || '(undocumented command)'];
+    function getOptionLines(opt, cmd) {
+      var lines = [];
+      var description = opt.describe;
+      var label;
+      if (!description) ; else if (opt.label) {
+        lines.push([opt.label, description]);
+      } else if (opt.DEFAULT) {
+        label = opt.name + '=';
+        lines.push(['<' + opt.name + '>', 'shortcut for ' + label]);
+        lines.push([label, description]);
+      } else {
+        label = opt.name;
+        if (opt.alias) label += ', ' + opt.alias;
+        if (opt.type != 'flag' && !opt.assign_to) label += '=';
+        lines.push([label, description]);
       }
+      return lines;
+    }
 
-      function getMultiCommandLines(commands) {
-        var lines = [];
-        // usage
-        if (_usage) lines.push(_usage);
+    function getCommandLine(cmd) {
+      var name = cmd.name ? "-" + cmd.name : '';
+      if (cmd.alias) name += ', -' + cmd.alias;
+      return [name, cmd.describe || '(undocumented command)'];
+    }
 
-        // list of commands
-        commands.forEach(function(cmd) {
-          if (cmd.title) {
-            lines.push('', cmd.title);
-          } else {
-            lines.push(getCommandLine(cmd));
-          }
-        });
+    function getMultiCommandLines(commands) {
+      var lines = [];
+      // usage
+      if (_usage) lines.push(_usage);
 
-        // examples
-        if (_examples.length > 0) {
-          lines.push('', 'Examples');
-          _examples.forEach(function(str) {
-            lines.push('', str);
-          });
+      // list of commands
+      commands.forEach(function(cmd) {
+        if (cmd.title) {
+          lines.push('', cmd.title);
+        } else {
+          lines.push(getCommandLine(cmd));
         }
+      });
 
-        // note
-        if (_note) {
-          lines.push('', _note);
-        }
-        return lines;
+      // examples
+      if (_examples.length > 0) {
+        lines.push('', 'Examples');
+        _examples.forEach(function(str) {
+          lines.push('', str);
+        });
       }
 
-
-      function calcColWidth(lines) {
-        var w = 0;
-        lines.forEach(function(line) {
-          if (Array.isArray(line)) {
-            w = Math.max(w, line[0].length);
-          }
-        });
-        return w;
+      // note
+      if (_note) {
+        lines.push('', _note);
       }
-    };
+      return lines;
+    }
+
+    function calcColWidth(lines) {
+      var w = 0;
+      lines.forEach(function(line) {
+        if (Array.isArray(line)) {
+          w = Math.max(w, line[0].length);
+        }
+      });
+      return w;
+    }
 
     function getCommands() {
       return _commands.map(function(cmd) {
@@ -30488,6 +30618,15 @@ ${svg}
       .option('r', {
         describe: 'symbol radius (set this to export points as circles)',
       })
+      .option('icon', {
+        describe: 'point icon shape; one of: circle, square, ring, star'
+      })
+      .option('icon-size', {
+        describe: 'point icon size in pixels'
+      })
+      .option('icon-color', {
+        describe: 'point icon color (defaults to fill color, then black)'
+      })
       .option('label-text', {
         describe: 'label text (set this to export points as labels)'
       })
@@ -44055,7 +44194,14 @@ ${svg}
         }]
       };
     }
-    message(formatInfo(arr));
+    if (runningInBrowser()) {
+      message({
+        type: 'mapshaper-console-info',
+        layers: arr
+      });
+    } else {
+      message(formatInfo(arr));
+    }
   };
 
   cmd.printInfo = cmd.info; // old name
@@ -49377,8 +49523,15 @@ ${svg}
   }
 
   cmd.printHelp = function(opts) {
-    var str = getOptionParser().getHelpMessage(opts.command);
-    print(str);
+    var parser = getOptionParser();
+    if (runningInBrowser()) {
+      message({
+        type: 'mapshaper-console-help',
+        lines: parser.getHelpLines(opts.command)
+      });
+    } else {
+      print(parser.getHelpMessage(opts.command));
+    }
   };
 
   function stopJob(job) {
@@ -55528,7 +55681,7 @@ ${svg}
     });
   }
 
-  var version = "0.7.12";
+  var version = "0.7.13";
 
   // Parse command line args into commands and run them
   // Function takes an optional Node-style callback. A Promise is returned if no callback is given.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mapshaper",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "description": "A tool for editing vector datasets for mapping and GIS.",
   "keywords": [
     "shapefile",

package/www/index.html

@@ -68,7 +68,7 @@
 <div class="page-header">
 	<div class="mapshaper-logo">map<span class="logo-highlight">shaper</span></div>
 
-	<div class="layer-control-btn icon-duo"><span class="btn header-btn layer-name"></span></div>
+	<div class="layer-control-btn"><span class="active-layer-label btn" role="button" tabindex="0" aria-label="Open layers panel"></span></div>
 
 	<div class="simplify-control-wrapper"><div class="simplify-control"><div class="header-btn btn simplify-settings-btn">Settings</div>
 		<div class="slider">
@@ -116,32 +116,6 @@
 	</div>
 </div>
 
-<div class="layer-control main-area popup-dialog">
-	<div class="info-box">
-		<div class="info-box-scrolled">
-		<div class="layer-menu">
-			<h3>Layers</h3>
-			<div class="pin-all pinnable">
-				<img class="eye-btn black-eye" src="images/eye.png" alt="">
-				<img class="eye-btn green-eye" src="images/eye2.png" alt="">
-			</div>
-			<div class="layer-list"></div>
-			<!-- <h4>Sources</h4> -->
-			<div class="no-layer-note">No data has been added</div>
-			<div class="source-file-section">
-				<h4>Source files</h4>
-				<div class="file-list"></div>
-			</div>
-			<div>
-				<div id="add-file-btn" class="dialog-btn btn">Add files</div>
-				<div id="add-empty-btn" class="dialog-btn btn">Add empty layer</div>
-			</div>
-		</div>
-		</div>
-	</div>
-</div>
-
-
 <div class="box-tool-options sidebar-buttons">
 	<div>
 		<div class="select-btn btn sidebar-btn">Select</div>
@@ -367,11 +341,35 @@ encoding=big5</span>. Click to see all options.</div></div></div>
 <!-- TODO: remove #mshp-main-page without causing the map to jitter when resized -->
 <div id="mshp-main-page">
 
-	<div class="console main-area console-area">
+	<div class="layer-control main-area layer-area sidebar-panel">
+		<div class="info-box">
+			<div class="info-box-scrolled">
+			<div class="layer-menu">
+				<div class="layer-add-links">
+					<span id="add-file-btn" class="layer-menu-link">Add files</span><span class="layer-menu-link-separator">&nbsp;&nbsp;·&nbsp;&nbsp;</span><span id="add-empty-btn" class="layer-menu-link">Add empty layer</span>
+				</div>
+				<div class="layer-item">
+					<h3>Layers</h3>
+					<div class="pin-all pinnable">
+						<img class="eye-btn black-eye" src="images/eye.png" alt="">
+						<img class="eye-btn green-eye" src="images/eye2.png" alt="">
+					</div>
+				</div>
+				<div class="layer-list"></div>
+				<div class="no-layer-note">No data has been added</div>
+			</div>
+			</div>
+		</div>
+	</div>
+	<div class="console main-area console-area sidebar-panel">
 		<div class="console-window"><div class="console-buffer selectable"></div></div>
 	</div>
+	<div class="sidebar-resize-handle" role="separator" aria-orientation="vertical" aria-label="Resize sidebar"></div>
+	<div class="sidebar-tabs">
+		<div class="sidebar-tab layer-tab" role="button" tabindex="0" aria-label="Toggle layers panel" aria-expanded="false">Layers</div>
+		<div class="sidebar-tab console-tab console-btn" role="button" tabindex="0" aria-label="Toggle console" aria-expanded="false">Console</div>
+	</div>
 	<div class="mshp-main-map main-area map-area">
-		<div class="console-tab console-btn" role="button" tabindex="0" aria-label="Toggle console">Console</div>
 		<div class="intersection-display">
 			<span class="intersection-count">0 line intersections</span>
 			<div class="repair-btn text-btn colored-text">Repair</div>