eeeschwartz/index.html

## index.html
<html>
<head>
  <meta charset=utf-8 />
  <title>Lexington Vacuum Leaf Collection Map</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
  <link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.1.4/dist/esri-leaflet-geocoder.css">

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
    .info {
      width: 275px;
      background: white;
    }
    .info p {
      margin: 5px;
    }
    .leaflet-top .leaflet-control {
      margin-top: 5px;
    }

    .alert {
      padding: 1em;
    }
    .alert-success {
      background-color: #b0debb;
    }
    .alert-error {
      background-color: #ffc2c2;
    }

    .sign-up,
    .citygram-form input {
      height: 25px
    }
    .sign-up {
      padding-bottom: 10px;
    }
    .citygram-form .phone {
      width: 220px;
      border-right: none;
    }
    input {
      border: 1px solid gray;
      float: left;
    }
    .geocoder-control-input.geocoder-control-loading {
      background-color: lightgray;
    }
    .legend {
      background-color: white;
      padding: 10px;
      line-height: 18px;
      color: #555;
    }
    .legend i {
      width: 18px;
      height: 18px;
      float: left;
      margin-right: 8px;
      opacity: 0.7;
    }
    .legend-items {
      display: none; /* click to show */
    }
    .legend-item {
      padding-top: 10px;
    }
  </style>

</head>
<body>


<div id="map"></div>

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/esri-leaflet@2.0.4"></script>
<script src="https://unpkg.com/esri-leaflet-geocoder@2.1.4"></script>
<script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous"></script>

<script>
  var addressLatLngNotCollected = new L.LatLng(38.05193514322206, -84.49135992595838);
  var addressLatLngCollected = new L.LatLng(38.05516033568126, -84.48380380868912);
  var addressCenter = new L.LatLng(38.03063357768377, -84.49164390563965);
  var map = L.map('map', {
    scrollWheelZoom: false,
  }).setView(addressCenter, 12);

  L.esri.basemapLayer("Topographic").addTo(map);

  var leaves = L.esri.dynamicMapLayer({
    url: "https://maps.lexingtonky.gov/lfucggis/rest/services/leafcollection/MapServer",
  }).addTo(map);

  var addressPointsProvider = L.esri.Geocoding.mapServiceProvider({
    url: 'https://maps.lexingtonky.gov/lfucggis/rest/services/addresses/MapServer',
    layers: [0],
    searchFields: ['ADDRESS'],
    formatSuggestion: function(feature) {
      return feature.properties['ADDRESS'];
    }
  });

  // create an empty layer group to store the results and add it to the map
  var results = L.layerGroup().addTo(map);

  map.on('click', function (e) {
    displayStatus(e.latlng);
  });

  var displaySearchResults = function(data, latlng) {
    displayStatus(data.results[0].latlng);
  }

  var displayStatus = function(latlng) {
    results.clearLayers();

    leaves.identify()
      .returnGeometry(false)
      .tolerance(0)
      .on(map)
      .at(latlng)
      .run(function(error, featureCollection) {
        var dates;
        $.each(featureCollection.features, function(index, feature) {
          if (feature.layerId === 5) { dates = feature.properties['Dates']; }
        });
        leaves.setOpacity(0.7);
        showDatePopup(map, latlng, dates);
    });
  }

  var showDatePopup = function(map, addressLatLng, dates) {
    if (!dates || dates === 'Null') {
      dates = "Because this address does not receive residential city waste services, it will not receive vacuum leaf collection.";
    } else {
      var datesLanguage = '<h3>Leaf vacuuming in your area is currently scheduled: ' + dates + '</h3>';
      dates = datesLanguage + '<div class="citygram-form"><p>Sign up to receive text message notifications about your street\'s schedule.</p>' +
        '<p class="alert alert-error" style="display:none"></p><p class="sign-up"><label><strong>Enter your phone number (with area code)</strong>' +
          '<input class="phone" name="phone" type="text"></label> <input type="submit" value="Notify me"></p></div>';
    }
    var popup = L.popup({
          closeButton: false,
        })
        .setLatLng(addressLatLng)
        .setContent(dates)
        .openOn(map);

    map.setView(addressLatLng, 18);
    setTimeout(function() {
      map.panBy(new L.Point(0, -100));
    }, 500);

    $('input[type="submit"]').click(function() {
      putToCitygram(addressLatLng, $('.phone').val());
    });
  };

  var addInstructions = function(map) {
    var info = L.control({position: 'topright'});

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info leaflet-bar'); // create a div with a class "info"
        this.update();
        return this._div;
    };

    // method that we will use to update the control based on feature properties passed
    info.update = function (props) {
        this._div.innerHTML = '<p>Type the first part of your address and choose from results</p>';
    };

    info.addTo(map);
  }

  addInstructions(map);

  // http://esri.github.io/esri-leaflet/api-reference/controls/geosearch.html
  var searchControl = L.esri.Geocoding.geosearch({
    providers: [ addressPointsProvider ],
    expanded: true,
    placeholder: 'type an address',
    collapseAfterResult: true,
    allowMultipleResults: false,
    position: 'topright',
    zoomToResult: false,
  }).addTo(map);

  setTimeout(function() {
    // displayStatus(addressLatLngCollected);
    // displayStatus(addressLatLngNotCollected);
  }, 2000);

  searchControl.on("results", displaySearchResults);

  var putToCitygram = function(latLng, phone) {
    var geom = JSON.stringify({
      "type": "Point",
      "coordinates": L.GeoJSON.latLngToCoords(latLng)
    });

    var url = 'https://lexington-geocode-proxy.herokuapp.com/www.citygram.org/subscriptions'

    var leafCollectionPublisherId = 12;

    var subscription = {
      'channel': 'sms',
      'geom': geom,
      'publisher_id': leafCollectionPublisherId,
      'phone_number': phone,
    };

    var success = function() {
      $('.citygram-form').html('<p class="alert alert-success">Thanks! You will receive text messages as vacuum leaf collection continues. <br><br>Please visit <a href="https://lexingtonky.gov/leaves">lexingtonky.gov/leaves</a> for details.</p>');
    }

    var errorCallback = function(response) {
      var error;
      try {
        error = JSON.parse(response.responseText).error;
        error = error.replace(/phone_number/, phone);
      } catch (e) {
        error = 'There was a problem signing-up. Please contact <a href="mailto:webmaster@lexingtonky.gov?subject=Unable to subscribe to citygram&body=details: ' + encodeURI(JSON.stringify(subscription)) + '">webmaster@lexingtonky.gov</a>';
      }
      $('.alert-error').html(error).show();
    }

    $.ajax({
      type: 'PUT',
      url: url,
      contentType: 'application/json',
      data: JSON.stringify(subscription),
    }).done(success).error(errorCallback);
  }

  var legendItem = function(key, color) {
    return '<div class="legend-item"><i style="background:' + color + '"></i> ' + key + '</div>';
  }
  var addLegend = function(map) {
    var legend = L.control({position: 'topleft'});

    legend.onAdd = function (map) {
        var div = L.DomUtil.create('div', 'legend');
        div.innerHTML += '<div class="legend-toggle-container"><a href="#" class="legend-toggle">Legend</a></div>';
        var items = L.DomUtil.create('div', 'legend-items');
        items.innerHTML += legendItem('Collection in Progress', 'green');
        items.innerHTML += legendItem('Collection Next in Queue', 'yellow');
        items.innerHTML += legendItem('Collection Pending Assignment', 'red');
        items.innerHTML += legendItem('Collection Completed', '#7c90f2');
        items.innerHTML += legendItem('Does Not Receive Leaf Collection', 'white');
        $(div).append(items);
        return div;
    };

    legend.addTo(map);
    $('.legend-toggle').click(function(e) {
      e.preventDefault();
      $('.legend-items').toggle();
    });
  }

  addLegend(map);
</script>
</body>
</html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Lexington Vacuum Leaf Collection Map</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
	<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder@2.1.4/dist/esri-leaflet-geocoder.css">

	<style>
	body { margin:0; padding:0; }
	#map { position: absolute; top:0; bottom:0; right:0; left:0; }
	.info {
	width: 275px;
	background: white;
	}
	.info p {
	margin: 5px;
	}
	.leaflet-top .leaflet-control {
	margin-top: 5px;
	}

	.alert {
	padding: 1em;
	}
	.alert-success {
	background-color: #b0debb;
	}
	.alert-error {
	background-color: #ffc2c2;
	}

	.sign-up,
	.citygram-form input {
	height: 25px
	}
	.sign-up {
	padding-bottom: 10px;
	}
	.citygram-form .phone {
	width: 220px;
	border-right: none;
	}
	input {
	border: 1px solid gray;
	float: left;
	}
	.geocoder-control-input.geocoder-control-loading {
	background-color: lightgray;
	}
	.legend {
	background-color: white;
	padding: 10px;
	line-height: 18px;
	color: #555;
	}
	.legend i {
	width: 18px;
	height: 18px;
	float: left;
	margin-right: 8px;
	opacity: 0.7;
	}
	.legend-items {
	display: none; /* click to show */
	}
	.legend-item {
	padding-top: 10px;
	}
	</style>

	</head>
	<body>


	<div id="map"></div>

	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
	<script src="https://unpkg.com/esri-leaflet@2.0.4"></script>
	<script src="https://unpkg.com/esri-leaflet-geocoder@2.1.4"></script>
	<script
	src="https://code.jquery.com/jquery-1.12.4.min.js"
	integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
	crossorigin="anonymous"></script>

	<script>
	var addressLatLngNotCollected = new L.LatLng(38.05193514322206, -84.49135992595838);
	var addressLatLngCollected = new L.LatLng(38.05516033568126, -84.48380380868912);
	var addressCenter = new L.LatLng(38.03063357768377, -84.49164390563965);
	var map = L.map('map', {
	scrollWheelZoom: false,
	}).setView(addressCenter, 12);

	L.esri.basemapLayer("Topographic").addTo(map);

	var leaves = L.esri.dynamicMapLayer({
	url: "https://maps.lexingtonky.gov/lfucggis/rest/services/leafcollection/MapServer",
	}).addTo(map);

	var addressPointsProvider = L.esri.Geocoding.mapServiceProvider({
	url: 'https://maps.lexingtonky.gov/lfucggis/rest/services/addresses/MapServer',
	layers: [0],
	searchFields: ['ADDRESS'],
	formatSuggestion: function(feature) {
	return feature.properties['ADDRESS'];
	}
	});

	// create an empty layer group to store the results and add it to the map
	var results = L.layerGroup().addTo(map);

	map.on('click', function (e) {
	displayStatus(e.latlng);
	});

	var displaySearchResults = function(data, latlng) {
	displayStatus(data.results[0].latlng);
	}

	var displayStatus = function(latlng) {
	results.clearLayers();

	leaves.identify()
	.returnGeometry(false)
	.tolerance(0)
	.on(map)
	.at(latlng)
	.run(function(error, featureCollection) {
	var dates;
	$.each(featureCollection.features, function(index, feature) {
	if (feature.layerId === 5) { dates = feature.properties['Dates']; }
	});
	leaves.setOpacity(0.7);
	showDatePopup(map, latlng, dates);
	});
	}

	var showDatePopup = function(map, addressLatLng, dates) {
	if (!dates \|\| dates === 'Null') {
	dates = "Because this address does not receive residential city waste services, it will not receive vacuum leaf collection.";
	} else {
	var datesLanguage = '<h3>Leaf vacuuming in your area is currently scheduled: ' + dates + '</h3>';
	dates = datesLanguage + '<div class="citygram-form"><p>Sign up to receive text message notifications about your street\'s schedule.</p>' +
	'<p class="alert alert-error" style="display:none"></p><p class="sign-up"><label><strong>Enter your phone number (with area code)</strong>' +
	'<input class="phone" name="phone" type="text"></label> <input type="submit" value="Notify me"></p></div>';
	}
	var popup = L.popup({
	closeButton: false,
	})
	.setLatLng(addressLatLng)
	.setContent(dates)
	.openOn(map);

	map.setView(addressLatLng, 18);
	setTimeout(function() {
	map.panBy(new L.Point(0, -100));
	}, 500);

	$('input[type="submit"]').click(function() {
	putToCitygram(addressLatLng, $('.phone').val());
	});
	};

	var addInstructions = function(map) {
	var info = L.control({position: 'topright'});

	info.onAdd = function (map) {
	this._div = L.DomUtil.create('div', 'info leaflet-bar'); // create a div with a class "info"
	this.update();
	return this._div;
	};

	// method that we will use to update the control based on feature properties passed
	info.update = function (props) {
	this._div.innerHTML = '<p>Type the first part of your address and choose from results</p>';
	};

	info.addTo(map);
	}

	addInstructions(map);

	// http://esri.github.io/esri-leaflet/api-reference/controls/geosearch.html
	var searchControl = L.esri.Geocoding.geosearch({
	providers: [ addressPointsProvider ],
	expanded: true,
	placeholder: 'type an address',
	collapseAfterResult: true,
	allowMultipleResults: false,
	position: 'topright',
	zoomToResult: false,
	}).addTo(map);

	setTimeout(function() {
	// displayStatus(addressLatLngCollected);
	// displayStatus(addressLatLngNotCollected);
	}, 2000);

	searchControl.on("results", displaySearchResults);

	var putToCitygram = function(latLng, phone) {
	var geom = JSON.stringify({
	"type": "Point",
	"coordinates": L.GeoJSON.latLngToCoords(latLng)
	});

	var url = 'https://lexington-geocode-proxy.herokuapp.com/www.citygram.org/subscriptions'

	var leafCollectionPublisherId = 12;

	var subscription = {
	'channel': 'sms',
	'geom': geom,
	'publisher_id': leafCollectionPublisherId,
	'phone_number': phone,
	};

	var success = function() {
	$('.citygram-form').html('<p class="alert alert-success">Thanks! You will receive text messages as vacuum leaf collection continues. <br><br>Please visit <a href="https://lexingtonky.gov/leaves">lexingtonky.gov/leaves</a> for details.</p>');
	}

	var errorCallback = function(response) {
	var error;
	try {
	error = JSON.parse(response.responseText).error;
	error = error.replace(/phone_number/, phone);
	} catch (e) {
	error = 'There was a problem signing-up. Please contact <a href="mailto:webmaster@lexingtonky.gov?subject=Unable to subscribe to citygram&body=details: ' + encodeURI(JSON.stringify(subscription)) + '">webmaster@lexingtonky.gov</a>';
	}
	$('.alert-error').html(error).show();
	}

	$.ajax({
	type: 'PUT',
	url: url,
	contentType: 'application/json',
	data: JSON.stringify(subscription),
	}).done(success).error(errorCallback);
	}

	var legendItem = function(key, color) {
	return '<div class="legend-item"><i style="background:' + color + '"></i> ' + key + '</div>';
	}
	var addLegend = function(map) {
	var legend = L.control({position: 'topleft'});

	legend.onAdd = function (map) {
	var div = L.DomUtil.create('div', 'legend');
	div.innerHTML += '<div class="legend-toggle-container"><a href="#" class="legend-toggle">Legend</a></div>';
	var items = L.DomUtil.create('div', 'legend-items');
	items.innerHTML += legendItem('Collection in Progress', 'green');
	items.innerHTML += legendItem('Collection Next in Queue', 'yellow');
	items.innerHTML += legendItem('Collection Pending Assignment', 'red');
	items.innerHTML += legendItem('Collection Completed', '#7c90f2');
	items.innerHTML += legendItem('Does Not Receive Leaf Collection', 'white');
	$(div).append(items);
	return div;
	};

	legend.addTo(map);
	$('.legend-toggle').click(function(e) {
	e.preventDefault();
	$('.legend-items').toggle();
	});
	}

	addLegend(map);
	</script>
	</body>
	</html>