[GIS] leaflet search control not showing up in geodjango app

geodjangohtmljavascriptleafletsearch window

I have a very basic geodjango app and I am trying to enable search control on it. I have found this question Adding a search box to a Leaflet.js example and the link brought me to what it seems like to be the correct page. I am trying to follow the simple example http://labs.easyblog.it/maps/leaflet-search/examples/simple.html.

steps so far

  1. downloaded the code https://github.com/stefanocudini/leaflet-search#examples

  2. added the leaflet-search.css and leaflet-search.js (from the src) folder to my html document.

Here is my entire html document code

<html>
{% load static %}
{% load leaflet_tags %}
<head>
    {% leaflet_js %}
    {% leaflet_css %}
    <title>Our Home</title>
    <style type="text/css">
        #gis {width: 80%;height:500px;}
    </style>
    <link rel=stylesheet" type="text/css" href="{% static 'search/src/leaflet-search.css' %}">


    <script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}" > </script>
    <script type="text/javascript" src="{% static 'search/src/leaflet-search.js' %}" > </script>

</head>
<body>
<h3>
    Maps are cool
</h3>
<br>
<div id="map"></div>

<script type="text/javascript">

    function our_layers(map,options){

        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
            maxZoom: 17,
            attribution: 'Map data: &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: &copy; <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
        });

        var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        });

        var counties = new L.GeoJSON.AJAX("{% url 'county' %}",{
            style: function colors(feature){
                switch(feature.properties.namelsad){
                    case 'Deal borough':
                        return{
                            color: 'orange',
                            fillOpacity: 0.8
                        };
                    break;
                    case 'Asbury Park city':
                        return{
                            color: 'purple',
                            fillOpacity: 0.8
                        };
                    break;

                }

            },
            onEachFeature: function(feature,layer){
                layer.bindPopup(feature.properties.namelsad.toString())
            }
        });
        counties.addTo(map);

        var incidences = new L.GeoJSON.AJAX("{% url 'incidences' %}",{

             onEachFeature: function(feature,layer){
                layer.bindPopup(feature.properties.name.toString())
            }
        });
        incidences.addTo(map);



    var data = [
        {"loc":[41.575330,13.102411], "title":"aquamarine"},
        {"loc":[41.575730,13.002411], "title":"black"},
        {"loc":[41.807149,13.162994], "title":"blue"},
        {"loc":[41.507149,13.172994], "title":"chocolate"},
        {"loc":[41.847149,14.132994], "title":"coral"},
        {"loc":[41.219190,13.062145], "title":"cyan"},
        {"loc":[41.344190,13.242145], "title":"darkblue"},
        {"loc":[41.679190,13.122145], "title":"Darkred"},
        {"loc":[41.329190,13.192145], "title":"Darkgray"},
        {"loc":[41.379290,13.122545], "title":"dodgerblue"},
        {"loc":[41.409190,13.362145], "title":"gray"},
        {"loc":[41.794008,12.583884], "title":"green"},
        {"loc":[41.805008,12.982884], "title":"greenyellow"},
        {"loc":[41.536175,13.273590], "title":"red"},
        {"loc":[41.516175,13.373590], "title":"rosybrown"},
        {"loc":[41.506175,13.273590], "title":"royalblue"},
        {"loc":[41.836175,13.673590], "title":"salmon"},
        {"loc":[41.796175,13.570590], "title":"seagreen"},
        {"loc":[41.436175,13.573590], "title":"seashell"},
        {"loc":[41.336175,13.973590], "title":"silver"},
        {"loc":[41.236175,13.273590], "title":"skyblue"},
        {"loc":[41.546175,13.473590], "title":"yellow"},
        {"loc":[41.239190,13.032145], "title":"white"}
    ];

    var markersLayer = new L.LayerGroup();  //layer contain searched elements

    map.addLayer(markersLayer);

    var controlSearch = new L.Control.Search({
        position:'topright',
        layer: markersLayer,
        initial: false,
        zoom: 12,
        marker: false
    });

    map.addControl( controlSearch );

    ////////////populate map with markers from sample data
    for(i in data) {
        var title = data[i].title,  //value searched
            loc = data[i].loc,      //position found
            marker = new L.Marker(new L.latLng(loc), {title: title} );//se property searched
        marker.bindPopup('title: '+ title );
        markersLayer.addLayer(marker);
    };


}
</script>
{% leaflet_map "gis" callback="window.our_layers" %}
</body>
</html>

this is the app below there are zero errors in the console but there is no search control box that appears

enter image description here

any ideas on what my problem could be?

As you can see below the div element thats holding the search box, exists on the top right and when I highlight it it highlights where the search box is but it does not show up. and if you look at the properties in in the div class for the search box where ever it says display: it follows with it a none

UPDATE

when I change style="display: none; max-width: 736.797px;" to

style="display: true; max-width: 736.797px;"

the search box shows up in the web map. so how do I enable that to be turned on from when I load the webpage

<input class="search-input" type="text" size="9" autocomplete="off" autocapitalize="off" placeholder="Search..." id="searchtext9" style="display: true; max-width: 736.797px;">

enter image description here

pretty stuck on how else to approach this problem. if anyone has any solutions or hints

update based on comments

1/2. I have not touched any css other than what is displayed on this question. if you mean leaflet-search.css of rows 8-10 this is what it is background-clip: padding-box;
-moz-border-radius: 4px;

  1. when I click on where the control search is this is what shows in the rules tab

    element {
    }
    .leaflet-right .leaflet-control {
    margin-right: 10px;
    }
    .leaflet-top .leaflet-control {
    margin-top: 10px;
    }
    .leaflet-right .leaflet-control {
    float: right;
    }
    .leaflet-popup-pane, .leaflet-control {
    cursor: auto;
    }
    .leaflet-control {
    float: left;
    clear: both;
    }
    .leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: visiblePainted;
    pointer-events: auto;
    }
    .leaflet-top, .leaflet-bottom {
    pointer-events: none;
    }
    .leaflet-container {
    font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
    }
    .leaflet-grab {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    }

this code

<input class="search-input" type="text" size="9" autocomplete="off" autocapitalize="off" placeholder="Search..." id="searchtext9" style="display: none;">

when I change to display: block the search box shows up

Best Answer

Okay, so after troubleshooting in the comments and in this chat we found out that the relevant <div> was always there, but it had 0x0 px. The magnifying glass (search icon) simply was not displayed. It is necessary, however, because it triggers the search bar to be displayed. No search icon = nowhere to click on = no search bar.

Now the search icon is a .png file that is referenced in leaflet-search.css . Only the leaflet js and css were copied over to the django project file so there was no image icon able to be loaded. The search control plugin was re-downloaded and all the files were placed in the django static folder. Eventually, it turned out, that the map couldn't find the CSS file because of some missing quotes and a wrong path. This is the correct <link> for the HTML <head>:

<link rel="stylesheet" type="text/css" href="{% static "leaflet-search-master/src/leaflet-search.css" %}">
Related Question