Skip to content

Instantly share code, notes, and snippets.

@SylwiaOliwia2

SylwiaOliwia2/index.html

Last active June 3, 2019 17:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SylwiaOliwia2/cf0d679e81a7c8bfee8888189ec364bb to your computer and use it in GitHub Desktop.
Save SylwiaOliwia2/cf0d679e81a7c8bfee8888189ec364bb to your computer and use it in GitHub Desktop.
Download ZIP
Solar Panels added to OSM in UK, beta version
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a GeoJSON polygon</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiIzOTJmMjBiZmI2NGQ2ZjAzODhiMzhiOGI2MTI1YTk4YSJ9.sIOXXU3TPp5dLg_L3cUxhQ';
// create map
var map = L.map('map').setView([52.954, 1.16], 8);
// update postcodes json with values
var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
// TODO: add final destination in the server, where the whole process is being stored
targetUrl = 'https://sylwiamielnicka.com/wp-content/themes/baskerville-child/js/map_shapes/postcodes_updated.json'
fetch(proxyUrl + targetUrl)
.then(response => response.json())
.then(json => {
var geojson_percent = L.geoJson(json // apply colors to postcodes and add them to the map
, { style: {opacity:1, color: '#191a1a', 'weight':1, fillOpacity: 0.9}
, onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name + '<br>' + feature.properties.value_percent.toFixed(2) + '% panels added to OSM.');
if (feature.properties.value_percent == 0) {return layer.setStyle({fillColor:'#404040'})}
else if (feature.properties.value_percent < 10) {return layer.setStyle({fillColor:'#504c4c'})}
else if (feature.properties.value_percent < 20) {return layer.setStyle({fillColor:'#605655'})}
else if (feature.properties.value_percent < 30) {return layer.setStyle({fillColor:'#70605d'})}
else if (feature.properties.value_percent < 40) {return layer.setStyle({fillColor:'#806a64'})}
else if (feature.properties.value_percent < 50) {return layer.setStyle({fillColor:'#907368'})}
else if (feature.properties.value_percent < 60) {return layer.setStyle({fillColor:'#a07d6b'})}
else if (feature.properties.value_percent < 70) {return layer.setStyle({fillColor:'#af866c'})}
else if (feature.properties.value_percent < 80) {return layer.setStyle({fillColor:'#bf916b'})}
else if (feature.properties.value_percent < 90) {return layer.setStyle({fillColor:'#dfa965'})}
else if (feature.properties.value_percent < 100) {return layer.setStyle({fillColor:'#efb85f'})}
else if (feature.properties.value_percent >= 100) {return layer.setStyle({fillColor:'#ffc857'})};
}}).addTo(map);
var geojson_nominal = L.geoJson(json // apply colors to postcodes and add them to the map
, { style: {opacity:1, color: '#191a1a', 'weight':1, fillOpacity: 0.9}
, onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.name + '<br>' + feature.properties.value_nominal + ' panels added to OSM.');
if (feature.properties.value_nominal == 0) {return layer.setStyle({fillColor:'#404040'})}
else if (feature.properties.value_nominal < 10) {return layer.setStyle({fillColor:'#504c4c'})}
else if (feature.properties.value_nominal < 30) {return layer.setStyle({fillColor:'#605655'})}
else if (feature.properties.value_nominal < 50) {return layer.setStyle({fillColor:'#70605d'})}
else if (feature.properties.value_nominal < 100) {return layer.setStyle({fillColor:'#806a64'})}
else if (feature.properties.value_nominal < 150) {return layer.setStyle({fillColor:'#907368'})}
else if (feature.properties.value_nominal < 200) {return layer.setStyle({fillColor:'#a07d6b'})}
else if (feature.properties.value_nominal < 350) {return layer.setStyle({fillColor:'#af866c'})}
else if (feature.properties.value_nominal < 500) {return layer.setStyle({fillColor:'#bf916b'})}
else if (feature.properties.value_nominal < 750) {return layer.setStyle({fillColor:'#dfa965'})}
else if (feature.properties.value_nominal < 1000) {return layer.setStyle({fillColor:'#efb85f'})}
else if (feature.properties.value_nominal >= 1000) {return layer.setStyle({fillColor:'#ffc857'})};
}}).addTo(map);
var baseMaps = {"percent of FIT panels added to OSM": geojson_percent,"Number of panels added to OSM": geojson_nominal};
L.control.layers(baseMaps).addTo(map);
} );
// set pane text_layer as top layer
map.createPane('text_layer');
map.getPane('text_layer').style.zIndex = 650;
// load layers
var style_land = L.tileLayer('https://api.mapbox.com/styles/v1/sylwiamielnicka/cjuzcmscj1zlo1fp9vupl3qu0/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1Ijoic3lsd2lhbWllbG5pY2thIiwiYSI6ImNqdWEzZGd3NDAwbXE0ZHBic2FmczAzZnMifQ.OpE-UY5HM79aKkCrivTQtw');
var style_administrative_names = L.tileLayer('https://api.mapbox.com/styles/v1/sylwiamielnicka/cjuzd03d92kqg1fov80kfonjk/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1Ijoic3lsd2lhbWllbG5pY2thIiwiYSI6ImNqdWEzZGd3NDAwbXE0ZHBic2FmczAzZnMifQ.OpE-UY5HM79aKkCrivTQtw',
{pane: 'text_layer'});
// add layers to the map
style_land.addTo(map);
style_administrative_names.addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment