81 lines
No EOL
2.5 KiB
JavaScript
81 lines
No EOL
2.5 KiB
JavaScript
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: '© <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);
|
|
}); |