This map shows Obama's Bears Ears National Monument outlined in black, with Trump's much smaller replacement overlaid in blue.
A full description of how I created this is available on my blog.
Short description: Files were downloaded from blm.gov, converted to GeoJSON with ogr2ogr, edited with QGIS, simplified with mapshaper.org, and displayed with Leaflet.
ogr2ogr -skipfailures -f "GeoJSON" -t_srs WGS84 bears_ears_obmama.json NLCS_NM_NCA_historic.gdb
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Obama's Bears Ears vs. Trump's Replacement."> | |
| <title>Obama's Bears Ears vs. Trump's Replacement</title> | |
| <script src="https://code.jquery.com/jquery-2.2.4.min.js" | |
| integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" | |
| crossorigin="anonymous"></script> | |
| <!-- Load Leaflet from CDN --> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" | |
| integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" | |
| crossorigin=""/> | |
| <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" | |
| integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" | |
| crossorigin=""></script> | |
| <!-- Load Esri Leaflet from CDN --> | |
| <script src="https://unpkg.com/esri-leaflet@2.1.1/dist/esri-leaflet.js" | |
| integrity="sha512-ECQqaYZke9cSdqlFG08zSkudgrdF6I1d8ViSa7I3VIszJyVqw4ng1G8sehEXlumdMnFYfzY0tMgdQa4WCs9IUw==" | |
| crossorigin=""></script> | |
| <!-- load the latest release from the cdn automatically --> | |
| <script src="https://unpkg.com/esri-leaflet-vector"></script> | |
| <!-- Map funcitons --> | |
| <script src="map_functions.js"></script> | |
| <script> | |
| var key_field = 'ZCTA5CE10' | |
| //alert('key_field: '+key_field) | |
| var display_property = 'RebatesTtl' | |
| var max_value = 0; | |
| var min_value = 0; | |
| var hue_blue = ['#d1e5f0', '#92c5de', '#4393c3', '#2166ac'] | |
| //var hue_red = ['#fddbc7', '#f4a582', '#d6604d', '#b2182b'] | |
| //var hue_red = ['#b2182b', '#d6604d', '#f4a582', '#fddbc7'] | |
| //var map_hues = ['#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#d1e5f0', '#92c5de', '#4393c3', '#2166ac'] | |
| var map_hues = hue_blue | |
| var nuteral_color = '#f7f7f7' | |
| var positive_colors = hue_blue | |
| //var negative_colors = hue_red | |
| </script> | |
| <link rel="stylesheet" id="map-style" href="map_style.css" type="text/css" media="all" /> | |
| </head> | |
| <body> | |
| <div id="layout"> | |
| <!-- Menu toggle --> | |
| <a href="#menu" id="menuLink" class="menu-link"> | |
| <!-- Hamburger icon --> | |
| <span></span> | |
| </a> | |
| <div id="main"> | |
| <div class="header"> | |
| <h1>Obama's Bears Ears</h1> | |
| </div> | |
| <div class="content"> | |
| <div id="mapid_1"></div> | |
| </div> <!-- /content --> | |
| </div> <!-- /main --> | |
| <script> | |
| //alert(max_value); | |
| /* | |
| 1 44 104 208 2957 | |
| -1376 -268 -153 -70 -1 | |
| */ | |
| function returnBreakdowns(){ | |
| return [0, mapRound(0.25*max_value), mapRound(0.5*max_value), mapRound(0.75*max_value)] | |
| //return [mapRound(0.75*max_value), mapRound(0.5*max_value), mapRound(0.25*max_value), 0, | |
| // mapRound(0.25*min_value), mapRound(0.5*min_value), mapRound(0.75*min_value), mapRound(min_value)] | |
| //return [208, 104, 44, 0, -70, -153, -268, -1376] | |
| } | |
| //var zipcode_map = L.map('mapid_1').setView([40.0434, -75.7298], 10); | |
| // 40.233845, and the longitude is -111.658531 | |
| // -110.029070528837423, 37.57 | |
| var zipcode_map = L.map('mapid_1').setView([37.77, -110.02], 9); | |
| var layer = L.esri.Vector.basemap('ModernAntique').addTo(zipcode_map); | |
| // control that shows state info on hover | |
| var info = L.control(); | |
| info.onAdd = function (map) { | |
| this._div = L.DomUtil.create('div', 'info'); | |
| this.update(); | |
| return this._div; | |
| }; | |
| info.update = function (properties) { | |
| this._div.innerHTML = '<h4>Electric Cars:</h4>' + (properties ? | |
| '<b>' + properties['Zip'] + ' has ' + properties[display_property] + ' electric cars</b><br />' | |
| : 'Hover over a zipcode'); }; | |
| //info.addTo(zipcode_map); | |
| var geojson; | |
| zipcode_map.attributionControl.addAttribution(' | map by Chris A. Williams for Enact Development'); | |
| var legend = L.control({position: 'bottomright'}); | |
| legend.onAdd = function (map) { | |
| if (min_value > 0) { | |
| min_value = 0; | |
| } | |
| display_grades = [0, mapRound(0.25*max_value), mapRound(0.5*max_value), mapRound(0.75*max_value), mapRound(max_value)] | |
| display_grades.reverse(); | |
| if (min_value < 0) { | |
| display_grades = returnBreakdowns() | |
| //alert(display_grades) | |
| var div = L.DomUtil.create('div', 'info legend') | |
| var grades = display_grades | |
| var labels = [] | |
| var from, to; | |
| for (var i = 1; i < grades.length; i++) { | |
| to = Number(grades[i]); | |
| from = Number(grades[i - 1]); | |
| if ( from > 0 ) | |
| { | |
| x = from | |
| from = to | |
| to = x | |
| } | |
| labels.push( | |
| '<i style="background:' + getColor(to) + '"></i> ' + | |
| //from.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ((i + 1) < grades.length ? '–' + to.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : ' <!--or less-->')); | |
| from.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '–' + to.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") | |
| ); | |
| if ( from == 0 && to > 0) { | |
| labels.push( | |
| '<i style="background:' + getColor(0) + '"></i> ' + from.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") | |
| ); | |
| } | |
| } | |
| } | |
| else { | |
| var div = L.DomUtil.create('div', 'info legend'), | |
| //grades = [0, mapRound(0.05*max_value), mapRound(0.15*max_value), mapRound(0.30*max_value), mapRound(0.45*max_value), mapRound(0.60*max_value), mapRound(0.75*max_value), mapRound(0.90*max_value)], | |
| grades = display_grades, | |
| labels = [], | |
| from, to; | |
| for (var i = 0; i < grades.length; i++) { | |
| from = grades[i]; | |
| to = grades[i + 1]; | |
| if ( from == 0 ) { | |
| labels.push( | |
| '<i style="background:' + getColor(from) + '"></i> ' + from.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") | |
| ); | |
| } | |
| labels.push( | |
| '<i style="background:' + getColor(from) + '"></i> ' + | |
| from.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (to ? '–' + to.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '+')); | |
| } | |
| } | |
| div.innerHTML = labels.join('<br>'); | |
| return div; | |
| }; | |
| </script> | |
| <script> | |
| $(document).ready(function() { | |
| $.getJSON( "bears_ears_obama_cut_small.json", function() { | |
| //console.log( "success" ); | |
| }) | |
| .done(function( geojson_data ) { | |
| //console.log( "second success" ); | |
| //console.log(geojson_data) | |
| geojson = L.geoJson(geojson_data, { | |
| style: { | |
| weight: 4, | |
| opacity: 1, | |
| color: 'black', | |
| dashArray: '3', | |
| fillColor: '#000000' | |
| }, | |
| onEachFeature: onEachFeature | |
| }).addTo(zipcode_map); | |
| //legend.addTo(zipcode_map); | |
| }) | |
| .fail(function() { | |
| console.log( "error" ); | |
| }) | |
| .always(function() { | |
| //console.log( "getJSON().always()" ); | |
| }); | |
| $.getJSON( "bears_ears_trump_cut_small.json", function() { | |
| //console.log( "success" ); | |
| }) | |
| .done(function( trump_data ) { | |
| //console.log( "second success" ); | |
| //console.log(geojson_data) | |
| geojson = L.geoJson(trump_data, { | |
| style: style, | |
| onEachFeature: onEachFeature | |
| }).addTo(zipcode_map); | |
| //legend.addTo(zipcode_map); | |
| }) | |
| .fail(function() { | |
| console.log( "error" ); | |
| }) | |
| .always(function() { | |
| //console.log( "getJSON().always()" ); | |
| }); | |
| } ); | |
| </script> | |
| </div> | |
| </body> | |
| </html> |
| function mapRound(x){ | |
| return Number(Math.round(Number(x) * 100) / 100).toFixed(2) | |
| } | |
| function getColor(d) { | |
| d = Number(d) | |
| if (min_value > 0) { | |
| min_value = 0; | |
| } | |
| breakdowns = returnBreakdowns() | |
| if ( d == 0 ) { | |
| return nuteral_color | |
| } | |
| for (i = 0; i < breakdowns.length; i++) { | |
| if (d < 0 && d >= breakdowns[i]) { | |
| //console.log('will be returning: '+map_hues[i]+' for: '+d+'. max_value: '+max_value+', min_value: '+min_value) | |
| return map_hues[i] | |
| } else if (d > breakdowns[i]) { | |
| //console.log('will be returning: '+map_hues[i]+' for: '+d+'. max_value: '+max_value+', min_value: '+min_value) | |
| return map_hues[i] | |
| } | |
| } | |
| return map_hues[map_hues.length - 1] | |
| } | |
| function style(feature) { | |
| return { | |
| weight: 2, | |
| opacity: 1, | |
| color: 'white', | |
| dashArray: '3', | |
| fillOpacity: 0.7, | |
| fillColor: getColor(feature.properties[display_property]) | |
| }; | |
| } | |
| function highlightFeature(e) { | |
| var layer = e.target; | |
| layer.setStyle({ | |
| weight: 5, | |
| color: '#666', | |
| dashArray: '', | |
| fillOpacity: 0.7 | |
| }); | |
| if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { | |
| layer.bringToFront(); | |
| } | |
| info.update(layer.feature.properties); | |
| } | |
| function resetHighlight(e) { | |
| geojson.resetStyle(e.target); | |
| info.update(); | |
| } | |
| /* | |
| function zoomToFeature(e) { | |
| zipcode_map.fitBounds(e.target.getBounds()); | |
| } | |
| */ | |
| function onEachFeature(feature, layer) { | |
| layer.on({ | |
| mouseover: highlightFeature, | |
| mouseout: resetHighlight, | |
| //click: zoomToFeature | |
| }); | |
| } |
| #mapid_1 { | |
| width: 800px; | |
| height:800px; | |
| } | |
| #mapid_2 { | |
| width: 800px; | |
| height:800px; | |
| } | |
| .info { | |
| padding: 6px 8px; | |
| font: 14px/16px Arial, Helvetica, sans-serif; | |
| background: white; | |
| background: rgba(255,255,255,0.8); | |
| box-shadow: 0 0 15px rgba(0,0,0,0.2); | |
| border-radius: 5px; | |
| } | |
| .info h4 { | |
| margin: 0 0 5px; | |
| color: #777; | |
| } | |
| .legend { | |
| text-align: left; | |
| line-height: 18px; | |
| color: #555; | |
| } | |
| .legend i { | |
| width: 18px; | |
| height: 18px; | |
| float: left; | |
| margin-right: 8px; | |
| opacity: 0.7; | |
| } |