Drone View
A Web App that finds and displays YouTube Drone View videos to the users when they select an area on the map
Technologies Used:
- Google Maps API
- YouTube API
- Git/GitHub
How This Works
<script src="./mapInit.js"></script>First we generate the map with Google Maps API and load the Geojson data.
Then we style the map and add Event Listeners for all the polygon geodata such as "mouseover" / "mouseout" / "click".
When the user clicks on a polygon area the searchArea() function is called with the YouTube API URL as a parameter.
<script src="./videoResults.js"></script>We now fetch the data from the URL we passed and we wait 1s for the json data to load.
From the json data we get the YouTube video URLs / video titles / thumbnail links and show them on the results area.
Finally we get set onClick events for every result and create an iframe for every video URL we got.
Special credits to CodeForGermany for sharing geojson data