This repository has been archived by the owner on Jan 10, 2023. It is now read-only.
Permalink
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
maps-for-work-samples/samples/maps/OpenWeatherMapLayer/index.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update properties in "feature" variable for weatherItem.coord.lon and weatherItem.coord.lat. Should be weatherItem.coord.Lon and Lat (cap 'L' based on current JSON being returned.
174 lines (159 sloc)
4.66 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Weather layer</title> | |
| <style> | |
| html, body{ | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map-canvas { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .gm-style-iw { | |
| text-align: center; | |
| } | |
| </style> | |
| <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"> | |
| </script> | |
| <script> | |
| var map; | |
| var geoJSON; | |
| var request; | |
| var gettingData = false; | |
| var openWeatherMapKey = "ABC..." | |
| function initialize() { | |
| var mapOptions = { | |
| zoom: 4, | |
| center: new google.maps.LatLng(50,-50) | |
| }; | |
| map = new google.maps.Map(document.getElementById('map-canvas'), | |
| mapOptions); | |
| // Add interaction listeners to make weather requests | |
| google.maps.event.addListener(map, 'idle', checkIfDataRequested); | |
| // Sets up and populates the info window with details | |
| map.data.addListener('click', function(event) { | |
| infowindow.setContent( | |
| "<img src=" + event.feature.getProperty("icon") + ">" | |
| + "<br /><strong>" + event.feature.getProperty("city") + "</strong>" | |
| + "<br />" + event.feature.getProperty("temperature") + "°C" | |
| + "<br />" + event.feature.getProperty("weather") | |
| ); | |
| infowindow.setOptions({ | |
| position:{ | |
| lat: event.latLng.lat(), | |
| lng: event.latLng.lng() | |
| }, | |
| pixelOffset: { | |
| width: 0, | |
| height: -15 | |
| } | |
| }); | |
| infowindow.open(map); | |
| }); | |
| } | |
| var checkIfDataRequested = function() { | |
| // Stop extra requests being sent | |
| while (gettingData === true) { | |
| request.abort(); | |
| gettingData = false; | |
| } | |
| getCoords(); | |
| }; | |
| // Get the coordinates from the Map bounds | |
| var getCoords = function() { | |
| var bounds = map.getBounds(); | |
| var NE = bounds.getNorthEast(); | |
| var SW = bounds.getSouthWest(); | |
| getWeather(NE.lat(), NE.lng(), SW.lat(), SW.lng()); | |
| }; | |
| // Make the weather request | |
| var getWeather = function(northLat, eastLng, southLat, westLng) { | |
| gettingData = true; | |
| var requestString = "http://api.openweathermap.org/data/2.5/box/city?bbox=" | |
| + westLng + "," + northLat + "," //left top | |
| + eastLng + "," + southLat + "," //right bottom | |
| + map.getZoom() | |
| + "&cluster=yes&format=json" | |
| + "&APPID=" + openWeatherMapKey; | |
| request = new XMLHttpRequest(); | |
| request.onload = proccessResults; | |
| request.open("get", requestString, true); | |
| request.send(); | |
| }; | |
| // Take the JSON results and proccess them | |
| var proccessResults = function() { | |
| console.log(this); | |
| var results = JSON.parse(this.responseText); | |
| if (results.list.length > 0) { | |
| resetData(); | |
| for (var i = 0; i < results.list.length; i++) { | |
| geoJSON.features.push(jsonToGeoJson(results.list[i])); | |
| } | |
| drawIcons(geoJSON); | |
| } | |
| }; | |
| var infowindow = new google.maps.InfoWindow(); | |
| // For each result that comes back, convert the data to geoJSON | |
| var jsonToGeoJson = function (weatherItem) { | |
| var feature = { | |
| type: "Feature", | |
| properties: { | |
| city: weatherItem.name, | |
| weather: weatherItem.weather[0].main, | |
| temperature: weatherItem.main.temp, | |
| min: weatherItem.main.temp_min, | |
| max: weatherItem.main.temp_max, | |
| humidity: weatherItem.main.humidity, | |
| pressure: weatherItem.main.pressure, | |
| windSpeed: weatherItem.wind.speed, | |
| windDegrees: weatherItem.wind.deg, | |
| windGust: weatherItem.wind.gust, | |
| icon: "http://openweathermap.org/img/w/" | |
| + weatherItem.weather[0].icon + ".png", | |
| coordinates: [weatherItem.coord.Lon, weatherItem.coord.Lat] | |
| }, | |
| geometry: { | |
| type: "Point", | |
| coordinates: [weatherItem.coord.Lon, weatherItem.coord.Lat] | |
| } | |
| }; | |
| // Set the custom marker icon | |
| map.data.setStyle(function(feature) { | |
| return { | |
| icon: { | |
| url: feature.getProperty('icon'), | |
| anchor: new google.maps.Point(25, 25) | |
| } | |
| }; | |
| }); | |
| // returns object | |
| return feature; | |
| }; | |
| // Add the markers to the map | |
| var drawIcons = function (weather) { | |
| map.data.addGeoJson(geoJSON); | |
| // Set the flag to finished | |
| gettingData = false; | |
| }; | |
| // Clear data layer and geoJSON | |
| var resetData = function () { | |
| geoJSON = { | |
| type: "FeatureCollection", | |
| features: [] | |
| }; | |
| map.data.forEach(function(feature) { | |
| map.data.remove(feature); | |
| }); | |
| }; | |
| google.maps.event.addDomListener(window, 'load', initialize); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="map-canvas"></div> | |
| </body> | |
| </html> |