why is my circlemarker not showing up on the map?

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

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top