title: How might i import a raster layer into my leaflet web map?
body: <p>I'm working on my capstone project for school. My task was to build an open-source web map application, so far I've been able to get vector layers into the map using AJAX. I have failed to load any rasters into the map, even after looking at other questions. I've been using a GeoJSON format for the vectors. I'm still a beginner, been teaching myself all these things for this project so if you could be as detailed as possible it would be greatly appreciated. </p>
  
  <p>Below is the format I used to import some city data with pop-ups. Can I even continue in this manner for rasters? 
  Pixel size is 30m. It has 1 band. Its in ENVI.dat format. </p>
  
  <pre><code>//Turkey Cities
  
  
  var cityStyle = {
              radius: 4,
              fillColor: "#756bb1",
              color: "#0d73be",
              weight: 1,
              opacity: 1,
              fillOpacity: 0.85
          };
  
          var markers_city = L.markerClusterGroup({
              removeOutsideVisibleBounds: false,
              polygonOptions: {
                  fillColor: 'rgba(117, 107, 177, 0.5)',
                  color: 'rgba(117, 107, 177, 0.8)',
                  weight: 3,
                  opacity: 1,
                  fillOpacity: 0.5
              },
  
              iconCreateFunction: function(cluster) {
                  return L.divIcon({
                      html: '&lt;div style="background-clip: padding-box; background-color:rgba(117, 107, 177, 0.8); width: 40px; height: 40px; margin-left: -15px; margin-top: -18px; padding-top: 6px; text-align: center; border-radius: 20px; border: 5px solid rgba(117, 107, 177, 0.6); font-size:12px "Helvetica Neue", Arial, Helvetica, sans-serif;"&gt;' + cluster.getChildCount() + '&lt;/div&gt;',
                      iconSize: [0, 0]
                  });
              }
          });
  
          markers_city.on('', function(e) {
              console.log(e);
              document.getElementById("log").innerHTML = "";
          });
  
          $.ajax({
              url: 'data/tur_cityvpic.geojson',
              success: function(response) {
  
                  if (city) {
                      mymap.removeLayer(city)
                  };
  
                  var city = L.geoJSON(JSON.parse(response), {
                      pointToLayer: function(feature, latlng) {
                          //popup configuration
                          var strPopup = "&lt;h4&gt;City: " + feature.properties.name_ascii + "&lt;/h4&gt;&lt;hr&gt;";
  
  
                          strPopup += "&lt;p&gt;Click the More Info link below the photo to a view larger photo and any relevent information about the location.&lt;/p&gt;"
                          strPopup += "&lt;img src='" + feature.properties.url + "' width='300px'&gt;";
  
                          //strPopup += "&lt;h5&gt;*In Use Until: " + feature.properties.DateHigh + "&lt;/h5&gt;";
  
                          //target="_blank"-&gt;open in new brower tab
                          strPopup += "&lt;a href='" + feature.properties.urlref + "' target='blank'&gt;More Info";
  
                          strPopup += "&lt;/a&gt;";
  
                          return L.circleMarker(latlng, cityStyle).bindPopup(strPopup);
                          city.on('click', function(e) {
                              document.getElementById("log").innerHTML = "city" + e.target.strPopup;
                          });
  
                      }
                  });
                  markers_city.addLayer(city);
                  mymap.addLayer(markers_city);
                  //                window.markers_caravan = markers_caravan  
              }
          });
          markers_city.addTo(mymap);
  
  
           var cityStatus = 1;
          $(".toggleCities").on("click", function() {
  
              if (cityStatus == 0) {
                  markers_city.addTo(mymap);
                  cityStatus = 1;
  
              } else if (cityStatus == 1) {
                  mymap.removeLayer(markers_city);
                  cityStatus = 0;
              }
  
          });
  </code></pre>
  
  <p>Can this work for rasters?</p>