Created
July 15, 2016 15:09
-
-
Save simongle/9fbd24766c697e84f6952d3a96972732 to your computer and use it in GitHub Desktop.
Turkey General Elections 2007-2015
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>Turkey Election Results 2007 - 2015</title> | |
| <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, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body, html { | |
| min-height: 100%; | |
| height: 100%; | |
| } | |
| #map { | |
| border-top:1px solid rgba(0, 0, 0, .2); | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| .layers { | |
| position: absolute; | |
| right: 20px; | |
| top: 20px; | |
| z-index: 10; | |
| box-shadow: rgba(0,0,0,.2) 0 0 4px 2px; | |
| background: #fff; | |
| border: 1px solid #999; | |
| width: auto; | |
| overflow: hidden; | |
| border-radius: 4px; | |
| padding: 20px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| font-family: Helvetica,Arial; | |
| color: #666; | |
| } | |
| .layers li { | |
| margin-bottom: 8px; | |
| } | |
| .layers li:last-child { | |
| margin-bottom: 0; | |
| } | |
| .layers label, .layers input { | |
| display: inline-block; | |
| vertical-align: middle; | |
| cursor: pointer; | |
| } | |
| .layers input { | |
| margin-right: 8px; | |
| -webkit-appearance: none; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| border: 2px solid #999; | |
| position: relative; | |
| } | |
| .layers input:focus { | |
| outline: none; | |
| } | |
| .layers input:checked:before { | |
| content:""; | |
| width: 4px; | |
| height: 4px; | |
| position: absolute; | |
| display: inline-block; | |
| left: 50%; | |
| top: 50%; | |
| margin-left: -2px; | |
| margin-top: -2px; | |
| background: #999; | |
| border-radius: 50%; | |
| } | |
| .layers .layer input { | |
| border-color: #42a4dc; | |
| } | |
| .layers .layer input:checked:before { | |
| background: #42a4dc; | |
| } | |
| .layers h2 { | |
| margin-bottom: 12px; | |
| color: #333; | |
| } | |
| #turkish_election_parties { | |
| polygon-opacity: 0.7; | |
| line-color: #FFF; | |
| line-width: 0.5; | |
| line-opacity: 1; | |
| } | |
| #map div.cartodb-legend.category ul li { | |
| font-size: 14px; | |
| } | |
| </style> | |
| <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <aside class="layers"> | |
| <h2>Select an Election Year</h2> | |
| <ul> | |
| <li class="layer"> | |
| <input type="radio" id="election2007" name="layer"> | |
| <label for="election2007">2007</label> | |
| </li> | |
| <li class="layer"> | |
| <input type="radio" id="election2011" name="layer"> | |
| <label for="election2011">2011</label> | |
| </li> | |
| <li class="layer"> | |
| <input type="radio" id="election2015" name="layer"> | |
| <label for="election2015">2015</label> | |
| </li> | |
| </ul> | |
| </aside> | |
| <div class='cartodb-legend category'> | |
| <ul> | |
| <li> | |
| <div class="bullet" style="background: #FF6600"></div> Justice and Development Party (AKP) | |
| </li> | |
| <li> | |
| <div class="bullet" style="background: #B81609"></div> Republican People's Party (CHP) | |
| </li> | |
| <li> | |
| <div class="bullet" style="background: #B2DF8A"></div> People's Democratic Party (HDP) | |
| </li> | |
| <li> | |
| <div class="bullet" style="background: #33A02C"></div> Nationalist Movement Party (MHP) | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- include cartodb.js library --> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script> | |
| $( document ).ready(function() { | |
| $('#election2007').prop( "checked", true ); | |
| map = new L.Map('map', { | |
| center: [39.189690821096804, 35.5078125] | |
| , zoom: 5 | |
| , scrollWheelZoom: false | |
| }); | |
| var basemap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>' | |
| }).addTo(map); | |
| // Layers | |
| window.layers = { | |
| 'election2007': { | |
| sql: 'SELECT * FROM turkish_election_parties', | |
| cartocss: "#turkish_election_parties[election_2007='AKP'] { polygon-fill: #FF6600; } #turkish_election_parties[election_2007='CHP'] { polygon-fill: #B81609; } #turkish_election_parties[election_2007='LKP'] { polygon-fill: #B2DF8A; } #turkish_election_parties[election_2007='MHP'] { polygon-fill: #33A02C; }#turkish_election_parties::labels { text-name: [district]; text-face-name: 'DejaVu Sans Book'; text-size: 12; text-label-position-tolerance: 10; text-fill: #000; text-halo-fill: #FFF; text-halo-radius: 1; text-dy: -10; text-allow-overlap: false; text-placement: point; text-placement-type: simple; }" | |
| }, | |
| 'election2011': { | |
| sql: 'SELECT * FROM turkish_election_parties', | |
| cartocss: "#turkish_election_parties[election_2011='AKP'] { polygon-fill: #FF6600; } #turkish_election_parties[election_2011='CHP'] { polygon-fill: #B81609; } #turkish_election_parties[election_2011='LKP'] { polygon-fill: #B2DF8A; } #turkish_election_parties[election_2011='MHP'] { polygon-fill: #33A02C; }#turkish_election_parties::labels { text-name: [district]; text-face-name: 'DejaVu Sans Book'; text-size: 12; text-label-position-tolerance: 10; text-fill: #000; text-halo-fill: #FFF; text-halo-radius: 1; text-dy: -10; text-allow-overlap: false; text-placement: point; text-placement-type: simple; }" | |
| }, | |
| 'election2015': { | |
| sql: 'SELECT * FROM turkish_election_parties', | |
| cartocss: "#turkish_election_parties[election_2015='AKP'] { polygon-fill: #FF6600; } #turkish_election_parties[election_2015='CHP'] { polygon-fill: #B81609; } #turkish_election_parties[election_2015='LKP'] { polygon-fill: #B2DF8A; } #turkish_election_parties[election_2015='MHP'] { polygon-fill: #33A02C; }#turkish_election_parties::labels { text-name: [district]; text-face-name: 'DejaVu Sans Book'; text-size: 12; text-label-position-tolerance: 10; text-fill: #000; text-halo-fill: #FFF; text-halo-radius: 1; text-dy: -10; text-allow-overlap: false; text-placement: point; text-placement-type: simple; }" | |
| } | |
| } | |
| var layer2007 = layers.election2007, | |
| layer2011 = layers.election2011, | |
| layer2015 = layers.election2015; | |
| // Initialize with 2007 layer | |
| cartodb.createLayer(map,{ | |
| user_name: 'thecenturyfoundation', | |
| type: 'cartodb', | |
| sublayers: [layer2007] | |
| }) | |
| .addTo(map) | |
| .done(function(layer){ | |
| // Update when user input changes | |
| $("input[name='layer']").change(function(){ | |
| // Clear the sublayers | |
| layer.getSubLayers().forEach(function(sublayer){sublayer.remove()}); | |
| // For every check activated, add a sublayer | |
| $.each($("input[name='layer']:checked"), function(){ | |
| layer.createSubLayer(layers[$(this).attr("id")]); | |
| }); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment