Demonstrates loading a local data file (encoded in TopoJSON format) and symbolizes using Leaflet functionality. Also loads a data layer form CartoDB database. JQuery detects zoom level to remove or add the hexbin layer and toggle between the relevant legends/layer switcher.
Last active
November 5, 2015 18:12
-
-
Save rgdonohue/e214b88043c5ec1dfa8f to your computer and use it in GitHub Desktop.
GeoJSON with CartoDB layer
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> | |
| <meta charset=utf-8 /> | |
| <title>Kentucky Oil and Gas Wells Demo</title> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } | |
| form { | |
| position:absolute; | |
| top: 15px; | |
| right: 10px; | |
| font-size: 1.3em; | |
| background: #fff; | |
| width: 70px; | |
| padding: 5px 15px 10px; | |
| border-radius: 4px; | |
| } | |
| input { | |
| display: inline-block; | |
| } | |
| label { | |
| margin: 0 10px 0 4px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='map'></div> | |
| <form id="menu"> | |
| <input type="radio" name="well" id="wells" checked="true" /><label for="all">all</label> | |
| <input type="radio" name="well" id="gas" /><label for="gas">gas</label> | |
| <input type="radio" name="well" id="oil" /><label for="oil">oil</label> | |
| <input type="radio" name="well" id="d&a" /><label for="d&a">d&a</label> | |
| </form> | |
| <script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script> | |
| <script src='https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.0/simple_statistics.min.js'></script> | |
| <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script> | |
| var map = L.map('map') | |
| .setView([37.85, -84.77], 8); | |
| L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', { | |
| attribution: 'Stamen' | |
| }).addTo(map); | |
| cartodb.createLayer(map, 'https://rgdonohue.cartodb.com/api/v2/viz/bcdbfe36-6f4f-11e5-833d-0e674067d321/viz.json', { https: true }) | |
| .addTo(map) | |
| .on('done', function(layer) { | |
| layer.setInteraction(true); | |
| $('.cartodb-legend').hide(); | |
| }) | |
| .on('error', function(err) { | |
| alert("some error occurred: " + err); | |
| }); | |
| var hexStyle = { | |
| color: '#fff', | |
| fillColor: 'grey', | |
| opacity: 1, | |
| weight: 1, | |
| fillOpacity: 1 | |
| } | |
| var classBreaks; | |
| var colors = ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"]; | |
| var currentVar = 'wells'; | |
| var hex = omnivore.topojson('ky-wells.json') | |
| .on('ready', function() { | |
| hex.setStyle(hexStyle); | |
| getClassBreaks(); | |
| symbolize(); | |
| retrieve(); | |
| }) | |
| .on('error', function() { | |
| alert('hex data failed to load'); | |
| }) | |
| .addTo(map); | |
| function getClassBreaks() { | |
| var range = []; | |
| hex.eachLayer(function(l) { | |
| range.push(Number(l.feature.properties[currentVar])); | |
| }); | |
| classBreaks = ss.quantile(range,[0,.2,.4,.6,.8,1]); | |
| } | |
| function getColor(val) { | |
| return val > classBreaks[5] ? "#a63603" : | |
| val > classBreaks[4] ? "#e6550d" : | |
| val > classBreaks[3] ? "#fd8d3c" : | |
| val > classBreaks[2] ? "#fdbe85" : | |
| "#feedde"; | |
| } | |
| function symbolize() { | |
| hex.eachLayer(function(l) { | |
| l.setStyle({ | |
| fillColor: getColor(Number(l.feature.properties[currentVar])) | |
| }) | |
| }); | |
| } | |
| function retrieve(){ | |
| hex.eachLayer(function(layer){ | |
| var popup = 'all wells: <b>'+layer.feature.properties.wells+'</b><br>'+ | |
| 'gas wells: <b>'+layer.feature.properties.gas+'</b><br>'+ | |
| 'oil wells: <b>'+layer.feature.properties.oil+'</b><br>'+ | |
| 'd&a wells: <b>'+layer.feature.properties['d&a']+'</b><br>'; | |
| layer.bindPopup(popup); | |
| }); | |
| } | |
| $('input').on('change', function() { | |
| currentVar = this.id; | |
| getClassBreaks(); | |
| symbolize(); | |
| }); | |
| map.on('zoomend', function(e) { | |
| if(map.getZoom()>= 9){ | |
| map.removeLayer(hex); | |
| $('#menu').hide(); | |
| $('.cartodb-legend').show(); | |
| } else { | |
| if(!map.hasLayer(hex)){ | |
| map.addLayer(hex); | |
| } | |
| $('#menu').show(); | |
| $('.cartodb-legend').hide(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment