Initial commit
This commit is contained in:
commit
e7d99cc1bb
14 changed files with 352 additions and 0 deletions
1
public/images/location_city.svg
Normal file
1
public/images/location_city.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#8383b3"><path d="M82-186.67V-612q0-44.48 30.23-74.9 30.24-30.43 74.44-30.43h140V-738q0-19.96 7.33-38.48 7.33-18.52 22.33-32.19l50-49.33q30.77-30.33 73.55-30.33 42.79 0 73.79 30.33l48.66 47.33q15.34 15.34 23.5 34.68 8.17 19.35 8.17 40.32v182.34h139.33q44.48 0 74.91 30.43t30.43 74.9v261.33q0 44.2-30.43 74.44Q817.81-82 773.33-82H186.67q-44.2 0-74.44-30.23Q82-142.47 82-186.67Zm104.67 0H284V-284h-97.33v97.33Zm0-164H284V-448h-97.33v97.33Zm0-164H284V-612h-97.33v97.33Zm244.66 328h97.34V-284h-97.34v97.33Zm0-164h97.34V-448h-97.34v97.33Zm0-164h97.34V-612h-97.34v97.33Zm0-164h97.34V-776h-97.34v97.33Zm244.67 492h97.33V-284H676v97.33Zm0-164h97.33V-448H676v97.33Z"/></svg>
|
||||
|
After Width: | Height: | Size: 763 B |
BIN
public/images/marker-icon.png
Normal file
BIN
public/images/marker-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/images/marker-shadow.png
Normal file
BIN
public/images/marker-shadow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
1
public/images/nutrition.svg
Normal file
1
public/images/nutrition.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#e89030"><path d="M480-120q-117 0-198.5-81.5T200-400q0-98 59.5-173.83 59.5-75.84 154.17-98.5Q380-679 354.5-698.83 329-718.67 312-747q-17-28.33-25-62.67-8-34.33-6.67-70 42.34-3 80 10.67 37.67 13.67 67 39 29.34 25.33 46.84 60.33 17.5 35 18.16 76.67 13.67-39 36.84-72.83 23.16-33.84 52.16-62.84 9.67-9.66 23.34-9.66 13.66 0 23.33 9.66 9.67 9.67 9.67 23.34 0 13.66-9.67 23.33-24 24-43 52.17-19 28.16-31 59.5Q646-645 703-570.17q57 74.84 57 170.17 0 117-81.5 198.5T480-120Z"/></svg>
|
||||
|
After Width: | Height: | Size: 574 B |
58
public/index.html
Normal file
58
public/index.html
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>神山町</title>
|
||||
<link rel="stylesheet" href="/leaflet_1.9.4.css"/>
|
||||
<style>
|
||||
html {
|
||||
background: #333;
|
||||
color: #eee;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
#map {
|
||||
height: 100vh;
|
||||
}
|
||||
.leaflet-marker-icon {
|
||||
background-color: rgba(255, 255, 255, .8);;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.menu {
|
||||
padding: 8px;
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
color: #222;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.menu-category {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.menu-category:hover {
|
||||
background-color: rgba(255, 255, 255, .8);;
|
||||
}
|
||||
.menu-category.menu-disable {
|
||||
color: #777;
|
||||
}
|
||||
.menu-category img {
|
||||
height: 1.2rem;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script src="/leaflet_1.9.4.js"></script>
|
||||
<script src="/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
81
public/index.js
Normal file
81
public/index.js
Normal file
|
|
@ -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: '© <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);
|
||||
});
|
||||
3
public/leaflet_1.9.4.css
Normal file
3
public/leaflet_1.9.4.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:79cab275563428aac0ad39ee4c4271610d0b40133390bffd96331224aebbc689
|
||||
size 14852
|
||||
3
public/leaflet_1.9.4.js
Normal file
3
public/leaflet_1.9.4.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:db49d009c841f5ca34a888c96511ae936fd9f5533e90d8b2c4d57596f4e5641a
|
||||
size 147552
|
||||
3
public/marker.json
Normal file
3
public/marker.json
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:d756d5b9b1fe557cd7933f60aca6e0fc46b866aa032c1933291050194b5c3b9d
|
||||
size 748
|
||||
Loading…
Add table
Add a link
Reference in a new issue