title: Include images from my GeoJSON feed into the tooltip with mapbox?
body: <p>I am trying to display images from my GeoJSON feed onto the tooltips. </p>
  
  <p>I am referencing a script that displays custom images in the tooltips (but not from a geojson feed). So I am trying to combine the two, but I am at a loss for what to do. Been reading through the mapbox and LeafletJS API docs. </p>
  
  <p>Any advice or solutions is much appreciated.</p>
  
  <p>What I have:</p>
  
  <pre><code>// for clickable coords //
  
  var latitude = document.getElementById('latitude');
  var longitude = document.getElementById('longitude');
  
  // dark map example + set views //
  
  var map = L.mapbox.map('map', 'examples.map-y7l23tes')
      .setView([40.70319876407339, -74.03961181640625], 12);
      L.control.locate().addTo(map);
  
  
  // click to add coords //
  
      map.on('click', function(e) {
      window[e.type].innerHTML = e.containerPoint.toString() + ', ' + e.latlng.lng.toString()+ ' XsupX ' + e.latlng.lat.toString();
  
      latitude.value = e.latlng.lat.toString();
      longitude.value = e.latlng.lng.toString();
  
      var click = document.getElementById('click'); });
  
  
  // grip JSON //
  
  var featureLayer = L.mapbox.featureLayer()
      .loadURL('/locations.json')
      .addTo(map);
  </code></pre>
  
  <p>The script I am referencing that includes custom images, but without GeoJSON feed as a source for the images.</p>
  
  <pre><code>var map = L.mapbox.map('map', 'examples.map-9ijuk24y');
  
  var geoJson = [{
      type: 'Feature',
      "geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
      "properties": {
          "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Cherry_Blossoms_and_Washington_Monument.jpg/320px-Cherry_Blossoms_and_Washington_Monument.jpg",
          "url": "https://en.wikipedia.org/wiki/Washington,_D.C.",
          "marker-symbol": "star",
          "city": "Washington, D.C."
      }
  }, {
      type: 'Feature',
      "geometry": { "type": "Point", "coordinates": [-87.63, 41.88]},
      "properties": {
          "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Chicago_sunrise_1.jpg/640px-Chicago_sunrise_1.jpg",
          "url": "https://en.wikipedia.org/wiki/Chicago",
          "city": "Chicago"
      }
  }, {
      type: 'Feature',
      "geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
      "properties": {
          "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYC_Top_of_the_Rock_Pano.jpg/640px-NYC_Top_of_the_Rock_Pano.jpg",
          "url": "https://en.wikipedia.org/wiki/New_York_City",
          "city": "New York City"
      }
  }];
  
  // Add custom popups to each using our custom feature properties
  map.featureLayer.on('layeradd', function(e) {
      var marker = e.layer,
          feature = marker.feature;
  
      // Create custom popup content
      var popupContent =  '&lt;a target="_blank" class="popup" href="' + feature.properties.url + '"&gt;' +
                              '&lt;img src="' + feature.properties.image + '"&gt;' +
                          '   &lt;h2&gt;' + feature.properties.city + '&lt;/h2&gt;' +
                          '&lt;/a&gt;';
  
      // http://leafletjs.com/reference.html#popup
      marker.bindPopup(popupContent,{
          closeButton: false,
          minWidth: 320
      });
  });
  
  // Add features to the map
  map.featureLayer.setGeoJSON(geoJson);
  
  map.setView([45.908, -78.525], 4);
  </code></pre>
  
  <p>Update: a more simple approach... </p>
  
  <pre><code>    var featureLayer = L.mapbox.featureLayer({
          type: 'FeatureCollection',
          features: [{
              type: 'Feature',
              properties: {
                  title: location.title,
                  image: location.image,
              },
              geometry: {
                  type: 'Point',
                  coordinates: [0, 0]
              }
          }]
      })
      .loadURL('http://localhost:3000/locations.json')
      .addTo(map);
  
  
  featureLayer.eachLayer(function(layer) {
  
      // here you call `bindPopup` with a string of HTML you create - the feature
      // properties declared above are available under `layer.feature.properties`
  
      var content = '&lt;h1&gt;size: ' + location.title + '&lt;\/h1&gt;' +
           '&lt;img src="' + location.image + '"&gt;';
      layer.bindPopup(content);
  });
  </code></pre>