Write a function named setupMapData that takes an array as a parameter and returns an array containing

Fantastic news! We've Found the answer you've been seeking!

Question:

Write a function named "setupMapData" that takes an array as a parameter and returns an array containing the data for a map. Each element in the input array will itself be an array in the format [latitude, longitude, description] where latitude and longitude are floating point numbers and description is a string describing the event at this location. An example input would be [[35.6763257, 139.6993177, "Meiji Shrine"],[35.7101456, 139.8105814, "Skytree"],[35.6950532, 139.7017945, "Godzilla Head"]].

This function will return an array containing only 1 element which is an object containing the data for a map that will be used in the same way as the "data" variable from the plotly documentation. For our application, set the following key-value pairs in the object that is in the array:

A key of "type" mapping to the string "scattermapbox"

This is the type of plot we are creating. Plotly can generate a wide variety of visuals so we need to specify that we are creating a map

A key of "mode" mapping to the string "markers"

This tells plotly that we are placing markers on the map and that it should look for data about these markers in this data object

A key of "marker" mapping to an object with 2 key-value pairs which are a key of "size" mapping to the integer 5 and a key "color" mapping to the string "rgb(255,0,0)"

This sets the style of the markers. We are making red markers of size 5

A key of "lat" containing an array of all the latitudes from the input array in the same order as they appear in the input

A key of "lon" containing an array of all the longitudes from the input array in the same order as they appear in the input

A key of "text" containing an array of all the descriptions from the input array in the same order as they appear in the input

These last 3 key-value pairs specify the location and text for each marker to be placed on the map. The order is important as a single point contains data from all 3 of these at the same index in each array. Anything that alters the order of any of these arrays will corrupt all of our markers

Note that we will use this for parking violations but this function can be reused for any location based data that you want to display on a map (ie. you can reuse this function in part 2 of the project)

findCenter (10 points): Write a function named "findCenter" that takes an array as a parameter in the same format as the previous function and returns an array with two elements representing the latitude and longitude of the center of these locations. This will be used to center our map around our data. To compute the center latitude take the average of the minimum and maximum latitudes from the input. Repeat for longitude.

setupMapLayout (10 points): Write a function named "setupMapLayout" that takes an array as a parameter in the same format as the previous function and returns an object

This function will return an object containing the layout settings for the map that will be used in the same way as the "layout" variable from the plotly documentation. For our application, set the following key-value pairs in the object:

A key of "mapbox" mapping to an object with the mapbox settings. This will be the only key-value pair in the layout and it will contain the following list of pairsA key of "style" mapping to the string "satellite-streets"

This sets the style of our map to satellite images with streets overlayed on the images. For submission in AutoLab you must use this setting, but you are encouraged to try other styles and see the changes to the map. Other options include "satellite", "light", "dark", "bright", "streets", and "basic"

A key of "zoom" mapping to the integer 11

Set the zoom level of the map. You may want to adjust the zoom level while testing as the zoom of 11 is set specifically for the ticket data. The zoom value ranges from 0 to 19. See this for more details on map zoom levels

A key of "center" mapping to an object with keys "lat" and "lon" with values of the latitude and longitude of the center of the input locations as floating point numbers. Call your findCenter function for obtain these values

The map will initially be centered on this location getMapParams (10 points): Write a function named "getMapParams" that takes a JSON formatted string as a parameter and returns all the information needed to create a map in an object with "data" and "layout" as keys mapping to a data array and a layout object respectively. This input JSON string will be in the format of an array of arrays where each inner array is contains [latitude, longitude, description]. Note that this is the same format as the other functions except the input is a JSON string that needs to be parsed instead of a JavaScript array. This function will be responsible for converting from string to array, then call your other functions after converting.