Leaflet JavaScript Maps - Part4 - Index

This builds upon the part 3 example. It adds jQuery Databales with an index of all the shapes/markers.

by Matt Gingery

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@0.7.3/dist/leaflet.js"></script>
<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>
<div id="toolbar">
  <input type="button" id="searchButton" accesskey="S" title="Click or use Alt-S to hide/show the search page" value="Show Search" />
</div>
<div id="content" class="LeafletEX">
  <div id="searchDiv" class="LeafletEX">
    <table id="searchTable" class="display" width="100%"></table>
  </div>
  <div id="map"></div>
</div>

CSS

.LeafletEX {
	  margin: 3px
	}

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

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

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

	.dataTables_filter input {
	  width: 80px
	}

JavaScript

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

var lfmap;
var mapObjects = [];
var colorIndex = -1;
var dataSet = [];
var searchShown = false;

$(document).ready(function() {

  drawMap(39.82835, -98.5816684, 5); // The Geographic Center of the United States
  $('#searchDiv').hide();
  var table = $('#searchTable').DataTable({
    data: dataSet,
    pageLength: 15,
    pagingType: 'simple',
    bLengthChange: false,
    columns: [{
        title: ''
      },
      {
        title: ''
      }
    ],
    columnDefs: [{
      targets: 1,
      visible: false
    }]
  });

  $('#searchTable tbody').on('click', 'tr', function() {
    var index = table.row(this).data()[1] - 1;
    displayMapObject(index);
  });

  $('#searchButton').click(function() {
    searchShown = !searchShown;
    if (searchShown) {
      $('#searchButton').val('Hide Search');
      $('#map').width('76%');
      $('#searchDiv').width('20%');
      zoomToMapObjects(mapObjects);
    } else {
      $('#searchButton').val('Show Search');
      $('#map').width('100%');
    }

    $('#searchDiv').toggle();
  });
});


// Use this to get the array of Polygons you wish to display.  
// This is where you should retrieve shape data from your middle-tier application.
// Each item must contain: 
// Polygon definition which is an array of 2 element arrays of lat/long points
// Optional items: 
// short title of the shape, additional html to display on popup, color.	
function getPolygons() {
  var data = getGrid(32.802077, -117.244066, 0.00100, 0.001500, 15, 10); // list of test shapes
  data.push([getRectangleCoords(32.813000, -117.250000, 0.02, 0.01)]);

  if (data == null) {
    return [];
  } else {
    return data;
  }
}

// Use this to get the array of Markers you wish to display.  
// This is where you should retrieve point data from your middle-tier application.
// Each item must contain: lattitude, longitude
// Optional items: short title of the point, additional html to...