Not sure if you wanted to just read from textboxes and plot points because you also showed a JSON file. So I gave examples of both. First, took JSON data and saved it as a file "points1.json" placed it in the same folder as my HTML page. (In a localhost folder)
Next I noticed you JSON file needed to Have [] brackets around it. So I put [ at the start and ] and the end of the file. Next I noticed your lat long was a string. SO When I pulled the coordinates apart I used parseFloat to convert them to numbers.
I also included code to read from the textboxes and plot that value. I kept it simple, without a form and only one pair.
Point1.json:
[{
"name": "1st Valley Bank",
"latlng": "8.481868, 124.638211"
}, {
"name": "3Cs Store",
"latlng": "8.472811, 124.633821"
}]
My HTML file:
<!DOCTYPE html>
<html>
<head>
<title>2 Ways to use JSON</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div id="header">
<div id="Point" class="b">
<label>
Enter Coordinates:
<input id="Ypt" placeholder="Latitude" />
<input id="Xpt" placeholder="Longitude" />
<input id="Name" placeholder="Site Name" />
</label>
<button id="goBtn" onClick="goBtn()">Go</button>
</div>
</div>
<div id="map" style="width: 600px; height: 400px;"></div>
</div>
<script>
var url = 'points1.json'
var map = L.map('map').setView([8.48171, 124.63010 ], 13);
var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
osm.addTo(map);
/// For reading a JSON file
var myPts = L.layerGroup();
$.getJSON(url, function(data) {
for (i = 0; i < data.length; i++) {
var coords = data[i].latlng;
var a = coords.split(",");
var lat = parseFloat(a[0]);
var lng = parseFloat(a[1]);
var Line1 = data[i].name;
var x = L.marker([lat,lng]).bindPopup("<b>Name: </b>" + Line1 );
myPts.addLayer(x);
}
});
myPts.addTo(map);
// End reading a JSON file
// Read the HTML Textboxes and plots the data as points
function goBtn() {
var theLatValue = document.getElementById("Ypt").value;
var theLonValue = document.getElementById("Xpt").value;
var theNameValue = document.getElementById("Name").value;
L.marker([parseFloat(theLatValue ),parseFloat(theLonValue)]).bindPopup("<b>Name: </b>" + theNameValue ).addTo(map);
}
</script>
</body>
</html
>