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>
  <title>Demo 12 | JavaScript</title>
  <meta name="description" content="Demo 12: JavaScript">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href='https://fonts.googleapis.com/css?family=Quattrocento|Oswald' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://js.arcgis.com/4.0beta3/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0beta3/"></script>
  <style>
    html {font-size: 1em;}
​
    body {
      background-color: white;
      font-weight: 400;
      line-height: 1.45;
      color: #333;
    }
​
    p {margin-bottom: 1.3em;}
​
    h1, h2, h3, h4 {
      margin: 1.414em 0 0.5em;
      font-weight: inherit;
      line-height: 1.2;
    }
​
    h1 {font-size: 2.441em; }
​
    h2 {font-size: 1.953em;}
​
    h3 {font-size: 1.563em;}
​
    h4 {font-size: 1.25em;}
​
    small, .font_small {font-size: 0.8em;}
​
    html, body {
      height: 100%;
      margin: 0;
    }
​
    body {
      font-family: 'Quattrocento', serif;
      display: flex;
      flex-direction: column;
      background: beige; 
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Oswald', sans-serif;
    }
​
    #wrapper {
      display: flex;
      flex: 2 1 auto;
      flex-direction: row;
    }
​
    #sidebar {
      padding: 1rem;
      flex: 1 1 auto;
      border-right: 4px solid #2c3e50;
      max-width: 30rem;
      overflow: auto;
      background: #34495e;        
      color: #ecf0f1;
    }
    
    #sidebar :first-child {
      margin-top: 0;
    }
​
    #map {
      position: relative;
      text-align: center;
      flex: 3.14 1 auto;
      background: #000f1a;
    }
    
    #map-container {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
​
    #header {
      padding: 1rem;
      flex: 0 0 auto;
      border-bottom: 4px solid #2c3e50;
      background: #34495e;        
      color: #ecf0f1;
    }
​
    #footer {
      border-top: 4px solid #2c3e50;
      padding: 1rem;
      flex: 0 0 auto;
      background: #34495e;        
      color: #ecf0f1;
    }
    
    a {
      color: #5AD7F6;
    }
​
    .control {
      position: absolute;
    }
​
    .top {
      top: 10px;
    }
​
    .left {
      left: 10px;
    }
​
    .bottom {
      bottom: 10px;
    }
​
    .right {
      right: 10px;
    }
​
    .no-margin {
      margin: 0;
    }
    
    @media screen and (max-width: 1024px) { 
      #wrapper {
        flex-direction: column;
      }
​
      #map {
        flex: 1 1 auto;
        order: 1;
        margin: 0;
        border: none;
        min-height: 50vh;
        background: #000f1a;
      }
​
      #sidebar {
        border-top: 4px solid #2c3e50;
        max-width: 100%;
        order: 2;
      }
    }
  </style>
</head>
<body>
  <div id="header">
    <h1 class="no-margin">Alternate Fuel Stations</h1>
  </div>
  <div id="wrapper">
    <div id="sidebar">
      <h2 class="no-margin">What?</h2>
      <p>This dataset represents the locations of non-gasoline alternative fueling stations which provide biodiesel, CNG, electric, ethanol, hydrogen, LNG, and/or propane.</p>
​
      <h2>Why?</h2>
      <p>More than 250 million vehicles consume millions of barrels of petroleum every day in the United States. On-road passenger travel alone accounts for more than 2.5 trillion vehicle miles traveled each year. Vehicle fleet managers and drivers, corporate decision makers, and public transportation planners can use this data to develop strategies to conserve fuel.</p>
​
      <h2>How?</h2>
      <p>Through a nationwide network of local coalitions, Clean Cities (<a href="https://cleancities.energy.gov/">https://cleancities.energy.gov/</a>) provides project assistance to help stakeholders in the public and private sectors deploy alternative and renewable fuels, idle-reduction measures, fuel economy improvements, and emerging transportation technologies. Department of Energy collects this data as part of the Projects undertaken by Clean Cities coalitions and stakeholders to ensure customers access to clean alternative energy. Clean Cities is the deployment arm of the U.S. Department of Energy's (DOE) Vehicle Technologies Office.</p>
​
      <p>This data can be found at the Department of Energy Alternative Fuels Data Center Web Feature Service: <a href="http://www.afdc.energy.gov/locator/stations/">http://www.afdc.energy.gov/locator/stations/.</a></p>
    </div>
    <div id="map">
      <div id="map-container"></div>
      <div class="control top right">
        <div id="search"></div>
      </div>
    </div>
  </div>
  <div id="footer">
    <small>Data from the <a href="https://hifld-dhs-gii.opendata.arcgis.com/">Homeland Infrastructure Foundation - Level Data</a> Open Data Site.</small>
  </div>
</body>
</html>
 
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/VectorTileLayer",
  "esri/layers/FeatureLayer",
  "esri/widgets/Search",
  "esri/widgets/Search/SearchViewModel",
  "dojo/domReady!"
], function(Map, MapView, VectorTileLayer, FeatureLayer, Search, SearchVM) {
​
  var map = new Map();
​
  var view = new MapView({
    container: "map-container",
    map: map,
    center: [-122.23, 37.75],
    zoom: 8
  });
​
  var tiles = new VectorTileLayer({
    url: "https://www.arcgis.com/sharing/rest/content/items/f96366254a564adda1dc468b447ed956/resources/styles/root.json"
  });
  map.add(tiles);
  
  var featureLayer = new FeatureLayer({
  url: "http://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/Alternative_Fueling_Stations/FeatureServer/0"
});
​
  map.add(featureLayer);
  
  var search = new Search({
    viewModel: new SearchVM({
      view: view
    })
  }, "search");
​
  search.startup();
});
Output 300px

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

Dismiss x
public
Bin info
patrickarltpro
0viewers