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
downloaded the code https://github.com/stefanocudini/leaflet-search#examples
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: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, <a href="http://viewfinderpanoramas.org">SRTM</a> | Map style: © <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: '© <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
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;">
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;
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
search-cancelalso has `style="display:none;" there. So this is likely not the issue. (See this screenshot: postimg.cc/image/bs54zvavl)trueis not an available value fordisplay. So this can't really be it... Do you have a live demo of your app?