lovasoa / SQLpage

SQL-only webapp builder, empowering data analysts to build websites and applications quickly
https://sql.ophir.dev
MIT License
882 stars 62 forks source link

Zoom in the map component does not work? #378

Closed amrutadotorg closed 3 weeks ago

amrutadotorg commented 4 weeks ago

Hi, while developing the page with the map component, I found that the zoom attribute does not work if the second select statement is present. Is this intentional?

thank you

Screenshot 2024-06-06 at 12 33 40

select 
    'map'   as component,
    'New Delhi-1' as title,
    28.6139     as latitude,
    11     as zoom,
    77.209      as longitude;
select 
    'map' as component,
    'New Delhi-2  ' as title,
    11     as zoom;
select 
    28.6139     as latitude,
    77.209      as longitude;
lovasoa commented 3 weeks ago

Hello ! I think there is a confusion here. The zoom level is the same on both your screenshots. The attribute 11 as zoom did work in both cases. The only difference is in where the map is centered. In the first example, you provided latitude and longitude as top-level attributes, so the map is centered at the place you specified.

image

In the second example, you did not provide a latitude and longitude as top level attributes, so the map is still zoomed to zoom level 11, but centered on "lat=48,lng=3" (the default value when no top-level latitude and longitude are provided).

The second query adds pins to the map, and in the second example, if you manually center the map on New Dehli, you'll see that the point was successfully created.

In the end, what you want is probably to specify both top-level and row-level coordinates to create a pin and center the map on it:

select 
    'map'   as component,
    'New Delhi-3' as title,
    11     as zoom,
    28.6139     as latitude,
    77.209      as longitude;
select 
    28.6139     as latitude,
    77.209      as longitude;

Screen Shot 2024-06-07 at 08 00 43

lovasoa commented 3 weeks ago

I updated the default behavior to remove the default centering on "lat=48,lng=3" which was confusing. Now when top-level coordinates are omitted, the map centers on the pins that you add to it.

Now this

select 
    'map'   as component,
    'New Delhi-1' as title,
    28.6139     as latitude,
    11     as zoom,
    77.209      as longitude;

select 
    'map' as component,
    'New Delhi-2  ' as title,
    11     as zoom;
select 
    28.6139     as latitude,
    77.209      as longitude;

select 
    'map'   as component,
    'New Delhi-3' as title,
    28.6139     as latitude,
    11     as zoom,
    77.209      as longitude;
select 
    28.6139     as latitude,
    77.209      as longitude;

select 
    'map'   as component,
    'New Delhi-4' as title,
    28.6139     as latitude,
    77.209      as longitude;

select 
    'map'   as component,
    'New Delhi-5' as title;
select 
    28.6139     as latitude,
    77.209      as longitude;

displays like that:

image

amrutadotorg commented 3 weeks ago

awesome, thank you for the explanation