<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style type="text/css">
<!--
body {background: azure;}
div#mymap {width: 90vw; height: 80vh; margin: 0 auto;}
div#mymap2 {width: 90vw; height: 80vh; margin: 0 auto;}
-->
</style>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />
<script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>
<link rel="stylesheet" type="text/css" href="loadumap.css">
</head>
<body>
<h1>My First Map!</h1>
<div id="mymap"></div>
<div id="mymap2"></div>
<script type="text/javascript" src="loadumap.js" charset="utf-8"></script>
<script type="text/javascript">
var mymap = Lumap.load("mymap", "test.umap", (f, l)=>{
var myprop = f.properties;
l._popup.on("countentupdate", (e)=>{
console.log("POP="+e.target._content)
let div = e.target.getElement();
console.log(`name=${myprop.name}`);
});
return null;
});
//Lumap.load("mymap2", "../loadumap.sh?https://umap.osm.ch/map/5764/download/");
//Lumap.load("mymap2", "coinmill.umap");
window.onload = ()=>{
document.getElementById("mymap").addEventListener("ready", ()=>{
for (let e of Lumap.allMarkers["mymap"]) {
console.log(typeof e);
for (div of e.getElement().querySelectorAll("div")) {
//div.style.backgroundColor = "yellow";
//div.style.borderTopColor = "yellow";
}
}
});
}
</script>
</body>
</html>
