mrcnc/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.2/leaflet.css" />
    <script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.2/leaflet.js"></script>
    <script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.2/esri-leaflet.js"></script>
    <style>
      html, body, #map {
        margin:0; padding:0;  width : 100%; height : 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map = L.map('map').setView([29.95, -90.07], 9);
      var baseLayer = L.esri.basemapLayer('Gray').addTo(map);
      var layerControl = L.control.layers({'ESRI basemap': baseLayer}).addTo(map);

      var setIcon = function (dataUri, width, height) {
        // fired when marker is added to map
        map.on('layeradd', (e) => {
            if (e.layer._latlng) {
              e.layer.setIcon(L.icon({
                iconUrl: dataUri,
                iconSize: [width, height]
              }));
            }
        });
      };

      var wrapURLs = function (text, new_window) {
        var url_pattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
        var target = (new_window === true || new_window == null) ? '_blank' : '';

        return text.replace(url_pattern, function (url) {
          var protocol_pattern = /^(?:(?:https?|ftp):\/\/)/i;
          var href = protocol_pattern.test(url) ? url : 'http://' + url;
          return '<a href="' + href + '" target="' + target + '">' + url + '</a>';
        });
      };

      map.on('popup', (e) => console.log('popup event', e));

      var addFeatureLayer = function (layerName, url){
        var layer = L.esri.featureLayer({
          url: url
        }).addTo(map);

        layer.bindPopup(function(e){
          var keys = [];
          for(var k in e.feature.properties) keys.push(k + ': {'+k+'}<br>');
          var template = keys.join('');
          return wrapURLs(L.Util.template(template, e.feature.properties));
        });

        fetch(url+'?f=json&pretty=true')
        .then(r => r.json())
        .then(res => {
          var dataUri = 'data:' + res.drawingInfo.renderer.symbol.contentType + ';base64,' + res.drawingInfo.renderer.symbol.imageData;
          if (res.drawingInfo.renderer.symbol.contentType) {
            setIcon(dataUri, res.drawingInfo.renderer.symbol.width, res.drawingInfo.renderer.symbol.height);
            layerControl.addOverlay(layer, '<img src="'+dataUri +'" height='+res.drawingInfo.renderer.symbol.height+'>'+layerName);
          } else {
            layerControl.addOverlay(layer, layerName);
          }


        })
        .catch(e => console.log('request failed', e));

     };

    addFeatureLayer('Boat Launches', 'http://gisweb.dotd.la.gov/ArcGIS/rest/services/MapServices/BoatLaunches/MapServer/0/');
    addFeatureLayer('River Gauges', 'http://gisweb.dotd.la.gov/ArcGIS/rest/services/MapServices/RiverGauges/MapServer/0');
    addFeatureLayer('Civil Air Patrol images', 'https://services1.arcgis.com/fXHQyq63u0UsTeSM/ArcGIS/rest/services/CAP_Flight_9_20160816/FeatureServer/0');
    addFeatureLayer('Tangipahoa Flood Estimate 20160815A', 'https://services1.arcgis.com/fXHQyq63u0UsTeSM/ArcGIS/rest/services/Tangipahoa_Flood_Estimate_20160815A/FeatureServer/0');
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.2/leaflet.css" />
	<script src="https://cdn.jsdelivr.net/leaflet/1.0.0-rc.2/leaflet.js"></script>
	<script src="https://cdn.jsdelivr.net/leaflet.esri/2.0.2/esri-leaflet.js"></script>
	<style>
	html, body, #map {
	margin:0; padding:0; width : 100%; height : 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	var map = L.map('map').setView([29.95, -90.07], 9);
	var baseLayer = L.esri.basemapLayer('Gray').addTo(map);
	var layerControl = L.control.layers({'ESRI basemap': baseLayer}).addTo(map);

	var setIcon = function (dataUri, width, height) {
	// fired when marker is added to map
	map.on('layeradd', (e) => {
	if (e.layer._latlng) {
	e.layer.setIcon(L.icon({
	iconUrl: dataUri,
	iconSize: [width, height]
	}));
	}
	});
	};

	var wrapURLs = function (text, new_window) {
	var url_pattern = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
	var target = (new_window === true \|\| new_window == null) ? '_blank' : '';

	return text.replace(url_pattern, function (url) {
	var protocol_pattern = /^(?:(?:https?\|ftp):\/\/)/i;
	var href = protocol_pattern.test(url) ? url : 'http://' + url;
	return '<a href="' + href + '" target="' + target + '">' + url + '</a>';
	});
	};

	map.on('popup', (e) => console.log('popup event', e));

	var addFeatureLayer = function (layerName, url){
	var layer = L.esri.featureLayer({
	url: url
	}).addTo(map);

	layer.bindPopup(function(e){
	var keys = [];
	for(var k in e.feature.properties) keys.push(k + ': {'+k+'}<br>');
	var template = keys.join('');
	return wrapURLs(L.Util.template(template, e.feature.properties));
	});

	fetch(url+'?f=json&pretty=true')
	.then(r => r.json())
	.then(res => {
	var dataUri = 'data:' + res.drawingInfo.renderer.symbol.contentType + ';base64,' + res.drawingInfo.renderer.symbol.imageData;
	if (res.drawingInfo.renderer.symbol.contentType) {
	setIcon(dataUri, res.drawingInfo.renderer.symbol.width, res.drawingInfo.renderer.symbol.height);
	layerControl.addOverlay(layer, '<img src="'+dataUri +'" height='+res.drawingInfo.renderer.symbol.height+'>'+layerName);
	} else {
	layerControl.addOverlay(layer, layerName);
	}


	})
	.catch(e => console.log('request failed', e));

	};

	addFeatureLayer('Boat Launches', 'http://gisweb.dotd.la.gov/ArcGIS/rest/services/MapServices/BoatLaunches/MapServer/0/');
	addFeatureLayer('River Gauges', 'http://gisweb.dotd.la.gov/ArcGIS/rest/services/MapServices/RiverGauges/MapServer/0');
	addFeatureLayer('Civil Air Patrol images', 'https://services1.arcgis.com/fXHQyq63u0UsTeSM/ArcGIS/rest/services/CAP_Flight_9_20160816/FeatureServer/0');
	addFeatureLayer('Tangipahoa Flood Estimate 20160815A', 'https://services1.arcgis.com/fXHQyq63u0UsTeSM/ArcGIS/rest/services/Tangipahoa_Flood_Estimate_20160815A/FeatureServer/0');
	</script>
	</body>
	</html>