<!DOCTYPE html>
<html lang="en">
<!--//blog.webkid.io/maps-with-leaflet-and-topojson/-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="EU map: leaflet">
<meta name="keywords" content="openness">
<meta name="author" content="Michal Škop">
<!-- <link type="image/x-icon" href="/images/favicon.ico" rel="shortcut icon">-->
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/superhero/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">-->
<title>EU map</title>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
</head>
<body>
<style>
#worldmap{
background: white;
height: 100%;
width: 100%;
}
#worldmap-container {
width: 100%;
height: 550px;
border: 1px solid #CCC;
}
</style>
<script>
countries = {};
</script>
<div class="container">
<!-- Page Content -->
<!-- map and categories -->
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<div id="worldmap-container">
<div id="worldmap"></div>
</div>
</div>
</div>
<!-- map js -->
<script src="//cdn.bootcss.com/chroma-js/1.1.1/chroma.min.js"></script>
<script src="//cdn.bootcss.com/topojson/1.6.19/topojson.min.js"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="//cdn.bootcss.com/d3/3.5.6/d3.min.js"></script>
<script src="map.js"></script>
</div>
</body>
</html>
# create dicti of EU member states
import json
import csv
ms = []
with open("member_states.csv") as fin:
csvd = csv.DictReader(fin)
for row in csvd:
ms.append(row)
with open("countries.json") as fin:
cs = json.load(fin)
countries = []
attrs1 = ['population','latitude','longitude','name','code']
for m in ms:
if m['code'] == 'el':
m['code'] = 'gr'
if m['code'] == 'uk':
m['code'] = 'gb'
it = {}
for attr in attrs1:
it[attr] = cs[m['code']][attr]
it['another_name:original_name'] = m['another_name:original_name']
countries.append(it)
print(countries)
//http://blog.webkid.io/maps-with-leaflet-and-topojson/
// Leaflet doesn't know anything about TopoJSON, so we need to extend it in order to be able to add TopoJSON directly as a tilelayer.k
// https://gist.github.com/rclark/5779673
L.TopoJSON = L.GeoJSON.extend({
addData: function(jsonData) {
if (jsonData.type === "Topology") {
for (key in jsonData.objects) {
geojson = topojson.feature(jsonData, jsonData.objects[key]);
L.GeoJSON.prototype.addData.call(this, geojson);
}
}
else {
L.GeoJSON.prototype.addData.call(this, jsonData);
}
}
});
(function(){
'use strict'
var map = L.map('worldmap',{maxZoom:10,minZoom:1}),
topoLayer = new L.TopoJSON()//, //new TopoJSON layer
//$countryName = $('.country-name')/*,
//color to the scale and the input range
/*colorScale = chroma
.scale(['#D5E3FF', '#003171'])
.domain([0,1])*/;
/*L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
attribution: 'CC-BY Michal Škop | Map tiles by CartoDB, under CC BY 3.0. Data by OpenStreetMap, under ODbL.'
}).addTo(map);*/
map.setView([51.4380436,13.390182], 4);
//we load our countries.topo.json file via ajax and add the data to the layer.
$.getJSON('member_states.json', function(data) {
countries = data;
$.getJSON('countries.topo.json').done(addTopoData);
});
function addTopoData(topoData){
topoLayer.addData(topoData);
topoLayer.addTo(map);
topoLayer.eachLayer(handleLayer);
}
function handleLayer(layer){
var code = layer.feature.properties.code;
if (typeof(countries[code]) != 'undefined') {
var fillColor = "#003399";
} else {
var fillColor = "#525252";
}
layer.setStyle({
fillColor : fillColor,
fillOpacity: .5,
color:'#555',
weight:1,
opacity:.5
});
layer.on({
mouseover : enterLayer,
mouseout: leaveLayer,
click: onMapClick
});
}
function onMapClick(){
var code = this.feature.properties.code;
if (typeof(countries[code]) != 'undefined') {
window.location = 'explore?cc=' + code
}
}
function enterLayer(){
var countryName = this.feature.properties.code + ": " + this.feature.properties.name;
//$countryName.text(countryName).show();
this.bringToFront();
this.setStyle({
weight:2,
opacity: 1
});
if (typeof(countries[this.feature.properties.code]) != 'undefined') {
this.setStyle({
fillColor : "#FFCC00"
})
}
}
function leaveLayer(){
//$countryName.hide();
this.bringToBack();
this.setStyle({
weight:1,
opacity:0.5
});
if (typeof(countries[this.feature.properties.code]) != 'undefined') {
this.setStyle({
fillColor : "#003399"
})
}
}
}());
name,another_name:original_name,another_name:official_name,code
Belgium,Belgique/België,Kingdom of Belgium,be
Bulgaria,България,Republic of Bulgaria,bg
Czech Republic,Česká republika,Czech Republic,cz
Denmark,Danmark,Kingdom of Denmark,dk
Germany,Deutschland,Federal Republic of Germany,de
Estonia,Eesti,Republic of Estonia,ee
Ireland,Éire/Ireland,Ireland,ie
Greece,Ελλάδα,Hellenic Republic,el
Spain,España,Kingdom of Spain,es
France,France,French Republic,fr
Croatia,Hrvatska,Republic of Croatia,hr
Italy,Italia,Italian Republic,it
Cyprus,Κύπρος,Republic of Cyprus,cy
Latvia,Latvija,Republic of Latvia,lv
Lithuania,Lietuva,Republic of Lithuania,lt
Luxembourg,Luxembourg,Grand Duchy of Luxembourg,lu
Hungary,Magyarország,Hungary,hu
Malta,Malta,Republic of Malta,mt
Netherlands,Nederland,Kingdom of the Netherlands,nl
Austria,Österreich,Republic of Austria,at
Poland,Polska,Republic of Poland,pl
Portugal,Portugal,Portuguese Republic,pt
Romania,România ,Romania,ro
Slovenia,Slovenija,Republic of Slovenia,si
Slovakia,Slovensko,Slovak Republic,sk
Finland,Suomi/Finland,Republic of Finland,fi
Sweden,Sverige,Kingdom of Sweden,se
United Kingdom,United Kingdom,United Kingdom of Great Britain and Northern Ireland ,uk
{
"de": {
"population": "81305856",
"name": "Germany",
"code": "de",
"longitude": "9",
"latitude": "51",
"another_name:original_name": "Deutschland"
},
"es": {
"population": "47042984",
"name": "Spain",
"code": "es",
"longitude": "-4",
"latitude": "40",
"another_name:original_name": "España"
},
"sk": {
"population": "5483088",
"name": "Slovakia",
"code": "sk",
"longitude": "19.5",
"latitude": "48.6666666667",
"another_name:original_name": "Slovensko"
},
"hr": {
"population": "4480043",
"name": "Croatia",
"code": "hr",
"longitude": "15.5",
"latitude": "45.1666666667",
"another_name:original_name": "Hrvatska"
},
"cz": {
"population": "10177300",
"name": "Czech Republic",
"code": "cz",
"longitude": "15.5",
"latitude": "49.75",
"another_name:original_name": "Česká republika"
},
"ro": {
"population": "21848504",
"name": "Romania",
"code": "ro",
"longitude": "25",
"latitude": "46",
"another_name:original_name": "România "
},
"bg": {
"population": "7037935",
"name": "Bulgaria",
"code": "bg",
"longitude": "25",
"latitude": "43",
"another_name:original_name": "България"
},
"at": {
"population": "8219743",
"name": "Austria",
"code": "at",
"longitude": "13.3333333333",
"latitude": "47.3333333333",
"another_name:original_name": "Österreich"
},
"it": {
"population": "61261254",
"name": "Italy",
"code": "it",
"longitude": "12.8333333333",
"latitude": "42.8333333333",
"another_name:original_name": "Italia"
},
"cy": {
"population": "1138071",
"name": "Cyprus",
"code": "cy",
"longitude": "33",
"latitude": "35",
"another_name:original_name": "Κύπρος"
},
"lu": {
"population": "509074",
"name": "Luxembourg",
"code": "lu",
"longitude": "6.1666666667",
"latitude": "49.75",
"another_name:original_name": "Luxembourg"
},
"mt": {
"population": "409836",
"name": "Malta",
"code": "mt",
"longitude": "14.5833333333",
"latitude": "35.8333333333",
"another_name:original_name": "Malta"
},
"dk": {
"population": "5543453",
"name": "Denmark",
"code": "dk",
"longitude": "10",
"latitude": "56",
"another_name:original_name": "Danmark"
},
"nl": {
"population": "16730632",
"name": "Netherlands",
"code": "nl",
"longitude": "5.75",
"latitude": "52.5",
"another_name:original_name": "Nederland"
},
"be": {
"population": "10438353",
"name": "Belgium",
"code": "be",
"longitude": "4",
"latitude": "50.8333333333",
"another_name:original_name": "Belgique/België"
},
"ee": {
"population": "1274709",
"name": "Estonia",
"code": "ee",
"longitude": "26",
"latitude": "59",
"another_name:original_name": "Eesti"
},
"fr": {
"population": "65630692",
"name": "France",
"code": "fr",
"longitude": "2",
"latitude": "46",
"another_name:original_name": "France"
},
"se": {
"population": "9103788",
"name": "Sweden",
"code": "se",
"longitude": "15",
"latitude": "62",
"another_name:original_name": "Sverige"
},
"lt": {
"population": "3525761",
"name": "Lithuania",
"code": "lt",
"longitude": "24",
"latitude": "56",
"another_name:original_name": "Lietuva"
},
"hu": {
"population": "9958453",
"name": "Hungary",
"code": "hu",
"longitude": "20",
"latitude": "47",
"another_name:original_name": "Magyarország"
},
"gb": {
"population": "63047162",
"name": "United Kingdom",
"code": "gb",
"longitude": "-2",
"latitude": "54",
"another_name:original_name": "United Kingdom"
},
"lv": {
"population": "2191580",
"name": "Latvia",
"code": "lv",
"longitude": "25",
"latitude": "57",
"another_name:original_name": "Latvija"
},
"pl": {
"population": "38415284",
"name": "Poland",
"code": "pl",
"longitude": "20",
"latitude": "52",
"another_name:original_name": "Polska"
},
"si": {
"population": "1996617",
"name": "Slovenia",
"code": "si",
"longitude": "14.8166666667",
"latitude": "46.1166666667",
"another_name:original_name": "Slovenija"
},
"ie": {
"population": "4722028",
"name": "Ireland",
"code": "ie",
"longitude": "-8",
"latitude": "53",
"another_name:original_name": "Éire/Ireland"
},
"gr": {
"population": "10767827",
"name": "Greece",
"code": "gr",
"longitude": "22",
"latitude": "39",
"another_name:original_name": "Ελλάδα"
},
"pt": {
"population": "10781459",
"name": "Portugal",
"code": "pt",
"longitude": "-8",
"latitude": "39.5",
"another_name:original_name": "Portugal"
},
"fi": {
"population": "5262930",
"name": "Finland",
"code": "fi",
"longitude": "26",
"latitude": "64",
"another_name:original_name": "Suomi/Finland"
}
}