Skip to content

Instantly share code, notes, and snippets.

@Pabloska

Pabloska/index.html

Last active January 7, 2016 12:52
Show Gist options
  • Save Pabloska/fb0261ab4613946b98e9 to your computer and use it in GitHub Desktop.
Save Pabloska/fb0261ab4613946b98e9 to your computer and use it in GitHub Desktop.
Download ZIP
World Language IN TRAN
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;font-family: Open Sans;}
#map { width: 100%; height:100%; background: black;}
#menu { position: absolute;float: left; top: 460; left: 10; width: 175px; height:90px; z-index:10;}
#menu a {
border: 1px solid black;
box-shadow: 3px 3px 3px #888888;
opacity: 1;
margin: 10px 7px 0 0;
float: left;
vertical-align: baseline;
width: 175px;
height:50px;
padding: 3px;
text-align: center;
font: bold 13px "Helvetica",Arial;
line-height: normal;
color: #E6E6E6;
border-radius: 4px;
border: 1px solid white;
//background: #E6E6B8;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
#dashboard {
border: 1px solid white;
box-shadow: 3px 3px 3px #888888;
border-radius: 4px;
background: #F4F4F4;
//border-left: 0px solid #000;
height: 440;
font-family: 'Open Sans', sans-serif;
color: white;
//overflow-y: scroll;
padding: 0px;
position: absolute;
left: 10;
text-align: left;
top: 10;
//z-index: 2001;
opacity: 1;
width: 180px;
}
#chart_div {
height: 250px;
width: 250px;
padding: 0px;
}
#a1{
background-image: url("http://migrantreport.org/wp-content/uploads/regions3.png");
}
#a2 {
background-image: url("http://migrantreport.org/wp-content/uploads/coutries7.png");
text-align: center;
}
</style>
<script>
var map;
function init(){
// initiate leaflet map
map = new L.Map('map', {
zoomControl: false,
//attributionControl: false,
center: [15,20],
width: 500,
zoom: 3
});
L.control.scale({
imperial: false,
position: 'topright',
}).addTo(map);
L.control.zoom({
position:'topright'
}).addTo(map);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '<a href="http://migrantreport.org">Map created by MR.</a>'
}).addTo(map);
//http://a{s}.acetate.geoiq.com/tiles/acetate-hillshading/{z}/{x}/{y}.png
//http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png
//http://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png
//*adding first layer (removing interactivity)*
var layer2Url = 'https://migrantreport.cartodb.com/api/v2/viz/70aba8fe-23fa-11e5-a167-0e9d821ea90d/viz.json';
cartodb.createLayer(map, layer2Url,{
cartodb_logo: false,
})
.on('done', function(layer) {
map.addLayer(layer);
//layer.interaction.remove();
//layer.interaction = null;
}).on('error', function() {
//log the error
});
//*adding second layer**
var layerUrl = 'https://migrantreport.cartodb.com/api/v2/viz/67873e48-6c5f-11e5-be72-0e31c9be1b51/viz.json';
var sublayers = [];
cartodb.createLayer(map, layerUrl,{
cartodb_logo: false,
}
)
.addTo(map)
.on('done', function(layer) {
//***Create the sublayer to be toggled
var subLayerOptions = {
sql: "SELECT * FROM norfolkcouncil_languages",
//cartocss: "#norfolkcouncil_languages{ polygon-fill: #245E91; polygon-opacity: 1; line-color: #FFF; line-width: 0.5; line-opacity: 1;"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
sublayer.setInteraction(true);
sublayer.setInteractivity("cartodb_id,name,status,l1,l2,l3,l4,l4,l5,l6,l7,l8,l9,l10,l11,l12,l13,l14");
sublayer.on('featureOver',function(e, latlng, pos, data, subLayerIndex) {
$("#header").html("<h>" + data.name + "</h> ");
$("#event").html("<p>" +"<u>"+'Language Coverage:'+"</u>"+"<br>"+ data.l1 +"<br>"+ data.l2 + "<br>"+data.l3 + "<br>"+data.l4 + "<br>"+data.l5 + "<br>"+data.l6 + "<br>"+data.l7 + "<br>"+data.l8 + "<br>"+data.l9 + "<br>"+data.l10 + "<br>"+data.l11 + "<br>"+data.l12 + "<br>"+data.l13 + "<br>"+data.l14 +"</p> ");
});
}).on('error', function() {
//log the error
});
//higlight selected buttom
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).addClass('selected');
LayerActions[$(this).attr('id')]();
});
//layer actions
var LayerActions = {
a1: function(){
sublayers[0].set({
sql: "SELECT * FROM norfolkcouncil_languages where name='fg'",
//cartocss: "#table_4mi_gis3{ marker-fill: green; }"
});
return true;
},
a2: function(){
sublayers[0].set({
sql: "SELECT * FROM norfolkcouncil_languages",
//cartocss: "#table_4mi_gis3{ marker-fill: green; }"
});
return true;
},
}
}
</script>
</head>
<body onload="init()">
<div id='map'></div>
<div id="dashboard">
<div>
<img src="http://www.south-norfolk.gov.uk/images/INTRAN_logo_sml.gif" alt="migrnats" style="padding:7px;top:5px;border_bottom:0px;float:left;width:165px;height:55px;opacity:0.9">
</div>
<div style ="opacity: 1;font-family: Open Sans;font-size:14;font-weight: bold;color:black;padding: 0px 8px 0px;text-align: center">
<p id="header" style ="border-top:-20px;font-size:20;color:black;font-weight: bold;">Click on the map to display the language coverage.</p>
<p id="event" style ="border-top:-10px;text-align: left"></p>
</div>
<div id="chart_div" style ="padding:0px;"></div>
</div>
<div id='menu'>
<a href="#a1" id="a1" class="button capitals">&bigstar; World's Linguistic Boundaries</a>
<a href="#a2" id="a2" class="button megacities">&#9733; INTRAN Language Coverage</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment