Building A Leaflet.js Map App With A jQuery UI Date Picker

From 2010 to 2018, Cumberland County was the fastest growing county in the state of Pennsylvania. For a more detailed look, you can check out the Pennsylvania State Data Center’s report (pdf). With that growth, comes many subdivision and land development plans that need to be reviewed by the County’s Planning Department.

They review these plans for consistency with the municipality’s zoning ordinance, comprehensive plan, subdivision/land development ordinance, as well as the County’s comprehensive plan. And during each monthly Planning Commission meeting, some time is provided to discuss these plans.

That’s where our GIS Department comes into play. The Planning Department approached us about developing a web map that would show the location of plans that had been reviewed. So I set up a meeting with their staff to discuss the goals of the project. We discussed what layers to include, what user interface widgets to add, and most importantly, the purpose of the map.

The key feature would be the ability for users to filter the plans displayed on the map by a start and end date. During the Planning Commission meeting, the staff would use this feature to review all of the plans reviewed during the previous month.

a view of the map’s filter by date widget

After our meeting, I was left with a big decision. Would I used my Leaflet-Bootstrap template? Or would I try customizing an ArcGIS Online configurable app template (i.e., Basic Viewer)? I was considering the benefits and challenges to both approaches.

With the Leaflet-Bootstrap route, I know it would be easy to build the filter functionality. But it would also take more time to build out the various user interface widgets (basemap selector, address/layer search form, etc.). With the ArcGIS Online configurable template, all of the user interfaces would be pre-built. But I wasn’t sure how long it would take to figure out how to access the layer in question, and build out the filter functionality.

In the end, I decided to go with the Leaflet-Bootstrap template. And for anyone interested in deploying a similar solution, I have the project on GitHub. The repository provides a listing and description of all the libraries/dependencies for the project.

Another level of complexity is that in Cumberland County, we have some tiled map services that use a custom tiling scheme. Planning wanted to use our 2018 imagery map service, which follows this custom tiling scheme. One advantage of the Esri JavaScript API over Leaflet.js is that it supports custom tiling schemes out of the box. But not to worry! By using the Proj4JS and Proj4Leaflet plugins, you can use custom tiled Esri map services with Leaflet. Having a decent understanding of projections and the Esri REST API will make this easier. I’ve created an example on CodePen. That example is below:

With the web mapping platform selected, it was now time to consider the underlying dataset representing reviewed plans. We decided to create a feature class in a file geodatabase located on the Planning Department’s shared network drive. Staff from the Planning Department would edit this layer in ArcMap. I wrote a Python (ArcPy) script to copy that layer into a file geodatabase that was powering a web service. By setting “arcpy.env.overwriteOutput = True” in your script, you can copy a feature class from one file geodatabase to another without changing the name for the imported feature class. We set this script to run on a weekly basis using Windows Task Scheduler.

One alternative data management approach would be to have users edit an ArcGIS Online hosted feature service from a web browser. Another could involved users editing a feature service through ArcGIS Pro. We may decide to switch to one of those options in the future.

This feature class had a Date field that represented the date the plan was reviewed by Planning staff. To allow users to filter plans by date reviewed, I could create a form that would let users enter a start and end date. When they submitted the form, I would call a function to set a definition query on the layer, based upon the Date field, using the start and end date provided by the user. You can see how this was coded by visiting GitHub.

I decided to research setting a date-based input element on the Mozilla Developer Network. I learned there was a date type for the input element. However, I also learned that the “control’s UI varies in general from browser to browser; at the moment support is patchy.” In unsupported browsers, users would have a text type of input element. Below is an image of browser support from CanIUse:

Browser support for the “date” type of input element (as of 7/19/2019)

The Mozilla page also suggested using the jQuery User Interface Datepicker plugin. Now I understand most people have moved on from jQuery. But as many of my map apps use BootStrap, I’m still using jQuery. So, it made a lot of sense to add jQuery UI to the mix. After reviewing the sample code, I realized I wanted the sample code for Select a Date Range.

With the sample HTML and JavaScript code in place, I needed to construct a function that would set a definition query on the reviewed plans layer using the values from the start and end dates set by the user on the date-picker form. I also created a secondary function to clear the filter and show all features. Below are the functions:

	// apply date filter to layer
	function setFilter() {
	// beginning date for reviewed plans (from jQuery date-picker)
	var from = $('#fromDate').val();
	// ending date for reviewed plans (from jQuery date-picker)
	var to = $('#toDate').val();
	// where clause for definition query
	var where_clause = '"DATE" >= date ' + "'" + from + "'" + ' AND "DATE" <= date' + " '" + to + "'";
	// apply filter
	planSubmissions.setWhere(where_clause);
	// future enhancements
	// get count of features
	// if no features exist, add message
	// call clearFilter()
	// hide filter panel widget
	$('#panelFilter').collapse("hide");
	}
	// clear filter on layer and show all features
	function clearFilter() {
	planSubmissions.setWhere("");
	$('#panelFilter').collapse("hide");
	}

view raw

set-date-filter.js

hosted with ❤ by GitHub

The Plan Submissions Review Map  has been live for a few months now. At each month’s Planning Commission meeting, some of the more notable plans are zoomed to and discussed. I actually learned a Starbucks was planned to be sited near my house.

Hopefully this web map app can help planning officials and residents learn more about proposed land development in their communities.

Advertisement