Question
Create a file named map.js in the same directory as index.html and in it write a function named loadMap() that will set up a map
Create a file named "map.js" in the same directory as index.html and in it write a function named loadMap() that will set up a map based to be displayed on your page. Note that loadMap is called from the HTML file once the page is loaded. Also notice that the empty div in the HTML that will contain the map had an id of "map". Now, follow the basic example from the plotly documentation to get familiar with what we're about to do and to see a map in your HTML.
Now that the map is being displayed and the project is setup it's time for you to write some code that will enable you to read a JSON string of locations with descriptions and place a marker on the map for each of them. Write the following functions in map.js:
setupMapData : 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 : 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 : 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.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started