Dash Leaflet Zoom-in when the user clicks in a table

Dash Python
,
1

Hello guys,

I have started using Dash Leaftlet and one feature that I would like to implement.

I would like to allow the user to click on a table row and once it is done, it should do the same as the “zoomToBoundsOnClick” do;

I have found a rudimentary way to do this, but I would like to know if it has a better way to implement this kind of behavior.

My solution is working but the main problem I found so far is that as the zoom is being hard-coded in the callback sometimes the zoom is so far, and other times it is too focused that goes inside the property bounds

image
image934×331 27.2 KB

And with a certain frequency, I’m facing problems like you can see in the below image (I have clicked in the 2636713 property ID row)

image
image847×617 58.4 KB

I would appreciate it a lot any help about how to solve this problem in a better way

Thank you in advance for any help.
Leonardo

2

If you are trying to zoom the map to fit the polygon, you could simply calculate the bounding rectangle and set the bounds property of the Map component accordingly.

3

Hey @Emil, thank you for your help mate.

I thought about this but I didn’t find any reference about how to convert a multi-polygon to get the lat_long correctly or the bounds.

Do you have any reference about how could I do this?

The solution I’m currently using is the below:


def coordinates_of_each_propid(geodata):
    lat=max([val[0] for val in geodata['loc']['coordinates'][0][0]])
    long=min([val[1] for val in geodata['loc']['coordinates'][0][0]])
    return {"lat_long":[long, lat]}

Below is an example of a random multi-polygon I found… I would appreciate it a lot if you can give me an example or reference about how to get the bounds from the below data.

{'type': 'MultiPolygon',
 'coordinates': [[[[145.9295888351552, -30.073858379804392],
    [145.92868887847635, -30.07992435871148],
    [145.92613591910447, -30.079563379245428],
    [145.92512393060622, -30.080823383136476],
    [145.92732383467012, -30.06604043586742],
    [145.93018679535498, -30.06461341510493],
    [145.9319297695131, -30.063490407716927],
    [145.93309475521846, -30.06273939652624],
    [145.93231075658207, -30.06178140704219],
    [145.93458972294775, -30.060514393318897],
    [145.9348267216094, -30.060382398716513],
    [145.93813769304018, -30.062708363228182],
    [145.9378506932993, -30.063448357687776],
    [145.93654672108732, -30.06679835828652],
    [145.9346937588972, -30.071563349986945],
    [145.93420977570042, -30.07280734421016],
    [145.9295888351552, -30.073858379804392]]],
  [[[145.92799390112327, -30.08460634395908],
    [145.92792090743592, -30.085097345952022],
    [145.9279119076001, -30.085089332154098],
    [145.92788091015802, -30.085056344708505],
    [145.92784690978272, -30.085028341235613],
    [145.92781190544167, -30.08500034672676],
    [145.9277819119652, -30.084975346187093],
    [145.9277479115899, -30.08494934168175],
    [145.9277119122471, -30.084919348205347],
    [145.92767091100347, -30.08488734679753],
    [145.9276399135614, -30.0848633502236],
    [145.92759891231788, -30.084830344850047],
    [145.9275589150401, -30.084795349472927],
    [145.92751791379646, -30.084758346164392],
    [145.92748191445367, -30.084727348722254],
    [145.92745091701158, -30.084700349215154],
    [145.92741391370294, -30.084674344709754],
    [145.92737991332763, -30.084652338139392],
    [145.92734191501734, -30.08462435259446],
    [145.9273049117087, -30.08459735308736],
    [145.92727091133338, -30.084571348582017],
    [145.92723691095807, -30.084547352008087],
    [145.9271969136803, -30.08451335163278],
    [145.9271639172706, -30.084488351093114],
    [145.92713092086103, -30.08446435451924],
    [145.92709791548748, -30.084441352947067],
    [145.92706391511217, -30.084413349474232],
    [145.927028919735, -30.08438235203215],
    [145.9269979222929, -30.084357351492486],
    [145.92696191398613, -30.08432734008818],
    [145.92692992154218, -30.084299354543248],
    [145.9268919232319, -30.084271342106433],
    [145.92685891785834, -30.084245355528992],
    [145.92682592144877, -30.084222353956875],
    [145.9267889271041, -30.084196358415454],
    [145.92675291879732, -30.084173356843337],
    [145.92671792342026, -30.084149360269464],
    [145.92667492320913, -30.084122360762308],
    [145.9266399188681, -30.084102353159437],
    [145.9265639222474, -30.084050353112673],
    [145.92653292480531, -30.08402435757131],
    [145.9265009233975, -30.08400036099738],
    [145.92646992595542, -30.083970358557053],
    [145.92643892851322, -30.083944363015632],
    [145.9264069271054, -30.083919362476024],
    [145.9263749256976, -30.0838933490067],
    [145.9263389263548, -30.083863355530298],
    [145.92630292701187, -30.08383836395467],
    [145.92626892663657, -30.083817361349986],
    [145.92623092832628, -30.083795363743604],
    [145.92619592398512, -30.08377436113898],
    [145.92615493170558, -30.083747361631822],
    [145.92611292649633, -30.083722361092214],
    [145.9260789261209, -30.08370134952355],
    [145.9260449257456, -30.083678365879393],
    [145.9260109253703, -30.083656359309032],
    [145.92597193205825, -30.083634361702593],
    [145.9259329297821, -30.083613368061947],
    [145.9258919285386, -30.08359236545732],
    [145.92584593435834, -30.08356836888339],
    [145.92580792708395, -30.08354636231303],
    [145.92576693480441, -30.08352836264163],
    [145.92571694268906, -30.083505370033436],
    [145.92567593248157, -30.08348436742881],
    [145.9256359352038, -30.083465363791618],
    [145.92560093086274, -30.083445365152727],
    [145.92556193755058, -30.08342036461312],
    [145.92552693320954, -30.08340036597417],
    [145.92549093386674, -30.08337836836779],
    [145.9254499326231, -30.083354371793916],
    [145.92541093931106, -30.083331370221742],
    [145.9253729320368, -30.083304370714643],
    [145.92533693269388, -30.08328136914247],
    [145.92530193731682, -30.08326137050358],
    [145.92526593797402, -30.083242366866443],
    [145.9252249367304, -30.08322137322574],
    [145.92518593445436, -30.08320337355434],
    [145.92514693217834, -30.08318337491545],
    [145.92511094179952, -30.083164371278315],
    [145.9250729434891, -30.08314136970614],
    [145.92503293724735, -30.083117373132268],
    [145.92499094100208, -30.083091377590847],
    [145.92495393769343, -30.083065373085503],
    [145.9249129454139, -30.083038373578404],
    [145.92487293917213, -30.083011374071248],
    [145.92483693982922, -30.08298437456415],
    [145.92480594238714, -30.082961372991974],
    [145.92506593365692, -30.081212384003436],
    [145.92623190540007, -30.07976038062924],
    [145.92866187896925, -30.080105359391382],
    [145.92799390112327, -30.08460634395908]]]]}

Thank you in advance

4

@kabure I’d be willing to bet the python library shapely can do that pretty quickly.

5

Hello friend,

You’re right, I have solved the problem and got the bounds with the below code

from shapely.geometry import shape

geom = shape(geodata)
bounds = geom.bounds

So, with the bounds, the app is correctly centering the map in the properties;

Anyway, thank you for your attention