Leaflet JavaScript Maps - Part5 - WKT

This builds upon the part 4 example. It adds a WKT/GeoJSON parser called Wicket to create the objects.

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>
<script src="https://arthur-e.github.io/Wicket/wicket.js"></script>
<script src="https://arthur-e.github.io/Wicket/wicket-leaflet.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;
var drawnObjTypes = {};

$(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 Well Known Text (WKT) you wish to display.  
// This is where you should retrieve shape data from your middle-tier application.
// Each item must contain a WKT or GeoJSON string as the first item.  Supports Polygon, 
// Linestring, Point, and 'Multi' version of each.   
// Optional items: 
// short title of the shape, additional html to display on popup, color.	
function getWKT() {
  var data = getGridWKT(32.820000, -117.255000, 0.01000, 0.008000, 2, 2); // list of test shapes

  data.push(['POLYGON (( -117.200000 32.800000,  -117.230000 32.800000,  -117.230000 32.850000,  -117.200000 32.850000))']);
  data.push(['POLYGON (( -117.150000 32.800000,  -117.160000 32.800000,  -117.160000 32.850000,  -117.150000 32.850000))']);
  data.push(['POLYGON (( -117.180000 32.800000,  -117.190000 32.800000, ...