Data Visualization-and-Data-Modelling-week-11-LAB.pdf
ManzurAshraf1
10 views
9 slides
Jul 13, 2024
Slide 1 of 9
1
2
3
4
5
6
7
8
9
About This Presentation
Data Visualization-and-Data-Modelling-week-11-LAB.pdf
Slide Content
Google Maps platform: 3D
Dr Manzur Ashraf
www.cic.vic.edu.au
Dr Manzur Ashraf
www.cic.vic.edu.au
Presentation title 2
www.cic.vic.edu.au
https://developers.google.com/maps/documentation/javascript/examples/3d/simple-map
www.cic.vic.edu.au
https://developers.google.com/maps/documentation/javascript/examples/3d/simple-map
Presentation title 3
www.cic.vic.edu.au
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Simple Map Demo</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
}
</style>
</head>
<body>
<gmp-map-3d center="37.819852, -122.478549" tilt="67.5"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=alpha&libraries=maps3d"></script>
</body>
</html>
www.cic.vic.edu.au
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Simple Map Demo</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
}
</style>
</head>
<body>
<gmp-map-3d center="37.819852, -122.478549" tilt="67.5"></gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&v=alpha&libraries=maps3d"></script>
</body>
</html>
Presentation title 4
www.cic.vic.edu.au
www.cic.vic.edu.au
Presentation title 5
www.cic.vic.edu.au
www.cic.vic.edu.au
Presentation title 6
www.cic.vic.edu.au
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Polygon Demo</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
}
</style>
</head>
<body>
<gmp-map-3d center="40.7079,-74.0132,100" heading="30" tilt="55" range="5000">
<gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>
<script>
const polygon = document.querySelector('gmp-polygon-3d');
customElements.whenDefined(polygon.localName).then(() => {
polygon.outerCoordinates = [
{lat: 40.7144, lng: -74.0208, altitude: 1000},
{lat: 40.6993, lng: -74.019, altitude: 1000},
{lat: 40.7035, lng: -74.0004, altitude: 1000},
{lat: 40.7144, lng: -74.0208, altitude: 1000}
];
});
</script>
</body>
</html>
www.cic.vic.edu.au
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Polygon Demo</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
}
</style>
</head>
<body>
<gmp-map-3d center="40.7079,-74.0132,100" heading="30" tilt="55" range="5000">
<gmp-polygon-3d altitude-mode="relative-to-ground" fill-color="#ff0000" fill-opacity="0.5" stroke-color="#0000ff" stroke-width="8" extruded><gmp-polygon-3d>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>
<script>
const polygon = document.querySelector('gmp-polygon-3d');
customElements.whenDefined(polygon.localName).then(() => {
polygon.outerCoordinates = [
{lat: 40.7144, lng: -74.0208, altitude: 1000},
{lat: 40.6993, lng: -74.019, altitude: 1000},
{lat: 40.7035, lng: -74.0004, altitude: 1000},
{lat: 40.7144, lng: -74.0208, altitude: 1000}
];
});
</script>
</body>
</html>
Presentation title 7
www.cic.vic.edu.au
www.cic.vic.edu.au
Presentation title 8
www.cic.vic.edu.au
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Polyline Demo</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
}
</style>
</head>
<body>
<gmp-map-3d heading="25" range="2500" tilt="45" center="37.7905,-122.3989,165">
<gmp-polyline-3d altitude-mode="relative-to-ground" stroke-color="#1967d2" stroke-width="10" stroke-opacity="0.75"></gmp-polyline-3d>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>
<script>
const polyline = document.querySelector('gmp-polyline-3d');
customElements.whenDefined(polyline.localName).then(() => {
polyline.coordinates = [
{lat: 37.80515638571346, lng: -122.4032569467164},
{lat: 37.80337073509504, lng: -122.4012878349353},
{lat: 37.79925208843463, lng: -122.3976697250461},
{lat: 37.7989102378512, lng: -122.3983408725656},
{lat: 37.79887832784348, lng: -122.3987094864192},
{lat: 37.79786443410338, lng: -122.4066878788802},
{lat: 37.79549248916587, lng: -122.4032992702785},
{lat: 37.78861484290265, lng: -122.4019489189814},
{lat: 37.78618687561075, lng: -122.398969592545},
{lat: 37.7892310309145, lng: -122.3951458683092},
{lat: 37.7916358762409, lng: -122.3981969390652}
];
});
</script>
</body>
</html>
www.cic.vic.edu.au
<!DOCTYPE html>
<html>
<head>
<title>Photorealistic 3D Maps in Maps JavaScript Polyline Demo</title>
<style>
html,
body {
height:100%;
margin: 0;
padding: 0;
}
gmp-map-3d {
height: 400px;
}
</style>
</head>
<body>
<gmp-map-3d heading="25" range="2500" tilt="45" center="37.7905,-122.3989,165">
<gmp-polyline-3d altitude-mode="relative-to-ground" stroke-color="#1967d2" stroke-width="10" stroke-opacity="0.75"></gmp-polyline-3d>
</gmp-map-3d>
<script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&v=alpha&libraries=maps3d"></script>
<script>
const polyline = document.querySelector('gmp-polyline-3d');
customElements.whenDefined(polyline.localName).then(() => {
polyline.coordinates = [
{lat: 37.80515638571346, lng: -122.4032569467164},
{lat: 37.80337073509504, lng: -122.4012878349353},
{lat: 37.79925208843463, lng: -122.3976697250461},
{lat: 37.7989102378512, lng: -122.3983408725656},
{lat: 37.79887832784348, lng: -122.3987094864192},
{lat: 37.79786443410338, lng: -122.4066878788802},
{lat: 37.79549248916587, lng: -122.4032992702785},
{lat: 37.78861484290265, lng: -122.4019489189814},
{lat: 37.78618687561075, lng: -122.398969592545},
{lat: 37.7892310309145, lng: -122.3951458683092},
{lat: 37.7916358762409, lng: -122.3981969390652}
];
});
</script>
</body>
</html>
www.cic.vic.edu.au
Prepared by Dr Manzur Ashraf
Prepared by Dr Manzur Ashraf
Tags
Categories
TechnologyDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 10
- Slides 9
- Age 507 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
46 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
46 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
34 views
21
Know for Certain
DaveSinNM
21 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views