▶︎ What's this?: Drag & Fix Location Data System
▷ Why made this?: I making location data for "Houbunsha" map. So I developed this system for making data efficient.
▷ What is "Houbunsha" map?: WebGIS for visit the real-life locations on "Houbunsha" works - https://hirosaji.github.io/hobunsha-map/public/
▷ How to use?: By dragging, you can fix positions of circles showing real-life locations. With 'Export' button, you can download the fixed data.
[Gist] https://gist.github.com/Hirosaji/7974adc4cb34dd4521635d822e82f70c
Built with blockbuilder.org
xxxxxxxxxx
<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('https://{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>
https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js
https://d3js.org/d3.v4.min.js