place 2 windows exactly above each other

[janeik]

hi.
I have 1 root window containing controls and a map widget,showing a modern map.
(approx line no 12-26)
and
1 top window. containing a label with an image (of a historical map) assigned.
(approx line no 153-167). (Preferred shown without title field, but not a must.)

I have no idea of fitting the image exactly over the map window(x=450,y=100) at root window (named: window)
I have tried several approaches, last shown using frame but the image is stubborn, simply refuse to move.

Perhaps some of You have a solution?
Attached is an image showing the issue.

import tkinter
import tkintermapview
from tkinter.ttk import *
import customtkinter
from PIL import ImageTk,Image
from tkinter import *
import pyperclip
import pyautogui


    #------------init window------------
window = Tk()
window.geometry(f"{1920}x{1200}")
window.minsize(1920, 1200)
window.resizable(False, False)
window.title("tittel")
window.state("normal")
window.config(background="#704824")
window.wm_attributes('-topmost', 'True')

#------------init map----------------
map_widget = tkintermapview.TkinterMapView(window, width=1000, height=1000, corner_radius=0)
map_widget.place(x=460,y=100)
# Set default values
map_widget.set_position(60.03345, 11.35806, marker = True)
map_widget.set_zoom(16)


#---------------xy screen coords of movement mouse----------
def motion(event):
    inp_posskjermx["text"] = f"{event.x}"
    inp_posskjermy["text"] = f"{event.y}"
    inp_posskjermx.configure(text=f"{event.x}") # , {event.y}")
    inp_posskjermy.configure(text=f"{event.y}") # , {event.x}") 
window.bind('<Motion>', motion)     

#----------left MB clicked view geo coordinates----------------
def left_click_event(coordinates_tuple):
    geoposlon, geoposlat = coordinates_tuple
    # inp_longitude.configure(text=str(geoposlon))
    text1= str(geoposlon)
    text2= str(geoposlat)
    set_text1(text1)
    set_text2(text2)
    # inp_latitude.configure(text=str(geoposlat))
    
map_widget.add_left_click_map_command(left_click_event)

#--------------right mb clicked
def add_marker_event(coords):
    new_marker = map_widget.set_marker(coords[0], coords[1], text="new marker")
map_widget.add_right_click_menu_command(label="Add Marker",
                                        command=add_marker_event,
                                        pass_coords=True)


#--------------some in out controls-------------    
# velgmapsup = customtkinter.CTkLabel(window,font=("Ariel",14),text_color="#ffd700", text="Velg mapsupplier")# .place(x=1480,y=143)

slide1val= customtkinter.CTkLabel(window, width=50,font=("Ariel",16,"bold"),text_color="#000000",fg_color="#e1c79f", text="", justify=("center"))
slide1val.place(x=1800,y=107)


inp_posskjermy = customtkinter.CTkLabel(window, width=45, fg_color="#e1c79f", text_color="#000000", text ="original", font=("Ariel",16,"bold"), justify=("left"))
inp_posskjermy.place(x=255,y=277)
inp_posskjermx = customtkinter.CTkLabel(window,width=45, fg_color="#e1c79f", text ="original", font=("Ariel",16,"bold"), justify=("left"))
inp_posskjermx.place(x=160,y=277)
# adresse = customtkinter.CTkLabel(window,width=1805, fg_color="#e1c79f", text_color ="#aa0000", font=("Ariel",20,"bold"), text="Adresse", justify=("center"),anchor="center").place(x=58,y=16)
inp_adresse = customtkinter.CTkEntry(window, width=1800, font=("Ariel",16,"bold"), placeholder_text="Fjellvegen 4, Auli, Norway ", justify=("center"))
inp_adresse.place(x=67,y=5)

#----------view longitude and latitude coordinates----------------------
inp_longitude = customtkinter.CTkEntry(window, width=200, font=("Ariel",16,"bold"), placeholder_text="Longitude decimal", justify=("center"))
inp_longitude.place(x=540,y=58)
inp_latitude = customtkinter.CTkEntry(window, width=200, font=("Ariel",16,"bold"), placeholder_text="Latitude decimal", justify=("center"))
inp_latitude.place(x=1160,y=58)
def set_text1(text1):
    inp_longitude.delete(0,END)
    inp_longitude.insert(0,text1)
    return
def set_text2(text2):
    inp_latitude.delete(0,END)
    inp_latitude.insert(0,text2)
    return



#---------------------change map supplier-----------------------

def change_map(new_map: str):
        if new_map == "OpenStreetMap":
            map_widget.set_tile_server("https://a.tile.openstreetmap.org/{z}/{x}/{y}.png")
        elif new_map == "Google normal":
            map_widget.set_tile_server("https://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}&s=Ga", max_zoom=22)
        elif new_map == "Google satellite":
            map_widget.set_tile_server("https://mt0.google.com/vt/lyrs=s&hl=en&x={x}&y={y}&z={z}&s=Ga", max_zoom=22)
map_option_menu = customtkinter.CTkOptionMenu(window,values=["OpenStreetMap", "Google normal", "Google satellite"],command=change_map)
map_option_menu.place(x=1490,y=250)


#-------------arrow keys for transparency num arrow keys for rootmap movement------------------
def left(event):
    x=10
    y=10
    window.move(map_widget,x,y)
window.bind("<Left>", left)

def right(event):
    pass
window.bind("<Right>", right)

#------------slider for mapview transparency--------------------------------

def slider1_event(value):
    window.attributes("-alpha",slider1.get())
    slide1val.configure(text=str(round(value,2)))
    
slider1 = customtkinter.CTkSlider(window, fg_color="red", from_=0, to=1.0, number_of_steps=20,command=slider1_event)
slider1.place(x=1590,y=107)


#----------------calc if a point is within a rectangle--------------------

def area(x1, y1, x2, y2, x3, y3):
     
    return abs((x1 * (y2 - y3) +
                x2 * (y3 - y1) +
                x3 * (y1 - y2)) / 2.0)
    
def check(x1, y1, x2, y2, x3,
          y3, x4, y4, x, y):
               
    # Calculate area of rectangle ABCD
    A = (area(x1, y1, x2, y2, x3, y3) +
         area(x1, y1, x4, y4, x3, y3))
 
    # Calculate area of triangle PAB
    A1 = area(x, y, x1, y1, x2, y2)
 
    # Calculate area of triangle PBC
    A2 = area(x, y, x2, y2, x3, y3)
 
    # Calculate area of triangle PCD
    A3 = area(x, y, x3, y3, x4, y4)
 
    # Calculate area of triangle PAD
    A4 = area(x, y, x1, y1, x4, y4);
 
    # Check if sum of A1, A2, A3
    # and A4 is same as A
    return (A == A1 + A2 + A3 + A4)    
    
#---------create top lvl window ---------------

w="1000"
h="1000"
top = Toplevel()
top.geometry('{}x{}'.format(w, h))
imageName=PhotoImage(file="D:\\bilde/auli.png")     
mylbl = Label(top,image=imageName)
top.wm_attributes('-fullscreen', 'True')
top.wm_minsize(width=1000, height=1000)
top.wm_maxsize(width=1000, height=1000)

mylbl.grid(column=0, row=0)
top.columnconfigure(0, weight=0)
top.rowconfigure(0, weight=0)


inp_markno = customtkinter.CTkEntry(window, placeholder_text="123", justify=("center"))
inp_markno.place(x=160,y=100)
# inp_markno = customtkinter.CTkLabel(window, width=140, fg_color="#e1c79f", font=("Ariel",14,"bold"),text_color="#aa0000", text="", justify=("left"))
# inp_markno = customtkinter.CTkText(window,width=140, fg_color="#e1c79f", font=("Ariel",14,"bold"),text_color="#aa0000", text="", justify=("left"))
inp_totmarkno = customtkinter.CTkLabel(window, width=140, fg_color="#e1c79f", font=("Ariel",14,"bold"),text_color="#aa0000", text="", justify=("left")).place(x=160,y=50)
markno = customtkinter.CTkLabel(window, width=140, font=("Ariel",14,"bold"),text_color="#ffd700", fg_color="#704924", text="MARKØR NO").place(x=160,y=130)
mark = customtkinter.CTkLabel(window, width=140, font=("Ariel",14,"bold"),text_color="#ffd700", fg_color="#704924", text="TOTAL MARKØRER").place(x=160,y=70)
eventid = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),fg_color="#704924",text_color="#ffd700", text="EVENT ID:", justify=("left")).place(x=12,y=169)
poskart = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),fg_color="#704924",text_color="#ffd700", text="POS.KART:", justify=("left")).place(x=12,y=205)
zoomlvl = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),fg_color="#704924",text_color="#ffd700", text="ZOOM LVL:", justify=("left")).place(x=12,y=241)
posskjerm = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color = "#ffd700",  text="POS.SKJERM:", justify=("left"))
posskjerm.place(x=12,y=277)
objnavn1 = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="OBJ.NAVN1:", justify=("left")).place(x=12,y=313)
objnavn2 = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="OBJ.NAVN2:", justify=("left")).place(x=12,y=349)
hendelse = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="EVENT:", justify=("left")).place(x=12,y=385)
år = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="ÅR", justify=("left")).place(x=12,y=421)
objtype = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="OBJ.TYPE:", justify=("left")).place(x=12,y=457)
sted = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="STED:", justify=("left")).place(x=12,y=493)
kommune = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="KOMMUNE 1947:", justify=("left")).place(x=12,y=529)
fylke = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="FYLKE:", justify=("left")).place(x=12,y=565)
land = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="LAND:", justify=("left")).place(x=12,y=601)
country = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="COUNTRY:", justify=("left")).place(x=12,y=637)
webaddress = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="URL:", justify=("left")).place(x=12,y=673)
urlbilde1 = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="URL BILDE 1:", justify=("left")).place(x=12,y=709)
urlbilde2 = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="URL BILDE 2:", justify=("left")).place(x=12,y=745)
stitilbilde = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="STI TIL BILDE:", justify=("left")).place(x=12,y=781)
notice = customtkinter.CTkLabel(window, font=("Ariel",14,"bold"),bg_color="#704924",text_color="#ffd700", text="NOTIS", justify=("left")).place(x=12,y=817)
# Create text widget and specify size.
inp_noti= Text(window, height = 5, width = 52)
inp_noti.place(x=12,y=853)
btnlongitude = customtkinter.CTkButton(window, width=85, font=("Ariel",16,"bold"), fg_color="#add19e",text_color="#aa0000", text="LONG").place(x=450,y=56)
btnlatitude = customtkinter.CTkButton(window, width=85, font=("Ariel",16,"bold"), fg_color="#add19e",text_color="#aa0000", text="LATI").place(x=1365,y=56)
btnlagremarkør = customtkinter.CTkButton(window, width=145, font=("Ariel",16,"bold"), border_color="#add19e", fg_color="#e1c79f",text_color="#aa0000", text="LAGRE MARKØR").place(x=875,y=56)
btnmarkprev = customtkinter.CTkButton(window, font=("Ariel",18,"bold"), border_color="#add19e", fg_color="#e1c79f",text_color="#aa0000", text="-").place(x=12, y=100)
btnmarknext = customtkinter.CTkButton(window, font=("Ariel",18,"bold"), border_color="#add19e", fg_color="#e1c79f",text_color="#aa0000", text="+").place(x=307, y=100)
slide1val= customtkinter.CTkLabel(window, width=50,font=("Ariel",16,"bold"),text_color="#000000",fg_color="#e1c79f", text="", justify=("center"))
slide1val.place(x=1800,y=107)

current_position = map_widget.get_position()

window.mainloop()

[deanhystad]

You really shouldn't use .place() to position items in a window. Learn how to use the geometry managers .pack() and .grid().

Placing top directly over window will make it impossible to use controls in window.

The reason for your current troubles is you don't put the map in the same location in window and top. You want to place the image in the same location as the canvas in the map in window. To do this you need to ignore my advice about using .pack() and .grid(), and place the image at the same x,y position where the map canvas appears in window. You can get the canvas position using map_widget.canvas.winfo.root_x() and root_y().

I would not do it this way. I would grab a snapshot of the map in window, merge this image with the image in "D:\\bilde/auli.png", and display the merged image. It might even be possible to replace the image in tkintermapview with the merged image. It is something I would investigate doing, because this double window idea is not going to work well.

[janeik]

You really shouldn't use .place() to position items in a window. Learn how to use the geometry managers .pack() and .grid().

Placing top directly over window will make it impossible to use controls in window.

The reason for your current troubles is you don't put the map in the same location in window and top. You want to place the image in the same location as the canvas in the map in window. To do this you need to ignore my advice about using .pack() and .grid(), and place the image at the same x,y position where the map canvas appears in window. You can get the canvas position using map_widget.canvas.winfo.root_x() and root_y().

I would not do it this way. I would grab a snapshot of the map in window, merge this image with the image in "D:\\bilde/auli.png", and display the merged image. It might even be possible to replace the image in tkintermapview with the merged image. It is something I would investigate doing, because this double window idea is not going to work well.

hello and thank you for feedback. There is no other controls, atm., than a png image on a label. Transparency works ok for my use. Perhaps not so good when transp. is 0. as the slider dissapears. However, theres no use of use no transp. to compare view from a map tile server with a historic map. so You can search for an object of todays map beeing able to see that object in historical maps. I was thinking og canvas too with so fare no success but wasnt aware o the canvas root x y, so I will try that also because I will place markers on the historical map(s),read hist.map on a canvas, thanks.

[deanhystad]

Doesn't look like it would be difficult to overlay your image direclty on the map. I was looking at the tkintermapview code. In map_widget.py there is a mehod named "request_image" that gets the map image. You could override this method to get two images and blend them.