shapeRendering option

index.html

@@ -1278,6 +1278,18 @@
             </td>
           </tr>
 
+          <tr data-tip="Select shape rendering model">
+            <td></td>
+            <td>Shape rendering</td>
+            <td>
+              <select id="shapeRendering" data-stored="shapeRendering">
+                <option value="geometricPrecision" selected>Best quality</option>
+                <option value="optimizeSpeed">Best performace</option>
+              </select>
+            </td>
+            <td></td>
+          </tr>
+
           <!-- <tr data-tip="Select language (not all languages are fully supported). Reload the page to apply">
             <td></td>
             <td>Language</td>

modules/load.js

@@ -804,6 +804,7 @@ function parseLoadedData(data) {
     // set options
     yearInput.value = options.year;
     eraInput.value = options.era;
+    shapeRendering.value = viewbox.attr("shape-rendering") || "geometricPrecision";
 
     if (window.restoreDefaultEvents) restoreDefaultEvents();
     focusOn(); // based on searchParams focus on point, cell or burg

modules/ui/options.js

@@ -157,6 +157,7 @@ optionsContent.addEventListener("change", function (event) {
   if (id === "zoomExtentMin" || id === "zoomExtentMax") changeZoomExtent(value);
   else if (id === "optionsSeed") generateMapWithSeed();
   else if (id === "uiSizeInput" || id === "uiSizeOutput") changeUIsize(value);
+  if (id === "shapeRendering") viewbox.attr("shape-rendering", value);
   else if (id === "yearInput") changeYear();
   else if (id === "eraInput") changeEra();
 });
@@ -494,6 +495,9 @@ function applyStoredOptions() {
   const height = +params.get("height");
   if (width) mapWidthInput.value = width;
   if (height) mapHeightInput.value = height;
+
+  // set shape rendering
+  viewbox.attr("shape-rendering", shapeRendering.value);
 }
 
 // randomize options if randomization is allowed (not locked or options='default')