i am using leaflet control geocoder, i cannot figure out two things, the first is i want to position it in a div, not on the map, is there a way i can do that? if yes then how?

i have only come across the positioning method but it only lets me select it in the form of topleft topright etc. the second problem is that i want to set an icon both for when the marked location that pops up when geocoder gives result and for the actual geocoder (like a little search icon ), heres what i have.

I am relatively new to this.

 var geocoder = L.Control.geocoder({
    .on('markgeocode', function(e) {


1 Answer 1


Here is some of my code, I have a side panel with textboxes, when they hit the submit button, I form the url pass it to the geocoder, grab the first Lat/Lng response, and plot it as a marker. I used the Font_AwesomeMarkers so you will want to modify the marker it uses.

<label for="dtb">Str.</label> <input type="text" id="txtbx2"  /></br></br>
<label for="dtb">City</label> <input type="text" id="txtbx3" /></br></br>
<label for="dtb">State</label> <input type="text" id="txtbx4" class="txtbx" />
<label for="dtb">Zipcode</label> <input type="text" id="txtbx5" class="txtbx" />&nbsp;

<input type="submit" name="submit" value="Save"/>

var EurlA = theStr + "," + theCit + "," + theState + "&category=&outFields=*&forStorage=false&f=pjson";
var EurlB = "http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=";
var EurlC = (EurlB + EurlA).replace(/ /g, "%20");;

    function EloadXMLDoc(url) {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var data = this.responseText;
        xhttp.open("GET", url, true);

    function EFunction(response) {
        var obj4 = JSON.parse(response);
        var Ex = obj4.candidates[0].location.x;
        var Ey = obj4.candidates[0].location.y;
        console.log(Ex + ", " + Ey + " Esri Point");

    function drawpt(theY, theX, who) {

    esr = new L.Marker([ theY, theX ],{icon: L.AwesomeMarkers.icon({
      icon: 'certificate',
      prefix: 'glyphicon', // fa
      markerColor: setColor2('E')}) 
    var source = "<span class='box-blue'></span>Esri";
  • I would like to know where should I compile the above code Mr. Chappell? Jul 24 at 11:15

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.