Initial commit

public/index.js

@@ -0,0 +1,81 @@
+let map = L.map('map');
+map.setMaxBounds(L.latLngBounds(L.latLng(33.9033300, 134.2141300), L.latLng(34.08, 134.4836400)));
+map.setView([33.96515, 134.34889], 13);
+
+//L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+L.tileLayer('/{z}/{x}/{y}.png', {
+	minZoom: 13,
+	maxZoom: 19,
+	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+}).addTo(map);
+
+
+// Click event
+let popup = L.popup();
+function onMapClick(event) {
+	popup
+		.setLatLng(event.latlng)
+		.setContent(`GPS: ${[event.latlng.lat, event.latlng.lng]}`)
+		.openOn(map);
+}
+map.on('click', onMapClick);
+
+// Markers
+let markers = {};
+let categories = {};
+fetch('/marker.json').then(response => response.json()).then(marker_data => {
+	for(let category_name in marker_data)
+	{
+		const category_data = marker_data[category_name];
+		let category_markers = [];
+		let icon = L.icon({iconUrl: `/images/${category_data.icon}`, iconSize: [32, 32]});
+		category_data.places.forEach(marker_info => {
+			const marker = L.marker(
+				[marker_info.lat, marker_info.lon],
+				{title: marker_info.name, icon: icon}).bindPopup(`<h3>${marker_info.name}</h3>${marker_info.description}`);
+			category_markers.push(marker);
+		});
+		categories[category_name] = {
+			icon: icon, icon_url: `/images/${category_data.icon}`, name: category_data.name, enable: false};
+		markers[category_name] = category_markers;
+	}
+
+	// Menu
+	let menu = L.control();
+	menu.onAdd = _map => {
+		let div = L.DomUtil.create('div', 'menu')
+		for(let category_name in markers)
+		{
+			let category_elt = document.createElement('div');
+			category_elt.classList.add('menu-category');
+			category_elt.classList.add('menu-disable');
+
+			let category_icon = document.createElement('img');
+			category_icon.src = categories[category_name].icon_url;
+			category_elt.appendChild(category_icon);
+
+			let category_label = document.createElement('label');
+			category_label.innerHTML = categories[category_name].name;
+			category_elt.appendChild(category_label);
+
+			category_elt.onclick = event => {
+				if(categories[category_name].enable)
+				{
+					category_elt.classList.add('menu-disable');
+					markers[category_name].forEach(marker => { marker.remove(); });
+				}
+				else
+				{
+					markers[category_name].forEach(marker => { marker.addTo(map); });
+					category_elt.classList.remove('menu-disable');
+				}
+				categories[category_name].enable = !categories[category_name].enable;
+				event.preventDefault();
+				event.stopPropagation();
+			};
+			div.appendChild(category_elt);
+		}
+		return div;
+	};
+	menu.addTo(map);
+});