|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css" /> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<style type="text/css"> |
|
#map { |
|
position: relative; |
|
height: 440px; |
|
width: 900px; |
|
} |
|
|
|
#submit { |
|
position: absolute; |
|
font-size: 1.4em; |
|
font-weight: bold; |
|
padding: 10px 30px; |
|
background-color: #DC143C; |
|
color: #fff; |
|
border-style: none; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.tooltip__img { |
|
width: 300px; |
|
} |
|
|
|
.tooltip__text { |
|
text-align: center; |
|
font-size: 1.2em; |
|
margin-bottom: auto; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="map"></div> |
|
<a id="exportLink"><button id="submit" type='submit'>Export</button></a> |
|
</body> |
|
<footer> |
|
<script> |
|
var map = L.map('map').setView([35.6915, 139.7015], 16); |
|
|
|
var pointGroup = new L.LayerGroup(); |
|
|
|
d3.json("sample.json", function (data) { |
|
|
|
var circleList = []; |
|
|
|
data.forEach(function (d) { |
|
|
|
// set circle element option |
|
var location = [d.lat, d.lng]; |
|
var circle = L.circle(location, { radius: 10, color: 'red', opacity: 1, fillColor: 'red', fillOpacity: .4 }); |
|
|
|
circleList.push(circle); |
|
|
|
// hover event |
|
var tooltipHTML = "<img class='tooltip__img' src='" + "https://hirosaji.github.io/hobunsha-map/public/img/scene/" + d.title + "/" + d.place + "/" + d.place + "-0.jpg'><p class='tooltip__text'>" + d.title + " - " + d.place + "</p>"; |
|
var tooltipOption = { direction: "auto", permanent: false, opacity: 1 }; |
|
circle.bindTooltip(tooltipHTML, tooltipOption); |
|
|
|
// drag & drop event |
|
circle.on('mousedown', function (event) { |
|
map.dragging.disable(); |
|
|
|
var circleStartingLat = circle._latlng.lat; |
|
var circleStartingLng = circle._latlng.lng; |
|
|
|
var mouseStartingLat = event.latlng.lat; |
|
var mouseStartingLng = event.latlng.lng; |
|
|
|
map.on('mousemove', e => { |
|
var mouseNewLat = e.latlng.lat; |
|
var mouseNewLng = e.latlng.lng; |
|
|
|
var latDifference = mouseStartingLat - mouseNewLat; |
|
var lngDifference = mouseStartingLng - mouseNewLng; |
|
|
|
var center = [circleStartingLat - latDifference, circleStartingLng - lngDifference]; |
|
|
|
circle.setLatLng(center); |
|
circle.closeTooltip(); // close tooltip while dragging |
|
}); |
|
|
|
map.on('mouseup', function() { |
|
setDL(data, circleList); |
|
|
|
map.dragging.enable(); |
|
map.removeEventListener('mousemove'); |
|
}); |
|
}); |
|
|
|
pointGroup.addLayer(circle); |
|
}); |
|
|
|
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { |
|
attribution: '© OpenStreetMap contributors' |
|
}).addTo(map); |
|
|
|
setDL(data, circleList); // set init data |
|
}); |
|
|
|
map.addLayer(pointGroup); |
|
|
|
// set download link content |
|
function setDL(data, circleList) { |
|
circleList.forEach(function (c, i) { |
|
data.lat = c._latlng.lat; |
|
data.lng = c._latlng.lng; |
|
}); |
|
|
|
// convert JSON to URL |
|
var href = "data:application/octet-stream," + encodeURIComponent(JSON.stringify(data)); |
|
d3.select("#exportLink").attr("href", href).attr("download", "sample.json"); |
|
}; |
|
</script> |
|
</footer> |
|
</html> |