0

It's my first time using Leaflet and I wanted to simply put two markers based from my inputs. I managed to connect my JSON file with the JavaScript and the only problem I have is how to dynamically display two markers based from the inputs.

My HTML file:

<span class="form-label">
            <input type="text" name="srce" id="src" placeholder="Source">
        </span>
        <span class="form-label">
        <input type="text" name="dstn" id="dstn">
        </span>
        <span class="form-label">
        <button class="calculate" type="submit">Calculate</button>
        </span>

snippet of my json file:

    { "name": "1st Valley Bank",
   "latlng": "8.481868, 124.638211"
    },
    {
   "name": "3Cs Store",
   "latlng": "8.472811, 124.633821"
    }

and the part where I want the latlngs to be dynamically inputted (Leaflet file):

var marker1 = L.marker([8.47753, 124.64646]).addTo(mymap); 
var marker2 = L.marker([8.484844, 124.638073]).addTo(mymap);

I've searched through the other queries and I think there's a simpler way in integrating these two.

|improve this question
0

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: '&copy; <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

>

|improve this answer
  • The textboxes will accept the "name" input. Say for example, the input form "dstn" will receive "1st Valley Bank" and the "src" input form will receive "3Cs Store". After the user will click the calculate button, the latitudes and longitudes of these inputs will then be pinned (2 pins) on the map. Is that possible for Leaflet? – Mina Feb 20 at 14:11
  • If the textboxes have name, lat, long, you can plot the point with the name in the popup. If you think someone will type in the name and it will match your file and plot the point. You have a logic problem as if they type it wrong or wrong case it's won't match. Better to use a dropdown select were you control the input. – Bill Chappell Feb 20 at 14:17
  • I do have, sir :) I technically have a dropdown list of the names fetched from the JSON file. All I really need is that when a user chose a place, say for example, the 3Cs store for the source input, it will also be plotted on the map. – Mina Feb 20 at 14:49
  • Here is an example using JQuery Autocomplete. I read in my JSON to populate it's key:value, where the name could be key and latlng the value. Then using somethng like my GoBtn function above, parse it apart and create the marker on the fly. view-source:gistechsolutions.com/leaflet/DEMO/senate/index.html or look into array.filter to find the latlng from your dropdown selected. – Bill Chappell Feb 20 at 15:53
0

Since you are already using python, it would be easier to use folium library. Folium integrates python with leaflet.

|improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.