JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css">
<script src="https://s3-us-west-2.amazonaws.com/gathering-a-building/bowser.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/gathering-a-building/pathSeg.js"></script>
<div id="MyMap">

</div>

CSS

#MyMap {
  height: 500px;
  width: 500px;
}

JavaScript

var centerCoordinates = new L.LatLng(41.312, -72.928);
L.mapbox.accessToken = 'pk.eyJ1IjoiZmhlbXNoZXIiLCJhIjoiODQ5MW9WayJ9.px2P6wVMFucfXHE1zmDA1A';
var MyMap = L.mapbox.map('MyMap', 'mapbox.streets', { zoomControl:false,center:centerCoordinates,zoom:17,minZoom:1,maxZoom:19});

var keyPoint1=new L.LatLng(41.3123954,-72.9271193)  //---street intersection: High Street & Grove Street----
var keyPoint2=new L.LatLng(41.3119707,-72.9290796)  //---street intersection: Wall Street & York Street-----

var NS="http://www.w3.org/2000/svg"

//---body onload---
var MySVG   //---root SVG---
var SvgElemG //---container for imported elements---
var Wrapper //---svg elem used as container for screen position---
function initSVG()
{
    MyMap._initPathRoot() //---creates an svg element---
    MySVG=document.querySelector("svg") //---access svg element---
    MySVG.setAttribute("cursor", "default") //--arrow---
    //---zooming the map's SVG elements---
    MyMap.on("viewreset", adjustSVGElements);
    //---contains svg paths---
    SvgElemG=document.createElementNS(NS,"g")
    SvgElemG.setAttribute("id","svgElemG")
    MySVG.appendChild(SvgElemG)

    Wrapper=document.createElementNS(NS,"svg")
    Wrapper.setAttribute("id","wrapper")
    MySVG.appendChild(Wrapper)

    showMapKeyLines()
    callSVGFile()
}

function showMapKeyLines()
{
    var xy1=MyMap.latLngToLayerPoint(keyPoint1)
    var xy2=MyMap.latLngToLayerPoint(keyPoint2)

    var mapKeyLine=document.createElementNS(NS,"line")
    mapKeyLine.setAttribute("id","mapKeyLine")

    mapKeyLine.setAttribute("x1",xy1.x)
    mapKeyLine.setAttribute("y1",xy1.y)
    mapKeyLine.setAttribute("x2",xy2.x)
    mapKeyLine.setAttribute("y2",xy2.y)
    mapKeyLine.setAttribute("stroke-width",1)
    mapKeyLine.setAttribute("stroke","red")
    mapKeyLine.setAttribute("stroke-dasharray","5 5")

    MySVG.appendChild(mapKeyLine)
}


function callSVGFile()
{
  //---load svg paths---
  var...