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="SF Esri-Leaflet Map">
    <meta charset=utf-8 />
    <title>SF Esri-Leaflet Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
​
    <!-- Load Leaflet from CDN-->
    <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>
​
    <!-- Load Esri Leaflet from CDN -->
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.5/esri-leaflet.js"></script>
    <!--script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet-core.js"></script-->
​
    <!-- Load Esri Leaflet Renderers -->
    <script src="https://dl.dropboxusercontent.com/u/59331579/0.7.3/esri-leaflet-renderers-0.0.1-beta.1.min.js"></script>
​
    <!-- Load Esri Leaflet Geocoder -->    
    <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/1.0.0-rc.4/esri-leaflet-geocoder.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet-geocoder/1.0.0-rc.4/esri-leaflet-geocoder.css">
​
    <style>
      body {margin:0;padding:0;}
      #map {position: absolute;top:0;bottom:0;right:0;left:0;}
    </style>
  </head>
  <body>
​
    <div id="map"></div>
​
    <script>
      
      var map = L.map('map').setView([37.75, -122.45], 12);
​
      L.esri.basemapLayer('Gray').addTo(map);
     
      L.esri.featureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/SF_Traffic_Accidents_Model/FeatureServer/0').addTo(map);
​
      L.esri.featureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/SF_Less_Safe_Bike_Routes/FeatureServer/0').addTo(map);
​
      L.esri.featureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/SF_Safest_Bike_Routes/FeatureServer/0').addTo(map);
​
      var accidents = L.esri.featureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/SF_Traffic_Accident_Reports/FeatureServer/0');
      accidents.addTo(map);
      
      var popupTemplate = "<h3>{Descript}</h3><div>{Date}<br>{Address}<br>{PdDistrict}<br>{Resolution}</div>";
      accidents.bindPopup(function(feature){
        feature.properties.Date = new Date(feature.properties.Date).toString();
        return L.Util.template(popupTemplate, feature.properties)
      });
      
      var searchControl = new L.esri.Geocoding.Controls.Geosearch( { providers: 
        [
        new L.esri.Geocoding.Controls.Geosearch.Providers.FeatureLayer({
          url: 'http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/SF_Traffic_Accident_Reports/FeatureServer/0',
          searchFields: ['PdDistrict', 'Resolution'],
          label: 'Traffic Accident Reports',
          bufferRadius: 5000,
          formatSuggestion: function(feature){
            return feature.properties.PdDistrict + ' - ' + feature.properties.Resolution;
          }
        })
      ]
      }).addTo(map);
      
      searchControl.on('results', function(data){
        for (var i = data.results.length - 1; i >= 0; i--) {
          accidents.getFeature(data.results[0].properties.FID).openPopup();
        }
      });
      
    </script>
​
  </body>
</html>
Output 300px

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

Dismiss x
public
Bin info
alaframboisepro
0viewers