Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
​
​
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="draft 1 HML">
    <meta charset="utf-8">
    
    <!-- Load jQuery -->
    <script src="//code.jquery.com/jquery-2.1.1.min.js"> </script>
    
    <!-- Load Leaflet -->
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    
    <link rel="stylesheet" href="../css/styledLayerControl.css" />
    <script src="../src/styledLayerControl.js"></script>
    
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:600' rel='stylesheet' type='text/css'>
    
    <link rel="stylesheet" href="//cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
     <script src="//cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
​
    
   <!------------------------------------------------------------------------------------->
   <!--Add base map-->
   <!--------------------------------------------------------------------------------->
    
    <script>
      var map;
      var layer1;
      
      $(document).ready(function () {
//Create the map
      map = L.map('map').setView([41.237557, -80.818417], 16);
        
​
        
//Add base tiles 
       L.tileLayer('https://api.mapbox.com/styles/v1/jadhs825/cimuy6ra40097ahnpwvynhou7/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiamFkaHM4MjUiLCJhIjoiY2ltcXp3em9sMDBybnVubTRzem12NTR4YyJ9.Cb5AthZ_DTeyquDljjvHBQ').addTo(map);
  
                    
// ---------------------------------------------------------------------------------        
      // Add data loaded from GitHub.....layer1 = warren ohio soil samples 08:11:2016.geojson
// ---------------------------------------------------------------------------------
          $.getJSON('https://raw.githubusercontent.com/jadhavshibani/jadhavshibani.github.io/master/Healthy-Materials-lab/warren%20ohio%20soil%20samples%2008%3A11%3A2016.geojson').done (function (data) {layer2 = L.geoJson(data, {  
      // Create circles instead of standard markers
        pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng);
        },
            
    /*
             * Add a popup to each "layer" (shape in the GeoJSON),
             * in this case the popup simply contains the NAME property.
             */
            onEachFeature: function (feature, layer) {
              layer.bindPopup('<strong>Address: </strong>'+ feature.properties.address
                              + "<p></p>Sample 1: "+ feature.properties.sample_1 + ' Pb'
                            + " , Sample 2: "+ feature.properties.sample_2 + ' Pb'
                           
               
             ); 
            },
            
            // styling properties for Leaflet here:http://leafletjs.com/reference.html#path-options
        style:function (feature) {
        var stylepoint = {
            fillColor: false,
            fillOpacity: 0,
            radius:  6,
            stroke: true,
            color : 'teal'
          }; 
          
           return stylepoint; 
          } 
          }).addTo(map);
        })
      });
    </script>
  
<!--- Style me using CSS -->
    <style>
       /*----- Web Page -----*/
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      
       #map{ width: 100%; 
             height: 90%; min-height: 90%; 
             position: relative;
             z-index:2;
       }
      
      #main_title {
      margin-left: 10px;
      float: left;  
      background-color: none;
    }  
    
    h2 {
      width:64px;
      height:64px;
      margin:0 auto;
      padding-top: 20px;
      z-index:1;
      background-color: none;
    }
   
      h3 {
   
        width:445px;
        margin: 0 auto;
        padding:30px;
      
      }
    /* Make the sidebar appear above the map, to the right. */
       
      
      
    </style>
  </head>
  
  <body>
      
    <div id="map"> </div>
        <!-- sidebar -->
 <div class="sidebar"></div> 
      
    </div>    
  </body>
</html>
​
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jadhavshibanipro
0viewers