I am trying to add a search function into my Geodjango-Leaflet-Openstreetmap web map. I have around 540000 polygons of property boundaries that were drawn in Arcmap; the polygons will be imported to the web map later. I want to be able to search for each individual polygons by typing in the polygon's ID and have its exact position, polygon's shape, and attributes (address, dimensions, coordinates, owner, etc) show up on the web map.
I have just copied the code from here "leaflet search bar" into my web map and it seems to only work for markers that are predefined in the index.HTML page.
Is this something that is doable in Geodjango or am I better off using something else like ArcGIS Web Appbuilder?
Here is my .html code
<!DOCTYPE html>
<html>
{% load static %}
{% load leaflet_tags %}
<head>
{% leaflet_js %}
{% leaflet_css %}
<title>Home</title>
<style type="text/css">
#gis {width: 100%;height:1080px;}
</style>
<link rel="stylesheet" type="text/css" href="{% static 'routing/leaflet-routing-machine.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css' %}">
<script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}" > </script>
<script type="text/javascript" src="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.js' %}" ></script>
<script type="text/javascript" src="{% static 'routing/leaflet-routing-machine.js' %}" ></script>
</head>
<body>
<h3>Welcome</h3>
<br>
<script type="text/javascript">
function map_layers(map,options){
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
var OpenTopoMap = L.tileLayer('http://{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 baseLayers = {
"OSM": osm,
"OpenTopoMap":OpenTopoMap
}
L.control.groupedLayers(baseLayers, groupedOverlays).addTo(map);
var routing = L.Routing.control({
waypoints: [
L.latLng(-0.23, 36.87),
L.latLng(0.23, 37.64)
]
}).addTo(map);
}
</script>
{% leaflet_map "gis" callback="window.map_layers" %}
</body>
</html>