JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquerygeo.com/test/jquery.geo-test.min.js"></script>
<div>
    <div id="map">
    </div>

CSS

html
{
    font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
}

.info 
{
    background: #fff;
    border-radius: 8px;
    box-shadow: -4px 4px #444;
    opacity: .8;
    padding: 8px;
    width: 95%;
}
#map
{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.calc
{
    display: inline-block;
    vertical-align: top;
}
td
{
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.red { color: #c00; }
.green { color: #0c0; }
.blue { color: #00c; }

JavaScript

// create a map
var map = $("#map").geomap({
    center: [-71.0595678, 42.3604823],
    zoom: 8
});

// append a red LineString
var line = {
    type: "LineString",
    coordinates: [
        [-71.5, 42],
        [-72, 41.5]
        ]
};
map.geomap("append", line);

// append a red Polygon
var poly = {
    type: "Polygon",
    coordinates: [[
        [-72.5, 41.7],
        [-72.3, 41.3],
        [-72.7, 41.3],
        [-72.5, 41.7]
        ]]
};
map.geomap("append", poly);

// distance calculations between all red shapes
$(".rpt-2-rpt-distance").text($.geo.distance(pt, pt));
$(".rpt-2-line-distance").text($.geo.distance(pt, line));
$(".rpt-2-poly-distance").text($.geo.distance(pt, poly));

$(".line-2-rpt-distance").text($.geo.distance(line, pt));
$(".line-2-line-distance").text($.geo.distance(line, line));
$(".line-2-poly-distance").text($.geo.distance(line, poly));

$(".poly-2-rpt-distance").text($.geo.distance(poly, pt));
$(".poly-2-line-distance").text($.geo.distance(poly, line));
$(".poly-2-poly-distance").text($.geo.distance(poly, poly));

// contains relationships between all red shapes
$(".rpt-2-rpt-contains").text($.geo.contains(pt, pt));
$(".rpt-2-line-contains").text($.geo.contains(pt, line));
$(".rpt-2-poly-contains").text($.geo.contains(pt, poly));

$(".line-2-rpt-contains").text($.geo.contains(line, pt));
$(".line-2-line-contains").text($.geo.contains(line, line));
$(".line-2-poly-contains").text($.geo.contains(line, poly));

$(".poly-2-rpt-contains").text($.geo.contains(poly, pt));
$(".poly-2-line-contains").text($.geo.contains(poly, line));
$(".poly-2-poly-contains").text($.geo.contains(poly, poly));

// append a green Point inside the red Polygon
var gpt = {
    type: "Point",
    coordinates: [-72.5, 41.6]
};
map.geomap("append", gpt, {
    color: "green"
});

// append a green LineString inside the red Polygon
var gline = {
    type: "LineString",
    coordinates: [
        [-72.55, 41.5],
        [-72.45, 41.5]
        ]
};
map.geomap("append",...