Question & Answer: Your task is to build a geospatial application that will point out the locations of coffee shops or othe…..

Your task is to build a geospatial application that will point out the locations of coffee shops or other points of interest in a given market. Therefore, when we talk about creating a geospatial application we are focusing on creating a program that will plot specific locations on a map, such as Google Maps, etc. The code should be well-documented and commented throughout.

Any advice or help would be appreciated, thank you.

I have been trying GRASS GIS but it seems old and outdated for this assignment.

Expert Answer

 

Geospatial application:

To Develop this appilication i can use javascript and html.

Program Screenshots:

Question & Answer: Your task is to build a geospatial application that will point out the locations of coffee shops or othe..... 1Question & Answer: Your task is to build a geospatial application that will point out the locations of coffee shops or othe..... 2Question & Answer: Your task is to build a geospatial application that will point out the locations of coffee shops or othe..... 3Question & Answer: Your task is to build a geospatial application that will point out the locations of coffee shops or othe..... 4Question & Answer: Your task is to build a geospatial application that will point out the locations of coffee shops or othe..... 5Question & Answer: Your task is to build a geospatial application that will point out the locations of coffee shops or othe..... 6Question & Answer: Your task is to build a geospatial application that will point out the locations of coffee shops or othe..... 7

Sample Output Screenshot:

Question & Answer: Your task is to build a geospatial application that will point out the locations of coffee shops or othe..... 8

Code to Copy:

<!DOCTYPE html>

<html>

<head>

<!– style for displaying map. –>

<style>

/* Always set the map height explicitly to define the size of the div

* element that contains the map. */

#map {

height: 100%;

}

/* Optional: Makes the sample page fill the window. */

html,

body {

height: 100%;

margin: 0;

padding: 0;

}

#description {

font-family: Roboto;

font-size: 15px;

font-weight: 300;

}

#infowindow-content .title {

font-weight: bold;

}

#infowindow-content {

display: none;

}

#map #infowindow-content {

display: inline;

}

.pac-card {

margin: 10px 10px 0 0;

border-radius: 2px 0 0 2px;

box-sizing: border-box;

-moz-box-sizing: border-box;

outline: none;

box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

background-color: #fff;

font-family: Roboto;

}

#pac-container {

padding-bottom: 12px;

margin-right: 12px;

}

.pac-controls {

display: inline-block;

padding: 5px 11px;

}

.pac-controls label {

font-family: Roboto;

font-size: 13px;

font-weight: 300;

}

#pac-input {

background-color: #fff;

font-family: Roboto;

font-size: 15px;

font-weight: 300;

margin-left: 12px;

padding: 0 11px 0 13px;

text-overflow: ellipsis;

width: 400px;

}

#pac-input:focus {

border-color: #4d90fe;

}

#title {

color: #fff;

background-color: #4d90fe;

font-size: 15px;

font-weight: 500;

padding: 6px 12px;

}

.pac-container {

z-index: 100000;

}

</style>

<!– This is google API key for Develop map based application in javascript –>

<script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyAw4BDL3VaeHWw1q53neYkp2rKw2ZHgT7k&libraries=places”>

</script>

</head>

<!– Display the map with specified size –>

<div id=”map” style=”width: 100%; height: 600px;”></div>

<script>

//Alert box shows click on map to choose location.

alert(‘Click on the map to place a pointer on desired location’);

//Some location to point out the marker on the map.

var locations = [

{

‘name’: ‘FedEx coffee Shop’,

‘lat’: 35.205148,

‘lan’: -89.797832

},

{

‘name’: ‘Shop no:420’,

‘lat’: 35.6005487,

‘lan’: -89.600465

},

{

‘name’: ‘Shop Tasty’,

‘lat’: 35.7005487,

‘lan’: -89.700465

},

{

‘name’: ‘Market’,

‘lat’:35.8005487,

‘lan’:-89.800465

},

]

//Initial Map loading with specified latitude and langitude.

var map = new google.maps.Map(document.getElementById(‘map’), {

zoom: 8,

center: new google.maps.LatLng(35.205148, -89.797832),

mapTypeId: google.maps.MapTypeId.ROADMAP,

});

//Function for Add marker on specified postion.

google.maps.event.addListener(map, ‘click’, function (event) {

placeMarker(event.latLng);

});

//Function for place the marker on map.

function placeMarker(location) {

var marker = new google.maps.Marker({

position: location,

map: map

});

}

var infowindow = new google.maps.InfoWindow();

//Dipplaying the makers on the map for above specified locations.

var marker, i;

for (i = 0; i < locations.length; i++) {

marker = new google.maps.Marker({

position: new google.maps.LatLng(locations[i].lat, locations[i].lan),

map: map,

// icon: ‘assets/images/1.png’

})

//function for getting info about the maker when click on it.

google.maps.event.addListener(marker, ‘click’, (function (marker, i) {

return function () {

infowindow.setContent(locations[i].name);

infowindow.open(map, marker);

}

})(marker, i));

}

</script>

</html>

<!– End pf the code –>

Still stressed from student homework?
Get quality assistance from academic writers!