0

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: '&copy; <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: &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 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>
Improve this question
3
  • Yes, it's doable, it doesn't matter from where or how you load your features.
    – TomazicM
    Feb 14, 2021 at 11:04
  • Thanks! I was able to do this by passing in the geojson polygon as a layer into the search control and display the info by using bindPopup. Let's say I have thousands of polygons on the web map, and I want to hide all of it from the user. I then give the user a single polygon's unique ID. The user keys in the ID in the search bar and the user is able to see the shape of a single polygon together with its attributes. The rest of polygons remains hidden from the user for the entire duration of the user's time on the web map. Can this be done in Leaflet? I'm open to all suggestions.
    – MajorLazer
    Feb 15, 2021 at 13:29
  • Question should be posed as a question, not as a comment. If you have a new question, please post it as a separate question, together with the relevant code of what you have tried till now.
    – TomazicM
    Feb 15, 2021 at 13:33

1 Answer 1

Reset to default
0

I managed to do this by passing in the geojson polygon as a layer into the search control and display the info by using bindPopup. In case anyone has the same question, here is the 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 '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>Welcome</h3>
<br>
<script type="text/javascript">
    function our_layers(map,options){
        var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'    
            
        });
    

        var datasets2 = new L.GeoJSON.AJAX("{% url '<url name>' %}",{
            onEachFeature: function(feature,layer){
            popupOptions = {maxWidth: 200};
                layer.bindPopup('<h1>name: '+feature.properties.objectid+'</h1>name: '+feature.properties.shape_leng+'</h1><br>name: '+feature.properties.shape_area);
                
            }
            
        });

        datasets2.addTo(map);
    
        var searchControl = new L.Control.Search({
            layer: datasets2,
            propertyName: '<attribute name>',
            marker: false,
            moveToLocation: function(latlng, title, map) {
                var zoom = map.getBoundsZoom(latlng.layer.getBounds());
                map.setView(latlng, zoom); 
            }
        });

        searchControl.on('search:locationfound', function(e) {
            e.layer.setStyle({fillColor: '#3f0', color: '#0f0'});
            if(e.layer._popup)
                e.layer.openPopup();

        }).on('search:collapsed', function(e) {
            featuresLayer.eachLayer(function(layer) {   
                featuresLayer.resetStyle(layer);
            }); 
        });

        map.addControl( searchControl );  


        
    }

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

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.