A chloropleth map of all the FP7 projects, showing countries leading and partnering in FP7 projects.
- Open Consortium, http://openconsortium.eu
Last active
December 16, 2015 12:18
-
-
Save pvhee/5433291 to your computer and use it in GitHub Desktop.
FP7 projects
This file contains hidden or 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> | |
| <head> | |
| <title>FP7 Projects</title> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" /> | |
| <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.ie.css" /><![endif]--> | |
| <style> | |
| #map { | |
| width: 100%; | |
| height: 500px; | |
| } | |
| .info { | |
| padding: 6px 8px; | |
| font: 14px/16px Arial, Helvetica, sans-serif; | |
| background: white; | |
| background: rgba(255,255,255,0.8); | |
| box-shadow: 0 0 15px rgba(0,0,0,0.2); | |
| border-radius: 5px; | |
| } | |
| .info h4 { | |
| margin: 0 0 5px; | |
| color: #777; | |
| } | |
| .legend { | |
| text-align: left; | |
| line-height: 18px; | |
| color: #555; | |
| } | |
| .legend i { | |
| width: 18px; | |
| height: 18px; | |
| float: left; | |
| margin-right: 8px; | |
| opacity: 0.7; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script> | |
| <!-- <script type="text/javascript" src="../countries_projects.geo.js"></script> --> | |
| <script type="text/javascript" src="https://gist.github.com/pvhee/322576229b61eda1fa50/raw/92e274de9083e9d2b2a7364510f412841e73b1c7/countries_projects.geo.js"></script> | |
| <script type="text/javascript"> | |
| // var map = L.map('map').setView([37.8, -96], 4); | |
| var map = L.map('map').setView([48.6, 9.14], 4); | |
| var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', { | |
| attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade', | |
| key: 'BC9A493B41014CAABB98F0471D759707', | |
| styleId: 22677 | |
| }).addTo(map); | |
| // control that shows state info on hover | |
| var info = L.control(); | |
| info.onAdd = function (map) { | |
| this._div = L.DomUtil.create('div', 'info'); | |
| this.update(); | |
| return this._div; | |
| }; | |
| info.update = function (props) { | |
| this._div.innerHTML = '<h4>FP7 projects in Europe</h4>' + (props ? | |
| '<b>' + props.name + '</b>' + | |
| '<br />' + props.projects_percapita + ' projects / million' + | |
| '<br/><br />' + props.projects + ' projects as leader' + | |
| '<br/>' + props.projects_partner + ' projects as partner' + | |
| '<br/><br/>Population: ' + props.population + ' million' | |
| : 'Hover over a country'); | |
| }; | |
| info.addTo(map); | |
| // get color depending on population density value | |
| // function getColor(d) { | |
| // return d > 2000 ? '#800026' : | |
| // d > 1000 ? '#BD0026' : | |
| // d > 500 ? '#E31A1C' : | |
| // d > 200 ? '#FC4E2A' : | |
| // d > 100 ? '#FD8D3C' : | |
| // d > 50 ? '#FEB24C' : | |
| // d > 25 ? '#FED976' : | |
| // '#FFEDA0'; | |
| // } | |
| function getColor(d) { | |
| return d > 100 ? '#800026' : | |
| d > 75 ? '#BD0026' : | |
| d > 50 ? '#E31A1C' : | |
| d > 35 ? '#FC4E2A' : | |
| d > 15 ? '#FD8D3C' : | |
| d > 10 ? '#FEB24C' : | |
| d > 5 ? '#FED976' : | |
| '#FFEDA0'; | |
| } | |
| function style(feature) { | |
| return { | |
| weight: 2, | |
| opacity: 1, | |
| color: 'white', | |
| dashArray: '3', | |
| fillOpacity: 0.7, | |
| fillColor: getColor(feature.properties.projects_percapita) | |
| // fillColor: getColor(feature.properties.projects_partner) | |
| }; | |
| } | |
| function highlightFeature(e) { | |
| var layer = e.target; | |
| layer.setStyle({ | |
| weight: 3, | |
| color: '#666', | |
| dashArray: '', | |
| fillOpacity: 0.7 | |
| }); | |
| if (!L.Browser.ie && !L.Browser.opera) { | |
| layer.bringToFront(); | |
| } | |
| info.update(layer.feature.properties); | |
| } | |
| var geojson; | |
| function resetHighlight(e) { | |
| geojson.resetStyle(e.target); | |
| info.update(); | |
| } | |
| function zoomToFeature(e) { | |
| map.fitBounds(e.target.getBounds()); | |
| } | |
| function onEachFeature(feature, layer) { | |
| layer.on({ | |
| mouseover: highlightFeature, | |
| mouseout: resetHighlight, | |
| // click: zoomToFeature | |
| }); | |
| } | |
| geojson = L.geoJson(cordis_countries, { | |
| style: style, | |
| onEachFeature: onEachFeature | |
| }).addTo(map); | |
| map.attributionControl.addAttribution('FP7 data © <a href="http://openconsortium.eu/">Open Consortium</a>'); | |
| var legend = L.control({position: 'bottomright'}); | |
| legend.onAdd = function (map) { | |
| var div = L.DomUtil.create('div', 'info legend'), | |
| grades = [0, 10, 20, 50, 100, 200, 500, 1000], | |
| labels = [], | |
| from, to; | |
| for (var i = 0; i < grades.length; i++) { | |
| from = grades[i]; | |
| to = grades[i + 1]; | |
| labels.push( | |
| '<i style="background:' + getColor(from + 1) + '"></i> ' + | |
| from + (to ? '–' + to : '+')); | |
| } | |
| div.innerHTML = labels.join('<br>'); | |
| return div; | |
| }; | |
| legend.addTo(map); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment