Last active
August 14, 2019 00:47
-
-
Save Alex-Devoid/d5ed9f240cc581a98993753f313a99ad to your computer and use it in GitHub Desktop.
Rosemont Mine Layout
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> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <style > | |
| /* #site-navbar-container.affix{ | |
| z-index:100000 | |
| } */ | |
| .info { | |
| padding: 6px 8px; | |
| font: 12px/14px 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; | |
| } | |
| .legend { | |
| line-height: 10px; | |
| color: #555; | |
| } | |
| .legend i { | |
| width: 18px; | |
| height: 18px; | |
| float: left; | |
| margin-right: 8px; | |
| opacity: 0.7; | |
| } | |
| </style> | |
| <body> | |
| <div class="row"> | |
| <div id="mapid" style="width: 100%; height: 500px;"></div> | |
| </div> | |
| <script> | |
| var RosemontMineSiteLayoutGeoJsonURL = "https://raw.githubusercontent.com/Alex-Devoid/RosemontMineSiteLayout/master/rosemontMineSiteLayoutPlan.geojson"; | |
| var mymap = L.map('mapid').setView([32.006656015387605, -110.77891676709731], 10); | |
| var osm = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { | |
| maxZoom: 18, | |
| attribution: 'Arizona Daily Star | Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + | |
| '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + | |
| 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', | |
| id: 'mapbox.streets' | |
| }) | |
| var baseMaps = { | |
| "Street Map": osm | |
| }; | |
| L.control.layers(baseMaps,null,{collapsed:false}).addTo(mymap); | |
| osm.addTo(mymap); | |
| d3.json(RosemontMineSiteLayoutGeoJsonURL, function(error, mineLayout) { | |
| if (error) throw error; | |
| L.geoJSON(mineLayout, { | |
| style: function(feature) { | |
| console.log(feature); | |
| switch (feature.properties.name) { | |
| case 'Dry Stacking Tailings Facility': return {color: "#4e0000", fill: true, | |
| opacity: .75, fillOpacity: .75}; | |
| case 'Open Pit': return {color: "#c40000", | |
| fill: true, | |
| opacity: .5, fillOpacity: .75}; | |
| case 'Waste Rock Storage Area': return {color: "#890000", fill: true, | |
| opacity: .75, fillOpacity: .75}; | |
| case 'Process Plant': return {color: "#ff0000", fill: true, | |
| opacity: .75, fillOpacity: .75}; | |
| } | |
| } | |
| }).addTo(mymap); | |
| var legend = L.control({position: 'bottomleft'}); | |
| legend.onAdd = function () { | |
| var div = L.DomUtil.create('div', 'info legend'); | |
| // loop through our density intervals and generate a label with a colored square for each interval | |
| div.innerHTML = | |
| '<p><strong>Rosemont Mine Site Layout' + '<'+'/'+'strong'+'>' + '<'+'/'+'p'+'>' + | |
| '<i style="background:'+"#140000" + '">'+'<'+'/'+'i'+'>' + "Dry Stacking Tailings Facility" + '<'+'/'+'p'+'>'+ | |
| '<i style="background:'+"#620000" + '">'+'<'+'/'+'i'+'>' + "Waste Rock Storage" + '<'+'/'+'p'+'>'+ | |
| '<i style="background:'+"#b10000" + '">'+'<'+'/'+'i'+'>' + "Open Pit" + '<'+'/'+'p'+'>'+ | |
| '<i style="background:'+"#ff0000" + '">'+'<'+'/'+'i'+'>' + "Process Plant" + '<'+'/'+'p'+'>'; | |
| return div; | |
| }; | |
| legend.addTo(mymap); | |
| L.control.scale({position: 'bottomright',metric: false }).addTo(mymap); | |
| }) | |
| mymap.on('zoomend',function(e) { | |
| console.log(e.target.getZoom()); | |
| }) | |
| mymap.on('click', function(ev){ | |
| var coordinates = mymap.getCenter() | |
| console.log(coordinates); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment