diff --git a/loadumap.js b/loadumap.js
index 9364e61..23e21f9 100644
--- a/loadumap.js
+++ b/loadumap.js
@@ -2,6 +2,8 @@
     var maps = {};
     var layerControl, tileLayers = {}, ovLayers = {};
     var allBounds = {};
+    var allMarkers = {};
+    var readyEvent = new Event("ready");
     let osm_c = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
     function load(id, umapFile, callback) {
 	//https://wiki.openstreetmap.org/wiki/Japan/OSMFJ_Tileserver
@@ -34,7 +36,7 @@
 		      'CycleMap': cycle,
 		      '地理院地図': gsi};
 	L.control.scale().addTo(mymap);
-	Lumap.loadumap(id, umapFile, callback);
+	loadumap(id, umapFile, callback);
     }
     function uMapMarkDown(prop) {
 	let name = prop.name, desc = prop.description, str="";
@@ -47,6 +49,24 @@
 	    .replace(/{{(.*?)}}/g, `<img src="$1">`);
 	return str;
     }
+    function getHcColor(color) {
+	//https://zenn.dev/mryhryki/articles/2020-11-12-hatena-background-color
+	//https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+	//https://note.com/twentynine/n/nd79c8dd275d9
+	let elm = document.createElement("p")
+	elm.style.color = color;
+	document.body.appendChild(elm);
+	let comp=getComputedStyle(elm).getPropertyValue("color"),
+	    c = comp.match(/\d+/g),
+	    r = c[0]/255, g=c[1]/255, b=c[2]/255,
+	    lum = 0.2126*r + 0.7152 * g + 0.0722 * b;
+	console.log(lum);
+	elm.remove();
+	let white = (1+0.05)/(lum+0.05),
+	    black = (lum+0.05)/(0+0.05);
+	//console.log(`color=${color}, c=${c}, lum=${lum}, white=${white}, black=${black}`)
+	return (white>black) ? "white" : "black";
+    }
     function divIconProps(oldProps) {
 	//https://upload.wikimedia.org/wikipedia/commons/
 	let iconClass	= oldProps.iconClass || "Default",
@@ -56,9 +76,11 @@
 	    iconBase = "https://umap.openstreetmap.fr";
 	    // iconBase = "img/icons"
 	let defIcon = "●";
+	let fgColor = getHcColor(color), //Which offers high contrast, B or W?
+	    inv     = (fgColor=="white" ? 1 : 0);
 	if (iconURL) {
 	    if (iconURL.match(/(jpe?g|png|svg)/i))
-		defIcon = `<img src="${iconBase}/${iconURL}" style="filter: invert(1);" />`
+		defIcon = `<img src="${iconBase}/${iconURL}" style="filter: invert(${inv});" />`
 	    else
 		defIcon = iconURL;
 	}
@@ -71,19 +93,18 @@
 	    break;
 	case "Drop":
 	    div1=defIcon;
-	    style1 = `color: white; border-color: yellow; background: ${color};`;
+	    style1 = `color: ${fgColor}; border-color: yellow; background: ${color};`;
 	    style2 = `border-top-color: ${color};`;
 	    iconAnchor = [16, 48];
 	    popupAnchor = [0, -48];
 	    break;
 	case "Default": case undefined:
 	    div1=defIcon;
-	    style1 = `color: white; border-color: yellow; background: ${color};`;
+	    style1 = `color: ${fgColor}; border-color: yellow; background: ${color};`;
 	    style2 = `border-top-color: ${color};`;
 	    iconAnchor = [16, 48];
 	    popupAnchor = [0, -48];
 	    break;
-	    
 	}
 	return {
 	    html: `<div class="icon" style="${style1}">${div1}</div>\n`
@@ -95,14 +116,20 @@
     }
     function uMapBuild(id, umapobj, callback) {
 	if (umapobj.type != "umap") return;
-	let mymap = maps[id];
+	let mymap = maps[id],
+	    mymapElm = document.getElementById(id);
 	allBounds[id] = [];
-	for (let layer of umapobj.layers) {
+	allMarkers[id] = [];
+	for (let i in umapobj.layers) {
+	    let layer = umapobj.layers[i];
 	    let defPopup = (layer._umap_options && layer._umap_options.name)
 		|| (layer._storage && layer._storage.name)
 	    ;
 	    var count = 0;
-	    let gjl = L.geoJson(layer, {
+	    // To use hook when geoJson Layer is ready,
+	    // set "layeradd" event handler before addData to geoJson layer:
+	    // https://github.com/Leaflet/Leaflet/issues/4609
+	    let gjl = L.geoJson(null, {
 		onEachFeature: (f, l)=>{
 		    let fprop = f.properties,
 			umapopt = (fprop&&fprop._umap_options);
@@ -116,6 +143,7 @@
 			if (fprop.name) {
 			    l.bindPopup(uMapMarkDown(fprop));
 			} else if (defPopup) {
+			    // If no "name" property set, set Layer name
 			    l.bindPopup(defPopup);
 			}
 			if (link)
@@ -136,13 +164,27 @@
 		pointToLayer: (f, latlng)=> {
 		    let prop = f.properties._umap_options || {};
 		    var m = L.marker(latlng);
+		    allMarkers[id].push(m);
 		    m.setIcon(x=L.divIcon(divIconProps(prop)));
 		    return m;
 		}
+	    }).on("layeradd", ()=>{
+		mymapElm.dispatchEvent(readyEvent);
 	    }).addTo(mymap);
+	    gjl.addData(layer);
 	    let lp = (layer._umap_options||layer._storage);
 	    if (lp && lp.name) ovLayers[lp.name] = gjl;
 	}
+	// Add custom tileLayer, if any.
+	if (umapobj.properties && umapobj.properties.tilelayer) {
+	    let tl = umapobj.properties.tilelayer;
+	    if (tl.url_template) {
+		tileLayers[tl.name] = L.tileLayer(
+ 		    tl.url_template,
+ 		    tl		// tl itself is a form of property list
+		).addTo(mymap);
+	    }
+	}
 	L.control.layers(tileLayers, ovLayers).addTo(mymap);
     }
     function loadumap(id, umapfile, callback) {
@@ -155,12 +197,13 @@
 		alert(`Parsing error while reading ${umapfile}.`);
 		return;
 	    }
-	    console.log(json);
 	})
     }
     let me = {};
     me.load = load;
-    me.loadumap = loadumap;
+    me.allBounds = allBounds;
+    me.allMarkers = allMarkers;
+    me.tileLayers = tileLayers
+    me.ovLayers = ovLayers
     window.Lumap = me;
 })();
-;