Skip to content

Instantly share code, notes, and snippets.

@Hirosaji
Last active February 19, 2020 02:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Hirosaji/7974adc4cb34dd4521635d822e82f70c to your computer and use it in GitHub Desktop.
Save Hirosaji/7974adc4cb34dd4521635d822e82f70c to your computer and use it in GitHub Desktop.
Leaflet.js × D3.js - location data fix on GUI
# Leaflet.js × D3.js - location data fix on GUI
license: mit

▶︎ 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('http://{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>
[
{
"title": "こみっくがーるず",
"lat": "37.0686645",
"lng": "140.1855981",
"place": "福島県境 道路標識"
},
{
"title": "こみっくがーるず",
"lat": "37.047277",
"lng": "140.2280589",
"place": "白河神社"
},
{
"title": "こみっくがーるず",
"lat": "35.7029551",
"lng": "139.751263",
"place": "芳文社"
},
{
"title": "こみっくがーるず",
"lat": "35.7099719",
"lng": "139.7545171",
"place": "清和公園前"
},
{
"title": "こみっくがーるず",
"lat": "35.7099719",
"lng": "139.7545171",
"place": "東北新幹線 新白河駅"
},
{
"title": "こみっくがーるず",
"lat": "35.7116528",
"lng": "139.7539904",
"place": "女子まんが家寮 道中"
},
{
"title": "こみっくがーるず",
"lat": "35.711793",
"lng": "139.754207",
"place": "女子まんが家寮 道中2"
},
{
"title": "こみっくがーるず",
"lat": "35.7119861",
"lng": "139.7541914",
"place": "女子まんが家寮 道中3"
},
{
"title": "こみっくがーるず",
"lat": "35.712041",
"lng": "139.754181",
"place": "女子まんが家寮 道中4"
},
{
"title": "こみっくがーるず",
"lat": "35.7121059",
"lng": "139.7549715",
"place": "女子まんが家寮 道中5"
},
{
"title": "こみっくがーるず",
"lat": "35.7133087",
"lng": "139.7557091",
"place": "女子まんが家寮 道中6"
},
{
"title": "こみっくがーるず",
"lat": "35.711834",
"lng": "139.748802",
"place": "善光寺坂 慈眼院沢蔵司稲荷前"
},
{
"title": "こみっくがーるず",
"lat": "35.711834",
"lng": "139.748802",
"place": "善光寺坂近く"
},
{
"title": "こみっくがーるず",
"lat": "35.702273",
"lng": "139.745273",
"place": "飯田橋駅高架下"
},
{
"title": "こみっくがーるず",
"lat": "35.6913527",
"lng": "139.7011799",
"place": "新宿駅東口 みどりの窓口前"
},
{
"title": "こみっくがーるず",
"lat": "35.691887",
"lng": "139.702737",
"place": "新宿駅 B7,B8出入口"
},
{
"title": "こみっくがーるず",
"lat": "35.6921219",
"lng": "139.7023377",
"place": "アニメイト新宿"
},
{
"title": "こみっくがーるず",
"lat": "35.6903109",
"lng": "139.7045053",
"place": "フレッシュネスバーガー 新宿3丁目店"
},
{
"title": "こみっくがーるず",
"lat": "35.6898839",
"lng": "139.7051947",
"place": "世界堂 新宿本店"
},
{
"title": "こみっくがーるず",
"lat": "35.6929698",
"lng": "139.7028013",
"place": "新宿駅付近"
},
{
"title": "こみっくがーるず",
"lat": "35.713230",
"lng": "139.756604",
"place": "新宿駅 B6,B7間"
},
{
"title": "こみっくがーるず",
"lat": "35.690668",
"lng": "139.704846",
"place": "新宿三丁目前"
},
{
"title": "こみっくがーるず",
"lat": "35.6920892",
"lng": "139.7013337",
"place": "新宿駅東口前"
},
{
"title": "こみっくがーるず",
"lat": "35.6914253",
"lng": "139.6999565",
"place": "新宿駅 16番線ホーム"
},
{
"title": "こみっくがーるず",
"lat": "35.713230",
"lng": "139.756604",
"place": "清水橋近くバス停"
},
{
"title": "こみっくがーるず",
"lat": "35.711293",
"lng": "139.752604",
"place": "えんま通り商店街前"
},
{
"title": "こみっくがーるず",
"lat": "35.7124736",
"lng": "139.7445519",
"place": "都立竹早高校前"
},
{
"title": "こみっくがーるず",
"lat": "35.700290",
"lng": "139.771851",
"place": "とらのあな秋葉原店B横"
},
{
"title": "こみっくがーるず",
"lat": "35.7004645",
"lng": "139.7722536",
"place": "秋葉原UDX横の通り"
},
{
"title": "こみっくがーるず",
"lat": "35.700332",
"lng": "139.772064",
"place": "とらのあな秋葉原店B裏"
},
{
"title": "こみっくがーるず",
"lat": "35.700332",
"lng": "139.772064",
"place": "ブリスター コミックス前"
},
{
"title": "こみっくがーるず",
"lat": "35.6992456",
"lng": "139.7714039",
"place": "秋葉原メイン通り"
},
{
"title": "こみっくがーるず",
"lat": "35.660838",
"lng": "139.700713",
"place": "ALOOK 渋谷店"
},
{
"title": "こみっくがーるず",
"lat": "35.6623987",
"lng": "139.698268",
"place": "ロイヤルガーデンカフェ渋谷"
},
{
"title": "こみっくがーるず",
"lat": "35.6911141",
"lng": "139.7024076",
"place": "新宿ライオン会館前"
},
{
"title": "こみっくがーるず",
"lat": "35.6904897",
"lng": "139.7022184",
"place": "珈琲西武"
},
{
"title": "こみっくがーるず",
"lat": "35.6904775",
"lng": "139.701761",
"place": "星乃珈琲店 スフレ館 新宿東口店"
},
{
"title": "こみっくがーるず",
"lat": "35.683686",
"lng": "139.702274",
"place": "代々木駅 4番線ホーム"
},
{
"title": "こみっくがーるず",
"lat": "35.6925538",
"lng": "139.7379243",
"place": "外濠公園"
},
{
"title": "こみっくがーるず",
"lat": "35.702271",
"lng": "139.752022",
"place": "水道橋駅西口"
},
{
"title": "こみっくがーるず",
"lat": "35.702111",
"lng": "139.753173",
"place": "水道橋駅 2番線ホーム"
},
{
"title": "こみっくがーるず",
"lat": "35.700987",
"lng": "139.7667298",
"place": "明神カフェ"
},
{
"title": "こみっくがーるず",
"lat": "35.7019218",
"lng": "139.7670433",
"place": "神田明神"
},
{
"title": "こみっくがーるず",
"lat": "35.7011018",
"lng": "139.767147",
"place": "神田明神入り口"
},
{
"title": "こみっくがーるず",
"lat": "35.6810639",
"lng": "139.7656129",
"place": "東京駅前"
},
{
"title": "こみっくがーるず",
"lat": "35.655781",
"lng": "139.737320",
"place": "麻布十番駅 3番出口"
},
{
"title": "こみっくがーるず",
"lat": "35.6550105",
"lng": "139.737186",
"place": "麻布十番駅 改札内トイレ前"
},
{
"title": "こみっくがーるず",
"lat": "35.65551",
"lng": "139.737164",
"place": "麻布十番駅 1番線側ホーム"
},
{
"title": "こみっくがーるず",
"lat": "35.030579",
"lng": "136.729766",
"place": "ナガシマスパーランド メインゲート"
},
{
"title": "こみっくがーるず",
"lat": "35.0302094",
"lng": "136.727796",
"place": "ナガシマスパーランド"
},
{
"title": "こみっくがーるず",
"lat": "35.031118",
"lng": "136.732032",
"place": "ナガシマスパーランド お化け屋敷前"
},
{
"title": "こみっくがーるず",
"lat": "35.030925",
"lng": "136.732372",
"place": "ナガシマスパーランド 園内1"
},
{
"title": "こみっくがーるず",
"lat": "35.032186",
"lng": "136.732985",
"place": "ナガシマスパーランド 園内2"
},
{
"title": "こみっくがーるず",
"lat": "35.032814",
"lng": "136.7348835",
"place": "ナガシマスパーランド スチールドラゴン2000"
},
{
"title": "こみっくがーるず",
"lat": "35.028457",
"lng": "136.730800",
"place": "ナガシマスパーランド キャラクターショップ横広場"
},
{
"title": "こみっくがーるず",
"lat": "35.028284",
"lng": "136.730339",
"place": "ナガシマスパーランド キャラクターショップ裏"
},
{
"title": "こみっくがーるず",
"lat": "35.0298581",
"lng": "136.7332429",
"place": "ナガシマスパーランド 大観覧車オーロラ"
},
{
"title": "こみっくがーるず",
"lat": "35.2847546",
"lng": "139.6908245",
"place": "猿島海水浴場"
},
{
"title": "こみっくがーるず",
"lat": "35.284607",
"lng": "139.6910772",
"place": "猿島レンタルショップ"
},
{
"title": "こみっくがーるず",
"lat": "35.7053391",
"lng": "139.6158062",
"place": "酒道 ハナクラ しぞ~かおでん 荻窪店"
},
{
"title": "こみっくがーるず",
"lat": "35.6816044",
"lng": "139.7676073",
"place": "東京駅 21番線ホーム 10号車乗り場"
},
{
"title": "こみっくがーるず",
"lat": "37.0469669",
"lng": "140.2276551",
"place": "白河の関 バス停"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment