CODEWITHSUNDEEP
javascripthtmlleaflet
A.T
A.T

Reputation: 33

How come my circlemarker is not showing up on the map?

I am trying to create a circle marker on a location. It should be showing up on the map. But I cannot seem to find out why it isn't showing up. It seems like the .addTo() is not working.

function addr_search()
{
    var addr = "1100 Boulevard Robert-Bourassa #104, Montreal, Quebec H3B 3A5"
    var xmlhttp = new XMLHttpRequest();
    var url = "https://nominatim.openstreetmap.org/search?format=json&limit=3&q=" + addr;
    xmlhttp.onreadystatechange = function()
    {
        if (this.readyState == 4 && this.status == 200)
        {
            var myArr = JSON.parse(this.responseText);                      
           
            doc.lattitude.value=myArr[0].lat;
            doc.lattitude.value=myArr[0].lon;

           var temp = L.latLng(ConcordiaLat, ConcordiaLong);
           L.circleMarker(temp, { color: "green"}).addTo(mymap);
           L.circle(temp,{color:"blue",radius:1000}).addTo(mymap);

        }
        
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    }

</script>   

<form id="myForm">
    <label> <p>Search Address</label>
    <p>
    <input type="text" id="address" placeholder="Enter address"/>
    <button onclick="addr_search()" type="submit" id="button">Submit</button>
    <label><p>Lattitude&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;&ensp;Longitude<br></label>
        <input type="text" id="lat" placeholder="12.345"/>
        <input type="text" id="long" placeholder="12.345"/>
    <p id="distance"></p>


</form>

Upvotes: 2

Views: 152

Answers (1)

kboul
kboul

Reputation: 14600

You do not need these two lines

doc.lattitude.value=myArr[0].lat;
doc.lattitude.value=myArr[0].lon;

Also these two variables are undefined in the code you provided.

ConcordiaLat, ConcordiaLong

Apart from that it should work. Probably there is a mistake somewhere else in your map setup code.

Your addr_search function should look like this

function addr_search() {
        var addr =
          "1100 Boulevard Robert-Bourassa #104, Montreal, Quebec H3B 3A5";
        var url =
          "https://nominatim.openstreetmap.org/search?format=json&limit=3&q=" +
          addr;

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            var myArr = JSON.parse(this.responseText);

            var temp = L.latLng(myArr[0].lat, myArr[0].lon);
            L.circleMarker(temp, { color: "green" }).addTo(mymap);
            const circle = L.circle(temp, {
              color: "blue",
              radius: 1000
            }).addTo(mymap);

            mymap.fitBounds(circle.getBounds());
          }
        };
        xhttp.open("GET", url, true);
        xhttp.send();
      }

Optionally zoom your map around the added circle.

Demo

Upvotes: 1

Related Questions