Skip to content

Instantly share code, notes, and snippets.

@viddo
Created October 29, 2014 16:08
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 viddo/06c3954e5f43f9793a1f to your computer and use it in GitHub Desktop.
Save viddo/06c3954e5f43f9793a1f to your computer and use it in GitHub Desktop.
sveriges radio ex
<html>
<head>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css"/>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css"/>
<![endif]-->
<style>
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#map {
width: 100%;
height: 100%;
background: black;
}
#menu {
position: absolute;
top: 21px;
right: 9px;
width: 400px;
height: 60px;
background: transparent;
z-index: 10;
}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 40px;
padding: 10px;
text-align: center;
font: bold 10px "Helvetica", Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
</style>
</head>
<body onLoad="init()">
<div id='map'></div>
<div id='menu'>
<a href="#Firas" id="Firas" class="button Firas">
<img src="http://www.majhost.com/gallery/KremzeekRulz/Nerdiwiki/men.png" />
</a>
<a href="#Iba" id="Iba" class="button Iba">
<img src="http://www.majhost.com/gallery/KremzeekRulz/Nerdiwiki/men.png" />
</a>
<a href="#Labeeb" id="Labeeb" class="button Labeeb">
<img src="http://www.majhost.com/gallery/KremzeekRulz/Nerdiwiki/men.png" />
</a>
<a href="#all" id="all" class="button all">Alla</a>
</div>
<script>
var map;
function init() {
// initiate leaflet map
map = new L.Map('map', {
center: [47, 16],
zoom: 4
})
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);
//här ska ens egen api-url in
var layerUrl = 'http://livsr.cartodb.com/api/v2/viz/bacefd16-5446-11e4-9f57-7054d21a95e5/viz.json';
var sublayers = [];
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function (layer) {
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM testdata",
cartocss: "#testdata{line-color: #FFFFFF; line-width: 2.5;}",
interactivity: "cartodb_id"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
}).on('error', function () {
//log the error
});
//knapparnas funktioner
var LayerActions = {
all: function () {
sublayers[0].setSQL("SELECT * FROM testdata");
return true;
},
Iba: function () {
sublayers[0].setSQL("SELECT * FROM testdata WHERE namn = 'Iba, kvinna 59'");
return true;
},
Labeeb: function () {
sublayers[0].setSQL("SELECT * FROM testdata WHERE namn = 'Labeeb, man 19'");
return true;
},
Firas: function () {
sublayers[0].set({
sql: "SELECT * FROM testdata WHERE namn = 'Firas, man 29'",
});
return true;
}
}
//här är knapparna
$('.button').click(function () {
$('.button').removeClass('selected');
$(this).addClass('selected');
LayerActions[$(this).attr('id')]();
});
}
</script>
</head>
<body onLoad="init()">
<!--<div id='cartodb-map'></div>-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment