Add Load dropdown

index.css

@@ -845,22 +845,26 @@ div.slider .ui-slider-handle {
 	line-height: 1.6em;
 }
 
-#saveDropdown {
+.dropdown {
+	display: inline-block;
+	/* todo: float: left? */
+}
+
+.dropdown__options {
 	display: none;
 	position: absolute;
-	left: 29%;
 	top: 100%;
 	border: 1px solid #5e4fa2;
 	background-color: #a4879b;
 	width: 44px;
 }
 
-#saveDropdown>div {
+.dropdown__options > div {
 	padding: 2px 4px;
 	cursor: pointer;
 }
 
-#saveDropdown>div:hover {
+.dropdown__options > div:hover {
 	color: white;
 }
 

script.js

@@ -19,7 +19,7 @@
   // Use typed arrays instead of array of objects
   // Get rid of jQuery as d3.js can almost all the same and more
   // Re-build UI on reactive approach, vue.js
-  
+
 "use strict";
 fantasyMap();
 function fantasyMap() {
@@ -270,12 +270,14 @@ function fantasyMap() {
   const mapLink = params.get("maplink");
   if (mapLink) {
     // set up global state
+    applyNamesData();
     applyMapSize();
     placePoints();
     calculateVoronoi(points);
-
+    
     makeFileFromUrl(decodeURIComponent(mapLink)).then(blob => {
       uploadFile(blob);
+      manorsAndRegions(); // namesBase global state
     })
   } else {
     applyNamesData(); // apply default namesbase on load
@@ -7720,6 +7722,7 @@ function fantasyMap() {
       zoom.scaleExtent([1, 20]).scaleTo(svg, 1);
     }
     if (id === "saveButton") {$("#saveDropdown").slideToggle();}
+    if (id === "loadButton") {$("#loadDropdown").slideToggle();}
     if (id === "loadMap") {mapToLoad.click();}
     if (id === "zoomReset") {resetZoom(1000);}
     if (id === "zoomPlus") {