diff --git a/MAPS.md b/MAPS.md index 4f23bd1..2471dce 100644 --- a/MAPS.md +++ b/MAPS.md @@ -8,6 +8,7 @@ The topics that we will cover in this chapter include: 1. Generate a `` using a projection and the GeoJSON data 1. Create a rectangular overlay based on coordinates entered into a form 1. Draw a rectangle on the map and display its map coordinates +1. Draw a polygon on the map and display its map coordinates In this section we'll generate `` elements from GeoJSON data that will draw a map of the world @@ -421,6 +422,83 @@ const dragBehavior = d3.drag() //set up the behavior d3.select('svg').call(dragBehavior); //atach dragBehavior to the svg ``` +## Draw a polygon on the map and display its map coordinates + +```html + + + + + + + + + + + + + + + + + + +
latlng
+ + + +``` + +```js +const width = 960; +const height = 490; + +d3.select('svg') + .attr('width', width) + .attr('height', height); + +const worldProjection = d3.geoEquirectangular(); +const dAttributeFunction = d3.geoPath() + .projection(worldProjection); + +d3.select('svg').selectAll('path') + .data(map_json.features) + .enter() + .append('path') + .attr('fill', '#099') + .attr('d', dAttributeFunction); + +let points = []; +d3.select('svg').on('click', (event)=>{ + points.push([event.x, event.y]) + const path = d3.path(); + path.moveTo(points[0][0], points[0][1]) + for(let i = 1; i < points.length; i++){ + path.lineTo(points[i][0], points[i][1]) + } + path.closePath() + d3.select('#polygon').remove() + d3.select('svg') + .append('path') + .attr('id', 'polygon') + .attr('fill', 'black') + .attr('d', path) +}) +d3.select('body').on('keydown', (event)=>{ + d3.select('tbody').html(''); + const coords = points.map(point => worldProjection.invert(point)) + for(coord of coords){ + const row = d3.select('tbody') + .append('tr') + row.append('td') + .html(coord[0]) + row.append('td') + .html(coord[1]) + } + points = []; +}) +``` + ## Conclusion In this section we've covered how to use D3 to create a projection and render GeoJSON data as a map, and we've learned about using different projects to visualize the world. This can be helpful when displaying populations or perhaps average rainfall of various regions. Congratulations! You've made it to the end of this book. Now go off and create amazing visualizations.