mahuntington
/
mapping-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new version

Browse Source
master
Matt Huntington 3 years ago
parent 04d075ddb1
commit 326c9b4dcd
5 changed files with 94 additions and 130176 deletions
Show Stats Download Patch File Download Diff File

71
app.js
Unescape View File

@ -1,19 +1,66 @@
var width = 960; const width = 960;
var height = 490; const height = 490;
d3.select('svg') d3.select('svg')
.attr('width', width) .attr('width', width)
.attr('height', height); .attr('height', height);
var worldProjection = d3.geoEquirectangular(); const worldProjection = d3.geoEquirectangular();
const dAttributeFunction = d3.geoPath()
.projection(worldProjection);
d3.select('svg').selectAll('path') d3.select('svg').selectAll('path')
.data(map_json.features) .data(map_json.features)
.enter() .enter()
.append('path') .append('path')
.attr('fill', '#099'); .attr('fill', '#099')
.attr('d', dAttributeFunction);
var dAttributeFunction = d3.geoPath() const dragBehavior = d3.drag()
.projection(worldProjection); .on('start', (event) => {
d3.select('table tr:nth-child(2) td:first-child')
.html(worldProjection.invert([event.x, event.y])[0])
d3.select('table tr:nth-child(2) td:last-child')
.html(worldProjection.invert([event.x, event.y])[1])
d3.selectAll('path').attr('d', dAttributeFunction); d3.selectAll('rect').remove();
d3.select('svg').append('rect')
.attr('x', event.x)
.attr('y', event.y);
})
.on('drag', (event) => {
d3.select('table tr:nth-child(3) td:first-child')
.html(worldProjection.invert([event.x, event.y])[0])
d3.select('table tr:nth-child(3) td:last-child')
.html(worldProjection.invert([event.x, event.y])[1])
d3.select('rect').attr('width', event.x-d3.select('rect').attr('x'))
d3.select('rect').attr('height', event.y-d3.select('rect').attr('y'))
})
d3.select('svg').call(dragBehavior);
d3.select('form').on('submit', (event) => {
event.preventDefault();
d3.selectAll('rect').remove();
const lat1 = d3.select('input:first-child').property('value');
const lng1 = d3.select('input:nth-child(2)').property('value');
const location1 = worldProjection([lat1, lng1]);
const x1 = location1[0];
const y1 = location1[1];
const lat2 = d3.select('input:nth-child(4)').property('value');
const lng2 = d3.select('input:nth-child(5)').property('value');
const location2 = worldProjection([lat2, lng2]);
const x2 = location2[0];
const y2 = location2[1];
d3.select('svg').append('rect')
.attr('fill', '#000')
.attr('x', x1)
.attr('y', y1)
.attr('width', x2-x1)
.attr('height', y2-y1)
});

45
index.html
Unescape View File

@ -1,13 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" dir="ltr"> <html lang="en" dir="ltr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title></title> <title></title>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script src="https://d3js.org/d3.v7.min.js" charset="utf-8"></script>
<script src="https://cdn.rawgit.com/mahuntington/mapping-demo/master/map_data3.js" charset="utf-8"></script> <script src="map_data3.js" charset="utf-8"></script>
</head> </head>
<body> <body>
<svg></svg> <svg></svg>
<script src="app.js" charset="utf-8"></script> <form>
</body> Top Left:
<input type="text" placeholder="latitude"/>
<input type="text" placeholder="longitude"/>
<br/>
Bottom Right:
<input type="text" placeholder="latitude"/>
<input type="text" placeholder="longitude"/>
<input type="submit"/>
</form>
<table border="1">
<tr>
<th>lat</th>
<th>lng</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<script src="app.js" charset="utf-8"></script>
</body>
</html> </html>

129633
map_data.js
View File

File diff suppressed because it is too large Load Diff

163
map_data2.js
View File

File diff suppressed because one or more lines are too long

358
map_data3.js
Unescape View File

@ -6675,364 +6675,6 @@ var map_json = {
] ]
} }
}, },
{
type: "Feature",
id: "BMU",
properties: {
name: "Bermuda"
},
geometry: {
type: "Polygon",
coordinates: [
[
[
-64.7799734332998,
32.3072000581802
],
[
-64.7873319183061,
32.3039237143428
],
[
-64.7946942710173,
32.3032682700388
],
[
-64.8094297981283,
32.3098175728414
],
[
-64.8167896352437,
32.3058845718466
],
[
-64.8101968029642,
32.3022833180511
],
[
-64.7962291465484,
32.2934409732427
],
[
-64.7815086336978,
32.2868973114514
],
[
-64.7997025513437,
32.2796896417328
],
[
-64.8066707691087,
32.2747767569465
],
[
-64.8225587873683,
32.2669111289395
],
[
-64.8287548840306,
32.2669075473817
],
[
-64.8306732143498,
32.2583944840235
],
[
-64.8399924854972,
32.254782282336
],
[
-64.8566090462354,
32.2547740387514
],
[
-64.8682296789446,
32.2616393614322
],
[
-64.8628241459563,
32.2724481933959
],
[
-64.8748651338951,
32.2757120264753
],
[
-64.8717752856644,
32.2819371582026
],
[
-64.8671422127295,
32.2930760547989
],
[
-64.8559068764437,
32.2960321186471
],
[
-64.8597429072279,
32.3015842021933
],
[
-64.8439233486717,
32.3140553852543
],
[
-64.8350242329311,
32.3242161760006
],
[
-64.8338690593672,
32.3294587561557
],
[
-64.8520298651164,
32.3110911879954
],
[
-64.8635922932573,
32.3048469433363
],
[
-64.8686668994079,
32.30910745083
],
[
-64.8721354593415,
32.3041908606301
],
[
-64.8779667328485,
32.3038632800462
],
[
-64.8780046844321,
32.2907757831692
],
[
-64.8849776658292,
32.2819261366004
],
[
-64.8783230004629,
32.2613001418681
],
[
-64.863194968877,
32.2465799485801
],
[
-64.8519819555722,
32.2485519134663
],
[
-64.842311980074,
32.2492123317296
],
[
-64.8388242605209,
32.2475773472534
],
[
-64.8334002575532,
32.2462714714698
],
[
-64.8256389530584,
32.2472637398594
],
[
-64.8205697556026,
32.2531698880328
],
[
-64.8105087275579,
32.2561208974156
],
[
-64.7900177727338,
32.2659446936992
],
[
-64.7745415970416,
32.2718413023427
],
[
-64.7644742436426,
32.2855931353214
],
[
-64.7551803442276,
32.2908326702531
],
[
-64.7423982971436,
32.2996734994024
],
[
-64.7206991797682,
32.3137542201258
],
[
-64.7117851247134,
32.3176823360806
],
[
-64.6962778813133,
32.3275029115532
],
[
-64.6768921127452,
32.3324095397555
],
[
-64.6567136927777,
32.3451776458469
],
[
-64.6532168823499,
32.3494356627941
],
[
-64.6605720384429,
32.3589423487763
],
[
-64.65125819471,
32.3615600906466
],
[
-64.6462011670816,
32.36975169749
],
[
-64.6613227512832,
32.3763135008721
],
[
-64.6690666074397,
32.388444543924
],
[
-64.6834270548595,
32.3854968316788
],
[
-64.6954617672714,
32.3763221285869
],
[
-64.70438689565,
32.3704254760469
],
[
-64.7117569982798,
32.368132600249
],
[
-64.7061764744404,
32.3600110593559
],
[
-64.700531552697,
32.3590601356818
],
[
-64.6940348033967,
32.3640708659835
],
[
-64.6895164826082,
32.3633598579866
],
[
-64.6864150099255,
32.3547797587266
],
[
-64.6824635995504,
32.3540628176846
],
[
-64.6835876652835,
32.3626447677968
],
[
-64.6801998697415,
32.3631199096979
],
[
-64.6672170444687,
32.3597751617473
],
[
-64.6598811264978,
32.3497625771755
],
[
-64.6737331235384,
32.3390281851635
],
[
-64.6887090648183,
32.3342439408053
],
[
-64.706732854446,
32.3429010723036
],
[
-64.7149301576112,
32.3552188753513
],
[
-64.7185967666669,
32.3552239212394
],
[
-64.7214189847314,
32.3518830231342
],
[
-64.7270616067222,
32.3466461715475
],
[
-64.734962460882,
32.3442819830499
],
[
-64.7383521549094,
32.3407216514918
],
[
-64.7411729976333,
32.3311790864627
],
[
-64.7423019216485,
32.323311561213
],
[
-64.7462482354281,
32.318538611581
],
[
-64.7566773739613,
32.3130509130175
],
[
-64.768738200563,
32.3088369816572
],
[
-64.7799734332998,
32.3072000581802
]
]
]
}
},
{ {
type: "Feature", type: "Feature",
id: "BOL", id: "BOL",

Write Preview
Loading…
Cancel
Save