Leaflet JavaScript Maps - Part6 - Concave Polygons

This builds upon the part 5 example. It fixes the issue where popups were not appearing on the object if the drawn object was a concave polygon or polyline

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>
<script src="https://cdn.rawgit.com/hayeswise/Leaflet.PointInPolygon/v1.0.0/wise-leaflet-pip.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, 2],
      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 = [];

  data.push(['{"type":"Polygon","coordinates":[[[-117.24154472351073,32.79586076396607],[-117.24154472351073,32.79694300391599],[-117.21819877624512,32.79694300391599],[-117.21819877624512,32.79586076396607],[-117.24154472351073,32.79586076396607]]]}', 'Underline']);

 ...