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

Compare commits

base: mahuntington:master
Branches Tags
mahuntington:polygon
mahuntington:master
..
compare: mahuntington:polygon
Branches Tags
mahuntington:polygon
mahuntington:master

4 Commits
master ... polygon

Author SHA1 Message Date
Matt Huntington dd70521678 convert visual points to coords
3 years ago
Matt Huntington c7af001842 after keypress, enter visual points, reset points array for new polygon on next draw
3 years ago
Matt Huntington 488f3f9d4c draw polygon
3 years ago
Matt Huntington 0ecfb1f7ae removing old functionality
3 years ago
2 changed files with 37 additions and 72 deletions
Show Stats

77
app.js
Unescape View File

@ -16,51 +16,32 @@ d3.select('svg').selectAll('path')
.attr('fill', '#099') .attr('fill', '#099')
.attr('d', dAttributeFunction); .attr('d', dAttributeFunction);
const dragBehavior = d3.drag() let points = [];
.on('start', (event) => { d3.select('svg').on('click', (event)=>{
d3.select('table tr:nth-child(2) td:first-child') points.push([event.x, event.y])
.html(worldProjection.invert([event.x, event.y])[0]) const path = d3.path();
d3.select('table tr:nth-child(2) td:last-child') path.moveTo(points[0][0], points[0][1])
.html(worldProjection.invert([event.x, event.y])[1]) for(let i = 1; i < points.length; i++){
path.lineTo(points[i][0], points[i][1])
d3.selectAll('rect').remove(); }
d3.select('svg').append('rect') path.closePath()
.attr('x', event.x) d3.select('#polygon').remove()
.attr('y', event.y); d3.select('svg')
}) .append('path')
.on('drag', (event) => { .attr('id', 'polygon')
d3.select('table tr:nth-child(3) td:first-child') .attr('fill', 'black')
.html(worldProjection.invert([event.x, event.y])[0]) .attr('d', path)
d3.select('table tr:nth-child(3) td:last-child') })
.html(worldProjection.invert([event.x, event.y])[1]) d3.select('body').on('keydown', (event)=>{
d3.select('tbody').html('');
d3.select('rect').attr('width', event.x-d3.select('rect').attr('x')) const coords = points.map(point => worldProjection.invert(point))
d3.select('rect').attr('height', event.y-d3.select('rect').attr('y')) for(coord of coords){
}) const row = d3.select('tbody')
.append('tr')
d3.select('svg').call(dragBehavior); row.append('td')
.html(coord[0])
d3.select('form').on('submit', (event) => { row.append('td')
event.preventDefault(); .html(coord[1])
}
d3.selectAll('rect').remove(); points = [];
})
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)
});

32
index.html
Unescape View File

@ -8,30 +8,14 @@
</head> </head>
<body> <body>
<svg></svg> <svg></svg>
<form> <table>
Top Left: <thead>
<input type="text" placeholder="latitude"/> <tr>
<input type="text" placeholder="longitude"/> <th>lat</th>
<br/> <th>lng</th>
Bottom Right: </tr>
<input type="text" placeholder="latitude"/> </thead>
<input type="text" placeholder="longitude"/> <tbody></tbody>
<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> </table>
<script src="app.js" charset="utf-8"></script> <script src="app.js" charset="utf-8"></script>
</body> </body>

Write Preview
Loading…
Cancel
Save