JSFiddle - React, Tailwind, and code Playground

by harifrais

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<div class="detl" >  
 <input  class="name" placeholder='title ?' />
 <input  class="lat" placeholder='latitude ?'  />
 <input  class="lon" placeholder='longitude ?' />
 <button class='remove' >X</button>
</div>
<button id='add'>Add</button><br>
<button id='check' >Submit</button>
<div id="map"></div>

CSS

#map { height: 500px; }

JavaScript

var latlngArray = [[]];
var map = L.map('map').setView([13.027912,80.260514], 8);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '',maxZoom: 18, }).addTo(map);
var markerLayer = L.geoJson();


var smallIcon = new L.Icon({
   iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-icon.png',
   iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-icon-2x.png',
   iconSize:    [25, 41],
   iconAnchor:  [12, 41],
   popupAnchor: [1, -34],
   shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
   shadowSize:  [41, 41]
 });

$('#add').on('click',function(){
$("<div class='detl' ><input  class='name' placeholder='title ?' /><input  class='lat' placeholder='latitude ?'  /><input  class='lon' placeholder='longitude ?' /><button>Remove</button></div>").insertBefore(this);
});

$(document).on('click','.remove',function(){
$(this).closest('.detl').remove();
 formGeoJsonArray();
});

$('#check').on('click',function(){
   formGeoJsonArray();
});

function formGeoJsonArray(){
var latLanAray = [];  
 $(".detl").each(function(){  
   var name = $(this).find('.name').val();
   var lat = $(this).find('.lat').val();
   var lon = $(this).find('.lon').val();
   if(name!='' && lat!='' && lon!=''){    
    var nArray = {
      "type":"Feature",
      "properties": { "title": name },
      "geometry": {
      "type": "Point",
        "coordinates": [parseFloat(lon),parseFloat(lat)]
      }
  };  
    //var nArray = [name,parseFloat(lat),parseFloat(lon)];
    latLanAray.push(nArray);
   }
 });  
  var geoJsonAray = {
  "type": "FeatureCollection",
     "features": latLanAray
  };
  loadMap(geoJsonAray);
}

function loadMap(data){

   if (map.hasLayer(markerLayer)) {
    markerLayer.clearLayers();  
      map.removeLayer(markerLayer);
   }else{
    markerLayer.clearLayers();    
   }
   markerLayer = L.geoJson(data, {
     pointToLayer: function(feature, latlng) {
   ...