Leaflet.js × D3.js - location data fix on GUI

▶︎ 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

<!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('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '&copy; 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