diff --git a/MAPS.md b/MAPS.md index 0601d91..24e970c 100644 --- a/MAPS.md +++ b/MAPS.md @@ -219,6 +219,8 @@ d3.selectAll('path').attr('d', dAttributeFunction); ## Create a rectangular overlay based on coordinates entered into a form +First, let's create a form for the user to enter lat/lng coordinates for the top/left and bottom/right portions of the box: + ```html
``` +- Create a submit handler for the form +- Prevent its default behavior of submitting so we stay on the page +- Remove any rectangles that may have previously been drawn + +```js +d3.select('form').on('submit', (event) => { //set up a submit handler on the form + event.preventDefault(); // stop the form from submitting +}) +``` + +At the bottom of the submit handler, retrieve what the user entered in the inputs for the top left coordinate: + +```js +const lat1 = d3.select('input:first-child').property('value'); //get first latitude input +const lng1 = d3.select('input:nth-child(2)').property('value'); //get first longitude input +``` + +Now we'll use `worldProjection()` like our previous scales to convert a data point into pixel coordinates. It takes as a parameter, an array containing a latitude value and a longitude value (`[lat,lng]`). It returns an array containing x and y coordinates (`[x,y]`). Place the following at the bottom of your submit handler: + +```js +const location1 = worldProjection([lat1, lng1]); //convert these into pixel coordinates +const x1 = location1[0]; //reassign for ease of reading +const y1 = location1[1]; +``` + +Do the same for the second for bottom right coordinate inputs (keep in mind, in the html the `