1

I am having the following problem:

My target is a hybrid application with leaflet. I create a drop down menu with

html/CSS/JQuery. Here is the code:

<nav>
<ul>
    <li id="menuPoint1"><image src="../img/Icon/info.png"/>
        <ul class="subMenuPoint1">
            <li class="firstLi"><a href='#'>Interpretation</a></li>
            <li ><a href='#'>Kennblatt</a></li>
            <hr>
            <image src="http://maps.ioer.de/cgi-bin/wms?MAP=S02RG_1000&&SERVICE=WMS&VERSION=1.3.0&SLD_VERSION=1.1.0&REQUEST=GetLegendGraphic&FORMAT=image/jpeg&LAYER=S02RG_2012_a"/>
        </ul>
    </li>
    <li id="menuPoint2"><image src="../img/Icon/ebenen.png"/></li>
    <li id="menuPoint3"><image src="../img/Icon/kalender.png"/></li>
    <li id="menuPoint4"><image src="../img/Icon/lupe.png"/>
        <ul class="subMenuPoint4">
            <li id="search"></li>
        </ul>
    </li>
    <li id="menuPoint5"><image src="../img/Icon/helligkeit.png"/></li>
</ul>

Now I like to call the Leaflet Geosearch Plug in from https://github.com/smeijer/L.GeoSearch at the point li id="search"

I know how to call the function within the JavaScript part, but not within the list element, which is outside the Leaflet function.

The code for the Leaflet Map is:

new L.Control.GeoSearch({
        position: 'topcenter',
        provider: new L.GeoSearch.Provider.OpenStreetMap(),
    }).addTo(map);

Which I like to implement in the drop down menu.

  • Does the search option support changes in its visibility? If you leave it as a global you could toggle the visibility with the list item. Or you put the JS event listener in the leaflet code after the list item is created (so it is there and doesn't throw a undefined exception). Have you tried any of this? Outline what you may have tried in an edit to your question. – Branco Jun 15 '15 at 13:16
  • I think it is not possible, because this small snippet based on the following function: github.com/smeijer/L.GeoSearch/blob/master/src/js/… which used a DOM Element of the Leaflet lib – Sloper88 Jun 15 '15 at 14:09
2

I found the solution :

var search = document.getElementById('suche');

    search.appendChild(new L.Control.GeoSearch({
                      provider: new L.GeoSearch.Provider.OpenStreetMap(),
                }).onAdd(map));

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.