Popups and/or tooltip not showing

  • Resolved mistkaeferl

    (@mistkaeferl)


    11 months, 3 weeks ago

    Hi! So I’m new to integrating maps on a website. This is my first attempt to see if it will be working at all. I might be doing it completely wrong and not see something very obvious (sorry!) I need multiple markers on a map and a popup and/or tooltip with a name and a link to an anchor further down the page. (I’m going to work on a more fancy version as soon as I understand the basics.)
    I have the leaflet map (and the extensions) plugin installed and activated. Leaflet map is set up with it’s default settings. I tried it with firefox and safari, and the popup and tooltip are not showing. What I did to troubleshoot: I defaulted back to Twenty Twenty-four to see if my theme messes with the popups. I deactivated the extensions plugin, but that didn’t change anything, so I activated it again. I have no other plugins running at the moment, this is all very fresh and the map is my first action on this site. (as a sidenote, zooming with scrolling is also not working on the map, and I thought it would) If anybody can help, that would be awesome!

    I’m using the following shortcode: 

    [leaflet-map height=500 width=100% lat=20 lng=0 zoom=2]

    [leaflet-marker lat=53.4095 lng=6.2043 tooltip='<a href="#wec">WEC Waddenzee</a>' popup="WEC Waddenzee"]
    [leaflet-marker lat=44.3526 lng=143.3541 tooltip='<a href="#tokkari-center">Okhotsk Tokkari Center</a>' popup="Okhotsk Tokkari Center"]
    [leaflet-marker lat=35.6895 lng=139.6917 tooltip='<a href="#tokyo">This is Tokyo</a>' popup="Tokyo"]
    [leaflet-marker lat=48.8566 lng=2.3522 popup="Paris"]
    [leaflet-marker lat=-33.8688 lng=151.2093 tooltip='<a href="#sydney">This is Sydney</a>' popup="Sydney"]

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Contributor hupe13

    (@hupe13)

    11 months, 3 weeks ago

    First create a map:

    [leaflet-map height=500 width=100% lat=20 lng=0 zoom=2]

    Then put a marker on it: The marker has a popup with content: “WEC Waddenzee” and a link.

    [leaflet-marker lat=53.4095 lng=6.2043]<a href="#wec">WEC Waddenzee</a>[/leaflet-marker]

    A leaflet-marker has an option title also. The title ist shown if you hover the mouse over the marker. This is default of Leaflet. The Extensions Plugin introduces a shortcode hover. Here you can see its possibilities.

    Thread Starter mistkaeferl

    (@mistkaeferl)

    11 months, 3 weeks ago

    Thank you so much for taking the time to reply @hupe13 – much appreciated! This helped me getting started on the right track, and the website with the documentation is a treasure trove. I’m pretty confident I can educate myself now to get the whole project where it needs to be.

    • This reply was modified 11 months, 3 weeks ago by mistkaeferl.
    Plugin Contributor hupe13

    (@hupe13)

    11 months, 3 weeks ago

    Das freut mich. Ja, ich weiß, die vielen Shortcodes sind nicht einfach. Deshalb frage weiter, wenn du nicht weiter kommst.

    kuiperonline

    (@kuiperonline)

    9 months ago

    I have a simular question.
    on one map I would like to show muliole tracks GPX and some waypoints with “visible” tekst and a hyperlink.
    it would be great if the gpx are downloadable also.

    https://www.pamoja.earth/pamir-highway-with-our-overland-truck/

    [leaflet-map fitbounds scrollwheel zoomcontrol height=500 width=100%]

    [leaflet-marker visible lat=36.72 lng=71.61] <span style=”font-family: ‘Times New Roman’; font-weight: normal; font-style: normal; font-size: 12.00px; text-decoration: underline ; font-kerning: none; color: #0000ee; -webkit-text-stroke: 0px #0000ee”>Hot</span> [/leaflet-marker]

    [leaflet-marker visible lat=36.90 lng=71.51] <span style=”font-family: ‘Times New Roman’; font-weight: normal; font-style: normal; font-size: 12.00px; text-decoration: underline ; font-kerning: none; color: #0000ee; -webkit-text-stroke: 0px #0000ee”>WCP</span> [/leaflet-marker]

    [leaflet-gpx src=https://www.pamoja.earth/wp-content/uploads/GPX/Pamir2024V31.gpx color=red]

    Plugin Contributor hupe13

    (@hupe13)

    9 months ago

    Three different map plugins and Google! Most sites have problems with such a setup.

    But the map created with Leaflet Map seems to be okay. For gpx write:

    [leaflet-gpx src=https://www.pamoja.earth/wp-content/uploads/GPX/Pamir2024V31.gpx color=red]Pamir Route[/leaflet-gpx]
    [hover]

    hover is a shortcode from Extensions for Leaflet Map. When you move with the mouse over the leaflet-elements it shows some text. To download a track you must write a link. leaflet-gpx does not have such an option. But elevation from Extensions.

    Is it right if the marker links goto Disney World?

    kuiperonline

    (@kuiperonline)

    9 months ago

    thanks for your reply. It is still a test.
    Why is the second marker not showing the “visible” text?

    kuiperonline

    (@kuiperonline)

    9 months ago

    is there a site where I can find all these shortcode options?

    Plugin Contributor hupe13

    (@hupe13)

    9 months ago

    Why is the second marker not showing the “visible” text?

    Only one marker can have a popup open. But you can open all tooltips: https://leafext.de/extra/permanent-tooltip/ A tooltip is not a poupup!

    is there a site where I can find all these shortcode options?

    Bozdoz has a helper page in backend and on the Github page, the Extensions hava a documentation in the backend too.

    kuiperonline

    (@kuiperonline)

    8 months, 2 weeks ago

    So I added several markers with VISIBLE but only one is visible

    Pamir Highway met onze overlandtruck – Pamoja = Samen

    [leaflet-map fitbounds  scrollwheel zoomcontrol height=500 width=100%]
    [leaflet-marker visible lat=37.95871 lng=73.85412] <a href="#Nayzatah-pass-wcp">Nayzatah pass</a>[/leaflet-marker]
    [leaflet-marker visible lat=37.90751 lng=74.01690] <a href="#shakhty">Shakhty petroglyphs</a>[/leaflet-marker]
    [leaflet-marker visible lat=37.93052 lng=74.1522] <a href="#shorbulog">Shorbulog observatory</a>[/leaflet-marker]
    [leaflet-marker visible lat=38.26182 lng=73.852352] <a href="#gumbezkol_trailhead">Gumbezkol_trailhead</a>[/leaflet-marker]
    [leaflet-marker visible lat=38.46518 lng=74.25056] <a href="#rangkul_lake">Rangku lake</a>[/leaflet-marker]
    [leaflet-marker visible lat=38.51268 lng=73.82534] <a href="#gurumdy-wcp">Gurumdy WCP</a>[/leaflet-marker]

    [leaflet-marker visible lat=38.78399 lng=73.31157] <a href="#aksalytau_wcp">Aksalytau</a>[/leaflet-marker]
    [leaflet-marker visible lat=39.38440 lng=73.32253] <a href="#kyzyl_art_pass">kyzyl_art_pass</a>[/leaflet-marker]

    • This reply was modified 8 months, 2 weeks ago by kuiperonline.
    Plugin Contributor hupe13

    (@hupe13)

    8 months, 2 weeks ago

    So I added several markers with VISIBLE but only one is visible

    This is correct. As I wrote, only one marker can have an open popup. You need some extra code. I adapted my example with permanent tooltips to do this with popup content. (But there is no error handling! If a marker does not have a popup, the script fails.)

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Popups and/or tooltip not showing’ is closed to new replies.