TimJMartin · February 5, 2019 19:47
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html>
 <head>
 <title>API Workshop</title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
 <style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
 </style>
 </head>
 <body>

 <div id="map"></div>

 <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
 <script>
    var copyrightStatement = '&copy; Crown copyright and database rights ' + new Date().getFullYear() + ' Ordnance Survey.';

    var map = L.map('map').setView([ 52.567, -1.485 ], 10);
    var geojsonLayer;

    L.tileLayer('PUT OS MAPS RESOURCE URL IN HERE', {
        maxZoom: 18,
        minZoom: 7,
        attribution: copyrightStatement
    }).addTo(map);

    map.on('moveend', function() { 
        getWeatherData()
    });

    function getWeatherData() {
        var bounds = map.getBounds();
        var min = bounds.getSouthWest();
        var max = bounds.getNorthEast();
        var minlng = min.lng;
        var minlat = min.lat;
        var maxlng = max.lng;
        var maxlat = max.lat;
        var zoom = map.getZoom();
        var weatherURL = `PUT OPEN WEATHER API RESOURCE URL IN HERE`

        fetch(weatherURL, {
            method: 'get'
        }).then(function(response) {
            return response.json()
        }).then(function(jsonData) {
            var geoJSONFC = {
                "type": "FeatureCollection",
                "features": []
            }
            for (var i = 0; i < jsonData.list.length; i++) {
                var feature = {
                    type: "Feature",
                    properties: {
                        city: jsonData.list[i].name,
                        weather: jsonData.list[i].weather[0].main,
                        temperature: jsonData.list[i].main.temp,
                        min: jsonData.list[i].main.temp_min,
                        max: jsonData.list[i].main.temp_max,
                        humidity: jsonData.list[i].main.humidity,
                        pressure: jsonData.list[i].main.pressure,
                        windSpeed: jsonData.list[i].wind.speed,
                        windDegrees: jsonData.list[i].wind.deg,
                        windGust: jsonData.list[i].wind.gust,
                        iconSize: [85, 90],
                        iconAnchor: [38, 86],
                        popupAnchor: [0, -80],
                        icon: "http://openweathermap.org/img/w/"
                            + jsonData.list[i].weather[0].icon  + ".png",
                        coordinates: [jsonData.list[i].coord.Lon, jsonData.list[i].coord.Lat]
                    },
                    geometry: {
                        type: "Point",
                        coordinates: [jsonData.list[i].coord.Lon, jsonData.list[i].coord.Lat]
                    }
                };
                geoJSONFC.features.push(feature)                
            }
            if (geojsonLayer) { geojsonLayer.remove(); }

            var layerGroup = L.geoJson(geoJSONFC, {
                onEachFeature: function (feature) {
                        var logoMarkerStyle = L.Icon.extend({
                                options: {
                                iconSize: [85, 90],
                                iconAnchor: [38, 86],
                                popupAnchor: [0, -80]
                            }
                        });
                        var logoMarker = new logoMarkerStyle({iconUrl: feature.properties.icon});
                        var lat = feature.geometry.coordinates[1];
                        var lon = feature.geometry.coordinates[0];
                        L.marker([lat,lon],{icon: logoMarker}).bindPopup('<p><strong>City:</strong> '+feature.properties.city+'</p><p><strong>Weather:</strong> '+feature.properties.weather+'</p>').addTo(map);
                }
            });
        }).catch(function(err) {
            console.log(err)
        });
    }
    getWeatherData()
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>API Workshop</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<div id="map"></div>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
	<script>
	var copyrightStatement = '© Crown copyright and database rights ' + new Date().getFullYear() + ' Ordnance Survey.';

	var map = L.map('map').setView([ 52.567, -1.485 ], 10);
	var geojsonLayer;

	L.tileLayer('PUT OS MAPS RESOURCE URL IN HERE', {
	maxZoom: 18,
	minZoom: 7,
	attribution: copyrightStatement
	}).addTo(map);

	map.on('moveend', function() {
	getWeatherData()
	});

	function getWeatherData() {
	var bounds = map.getBounds();
	var min = bounds.getSouthWest();
	var max = bounds.getNorthEast();
	var minlng = min.lng;
	var minlat = min.lat;
	var maxlng = max.lng;
	var maxlat = max.lat;
	var zoom = map.getZoom();
	var weatherURL = `PUT OPEN WEATHER API RESOURCE URL IN HERE`

	fetch(weatherURL, {
	method: 'get'
	}).then(function(response) {
	return response.json()
	}).then(function(jsonData) {
	var geoJSONFC = {
	"type": "FeatureCollection",
	"features": []
	}
	for (var i = 0; i < jsonData.list.length; i++) {
	var feature = {
	type: "Feature",
	properties: {
	city: jsonData.list[i].name,
	weather: jsonData.list[i].weather[0].main,
	temperature: jsonData.list[i].main.temp,
	min: jsonData.list[i].main.temp_min,
	max: jsonData.list[i].main.temp_max,
	humidity: jsonData.list[i].main.humidity,
	pressure: jsonData.list[i].main.pressure,
	windSpeed: jsonData.list[i].wind.speed,
	windDegrees: jsonData.list[i].wind.deg,
	windGust: jsonData.list[i].wind.gust,
	iconSize: [85, 90],
	iconAnchor: [38, 86],
	popupAnchor: [0, -80],
	icon: "http://openweathermap.org/img/w/"
	+ jsonData.list[i].weather[0].icon + ".png",
	coordinates: [jsonData.list[i].coord.Lon, jsonData.list[i].coord.Lat]
	},
	geometry: {
	type: "Point",
	coordinates: [jsonData.list[i].coord.Lon, jsonData.list[i].coord.Lat]
	}
	};
	geoJSONFC.features.push(feature)
	}
	if (geojsonLayer) { geojsonLayer.remove(); }

	var layerGroup = L.geoJson(geoJSONFC, {
	onEachFeature: function (feature) {
	var logoMarkerStyle = L.Icon.extend({
	options: {
	iconSize: [85, 90],
	iconAnchor: [38, 86],
	popupAnchor: [0, -80]
	}
	});
	var logoMarker = new logoMarkerStyle({iconUrl: feature.properties.icon});
	var lat = feature.geometry.coordinates[1];
	var lon = feature.geometry.coordinates[0];
	L.marker([lat,lon],{icon: logoMarker}).bindPopup('<p><strong>City:</strong> '+feature.properties.city+'</p><p><strong>Weather:</strong> '+feature.properties.weather+'</p>').addTo(map);
	}
	});
	}).catch(function(err) {
	console.log(err)
	});
	}
	getWeatherData()
	</script>

	</body>
	</html>