JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
<div style="margin-top:10px;">
  <label for="zone">zone:</label>
  <input type="text" id="zone" value="30" size="2">
  <label for="umtx">x:</label>
  <input type="text" id="umtx" value="669858"  size="10">
  <label for="umty">y:</label>
  <input type="text" id="umty" value="4343364"  size="10">
  <button type="button" onclick="convert()">convert</button>
</div>
<div style="margin-top:10px;">
  <label for="lat">lat:</label>
  <input type="text" id="lat" >
  <label for="long">long:</label>
  <input type="text" id="long" >
</div>
<textarea id="datos">
  ALJARAFE;224.616;4139.827;0 
PATERNRI;242.976;4041.786;20.03 
PINARREY;286.465;4019.260;59.3 
</textarea><button type="button" onclick="convertAll()">convertAll</button>
<button type="button" onclick="convertAll(true)">datosFile</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.2/proj4.js"></script>

<script>
    var utm = "+proj=utm +zone=30";
    var wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
    console.log(proj4(utm,wgs84,[669858, 4343364]));
 </script>
 <script>
 var map = null;
 var marker = null;
 function initialize() {
	console.log("initialize");
    var myLatLng = new google.maps.LatLng(40.4165, -3.70256);
    var    myOptions = {
            zoom: 8,
            center: myLatLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
              icon: {
                  path: google.maps.SymbolPath.CIRCLE,
                  strokeColor: 'black',
                  scale: 3
              }
        });

    marker.setMap(map);
   moveMarker(map, marker);

}

function moveMarker(map, marker) {

    //delayed so you can see it move
    setTimeout(function () {

       ...

CSS

#map-canvas {
    height: 500px;
    width: 600px;
    background-color: #CCC;
}

JavaScript

var datosEntrada = `
AGUAYO;418.582;4773;0 
ALUMINIO;139.979;4847.682;0 
ANLLARES;213.324;4746.143;0 
APARECID;214.65;4664.668;11.89 
BOIMENTE;134.718;4832.286;105.91 
BELESAR;114.598;4729.881;0 
CARTELLE;84.55;4691.437;0 
CAELGESE;413.044;4807.593;0 
COMPOSTI;207.187;4726.148;0 
EL PALO;207.114;4804.536;1.9 
PESOZ;185.244;4795.505;2.69 
ANTINANO;263.503;4804.951;0 
LA LOMBA;199.616;4722.142;0 
LA ROBLA;285.915;4742.073;0 
LADA;286.398;4798.81;0 
MASGALAN;72.732;4741.541;0 
MESON V.;66.627;4793.562;0 
MONTEARE;220.938;4714.504;0 
NARCEA;230.137;4798.308;0 
P.G.RODR;105.746;4820.374;52.96 
PENAGOS;435.946;4799.979;0 
SOTORIBE;265.857;4800.568;0 
TABIELLA;267.253;4827.853;0 
TINEO;233.544;4801.914;4.04 
TRIVES;149.417;4695.038;0 
VELILLA;350.86;4752.694;0 
VILECHA;287.19;4715.309;0.53 
VILLAMEC;253.88;4722.541;0.0 
ABANTO;479.913;4793.07;0 
ALDEADAV;194.468;4569.696;0 
ALMAZAN;541.075;4590.364;124.37 
AMOREBIE;527.221;4786.776;0 
SENGRACI;560.059;4685.658;0 
AZPEITIA;564.882;4787.393;0 
ARRUBAL;562.863;4702.871;0 
GARO-BAR;479.316;4739.748;0 
CASTEJON;610.375;4673.12;0 
ELEREBRO;612.443;4673.106;0 
GATICA;513.476;4804.686;0 
DUEROINT;165.265;4573.436;0 
C.RODRIG;208.986;4497.162;0 
GRIJOTA;376.124;4661.181;132.48 
GUENES;483.863;4784.212;0 
HERNANI;580.164;4789.657;0 
HERRERA;392.461;4713.851;81.09 
HINOJOSA;187.573;4540.07;0 
ICHASO;558.753;4769.331;0 
LORA;430.066;4713.392;100.06 
LA SERNA;611.086;4661.85;42.0 
MUDARRA;348.014;4627.024;74.91 
MURUARTE;597.207;4739.506;0 
OLMEDO;344.92;4606.413;0 
SANTURCE;492.132;4798.399;0 
SAUCELLE;183.288;4549.523;0 
TORDESIL;332.534;4596.788;0 
VILLARIN;214.073;4570.952;0 
VIRTUS;434.653;4757.444;13.07 
VITORIA;524.693;4748.902;0 
ZIERBENA;489.228;4800.594;0 
ARAGON;731.678;4565.954;0 
ASCO;801.704;4565.382;14.32 
BEGUES;908.673;4590.122;0 
BESCANO;973.594;4659.228;0 
C.BARBA;920.464;4616.214;0 
COLLBLAN;927.165;4594.687;0 
ESPLUGA;857.603;4593.618;34.12 
CALDERS;910.51;4637.874;0 
FATARELL;773.181;4560.128;0...