Leaflet JavaScript Maps - Part7 - REST GeoJSON

Much more complex example using Leaflet geoJSON() load via a REST service from archgis.

by Matt Gingery

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="https://cdn.rawgit.com/hayeswise/Leaflet.PointInPolygon/v1.0.0/wise-leaflet-pip.js"></script>
<div id="toolbar" style="width:100%">
  <input type="button" id="searchButton" accesskey="S" title="Click or use Alt-S to hide/show the search page" value="Show Search" /> &nbsp;&nbsp;&nbsp;&nbsp;
  <select id="tileLayerList" title="Change Type of Map Used"></select> &nbsp;&nbsp;&nbsp;&nbsp;
  <input type="button" id="cancelDownload" accesskey="C" title="Click or use Alt-C to cancel dowloading of shapes" value="Cancel" /> &nbsp;&nbsp;
  <span id="status" style="color:red"></span>
</div>
<div id="content">
  <div id="searchDiv">
    <table id="searchTable" class="display" style="width:100%"></table>
  </div>
  <div id="map"></div>
</div>

CSS

#content {
	  width: 100%;
	  overflow: hidden;
	}

	#searchDiv {
	  display: none;
	  float: left;
	}

	#map {
	  width: 100%;
	  height: 700px;
	  float: right;
	}

JavaScript

// For Leaflet tutorials, see: https://mattgingery.github.io/LeafletExamples

var lfmap, lfTileLayer, geoJSONData, searchTable;
var mapObjects = [];
var dataSet = [];
var drawnObjTypes = {};
var searchShown = false;
var downloadCancelled = false;
var nbrBatches = 0;
var countTotalShapes = 0;
var countDuplicateShapes = 0; //       not drawn.  ignored shapes.
var countTotalDuplicateShapes = 0; // total not drawn.  ignored shapes.
var tileLayerIndex = 0;
// A few differnt sets of (the background) Map Tiles you can use: Mapnik is the most common, I believe.
var tileLayers = [{
    name: 'Mapnik',
    maxZoom: 18,
    URL: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  },
  {
    name: 'Black And White',
    maxZoom: 14,
    URL: 'http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
  },
  {
    name: 'DE',
    maxZoom: 16,
    URL: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/ {y}.png'
  },
  {
    name: 'France',
    maxZoom: 16,
    URL: 'http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png'
  },
  {
    name: 'Hot',
    maxZoom: 16,
    URL: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
  },
  {
    name: 'BZH',
    maxZoom: 16,
    URL: 'http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png'
  }
];

// Used if not specified in config object below.
var defaultSearchTableColumns = [{
    title: 'ShapeNbr'
  },
  {
    title: 'ShapeType'
  },
  {
    title: 'Name'
  }
];

// Shapes are drawn using this list of colors.  Feel free to change...			  
var colorList = ['blue', 'red', 'purple', 'orange'];
var colorIndex = -1;

//------------------------------------------------------------------------------
// This is your configurable properties object with functions 
// used to format your data.  Pass these in from the middle layer 
// of your application or keep these in a separate (referenced) Javascript file. 
var config = {
  // prevent endless loop.  Adjust values if a small batch size or large # shapes needed.
  maxShapesTotal: 1000 *...