2

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

  • If you look at the inspector tab of the tutorial you linked to, you can see that the element with class search-cancel also has `style="display:none;" there. So this is likely not the issue. (See this screenshot: postimg.cc/image/bs54zvavl) – Stefan Aug 7 '18 at 17:23
  • dang, okay well when I change up on the web browser it actually displays the search box. what else could it be? I am trying to follow the directions exactly as they are... – ziggy Aug 7 '18 at 17:26
  • According to MDN, true is not an available value for display. So this can't really be it... Do you have a live demo of your app? – Stefan Aug 7 '18 at 17:28
  • okay so even stranger how that works – ziggy Aug 7 '18 at 17:29
  • no its only a small local project (actually my first real web project) – ziggy Aug 7 '18 at 17:30
1
+50

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" %}">

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.