USA: +1 (725) 712-1730 
Sign in
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:
Sample Output Screenshot:
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 –>
