I have a GUI application where data from my database are displayed on a table and also displayed as markers on Leaflet map. I have added the Geocode (L.Control.geocoder()) function into my application, and want to now show the markers, from my database, that fits into the map bounds of where my Geocode location is.

I have read up on map.toBBoxString() and map.getBounds() from Leaflet documentation which is what I think I would need to make a comparison and write a query for my database data to display in the 'Geo-coded' location entered . My problem is I don't know how to get the actual values and make a comparison for my Python query . Below is my search button part of code that connects to function to display data entered from user on table and map .

Part of the code below :

def search_all(self):

        print ('Searching All...')
        looking = str(self.lookall.text())       
        if looking == "":
            QMessageBox.about(self, "No Info ", " Please enter value ")         
        else :

            conn = #connection to DB

            cursor = conn.cursor()        
            query = "SELECT*FROM CT_ALL_F WHERE Lic_no LIKE  '%s' OR Licensee LIKE '%s' OR FREQ LIKE '%s' OR Power LIKE '%s' OR Installation_address LIKE '%s' OR Business_address LIKE '%s' OR Tel LIKE '%s' " %('%'+looking+'%','%'+looking+'%','%'+looking+'%','%'+looking+'%','%'+looking+'%','%'+looking+'%','%'+looking+'%')        
            results = cursor.fetchall()

            for row_number, row_data in enumerate(results):                
                for column_number, data in enumerate (row_data):                                        

                coordinates = []

                for result in results:        
                    coordinates.append((result[5], result[6] ,(result[0], result[1],result[2],result[3],result[4])))

                lat_center = sum([coordinate[0] for coordinate in coordinates]) / len(coordinates)
                lng_center = sum([coordinate[1] for coordinate in coordinates]) / len(coordinates)

                html = """
                        <!DOCTYPE html>
                        <style type="text/css">
                                html { height: 100%; }
                                body { height: 100%; margin: 0; padding: 0 }
                                #mapid { height: 100% }
                        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
                        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

                        <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
                        <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

                        <div id="mapDiv" style="width:100%; height:100%"</div>


                html += "var map = L.map('mapDiv').setView([{lat}, {lng}], 10);".format(lat=lat_center, lng=lng_center)                
                html += """
                        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '&copy; <a href="https://www.icasa.org.za/">ICASA</a> <br> <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',


                for latitude, longitude , frequency in coordinates:

                    html += "var marker = L.marker([{lat}, {lng}]);\n ".format(lat=latitude, lng=longitude)                   
                    html += "var popupLocation1 = new L.LatLng({lat}, {lng});".format(lat=latitude, lng=longitude )                    
                    html += """var popupContent1 = ("License number : {freq}<br>Licensee: {dek}<br>Frequency : {lek}<br>Power : {sek}<br>Location : {mek}<br>"),""".format(freq=frequency[0],dek=frequency[1],lek=frequency[2],sek=frequency[3],mek=frequency[4])
                    html += "popup1 = new L.Popup();"
                    html += "popup1.setLatLng(popupLocation1);"
                    html += "popup1.setContent(popupContent1);"
                    html+= "marker.bindPopup(popupContent1);"
                    html += "map.addLayer(popup1).addLayer(marker);"

                    html += "L.Control.geocoder().addTo(map);</script> </body> </html>"

I basically want to achieve following: User enters a certain Location on the Map with the Leaflet Geocode function. The Map then goes to that location. In addition to that, I want my markers displayed that fit within the map bounds. Thus if my Lat Long info in DB falls within map bounds, display it on map. Map View

DB Sample

  • From your long description it's not clear where are you stuck at the moment. It has to be one thing, not several. – TomazicM Sep 6 '19 at 13:07
  • Please see the text on the added pictures . That should explain it a little bit clearer – GarthFabean Sep 6 '19 at 21:40
  • Since I'm not familiar with Python, I'm not able to help you here. – TomazicM Sep 7 '19 at 11:18
  • Which database are you using? PostGIS has this built-in. – neogeomat Sep 9 '19 at 9:49

It would be better to use a python geocoder instead of Leaflet (L.Control.geocoder()) as leaflet is client-side and you will have to pass the value again to server. With python you can get it directly on the server-side. Then you can easily extract the map bounds in python objects, which can be used for comparisons.

| improve this answer | |
  • I have done that yes . The only problem now is comparing the coordinates from my map to that of my lat/long in my DB . I have a MS Access Db , my lat/long data in my db is indicated as double . The lat/longs from geocoder is float . Python says there is a data mismatch when comparing the two – GarthFabean Sep 9 '19 at 14:46
  • you should post it as a new question – neogeomat Sep 10 '19 at 9:24

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.