Interactive tooltips within a list of elements in a leaflet map

I am trying to implement a feature where a popup is displayed on mouse hover, showing names that are selected from an array list. I have placed multiple markers on a map at different latlon positions and now I want to display a popup containing the name for each particular latlon position. Below is my code, where I need to show the district name on mouse hover. Currently, I am able to display the popup text on mouse hover, but I am unsure of how to call my array list in the popup content. Can anyone provide suggestions on what steps I should take next?

var planes = [
        ["Jodhpur",26.28, 73.02],
        ["Bikaner",28.0229,73.3119],
        ["Churu",28.3254,74.4057],
        ["Ganga Nagar",29.9038,73.8772],
        ["Hanumangarh",29.1547,74.4995],
        ["Jaisalmer", 26.9157,70.9083],
        ["Jalore",25.1257,72.1416],
        ["Jhunjhunu",28.1289,75.3995],
        ["Nagaur",27.1854,74.0300],
        ["Pali",25.7711, 73.3234],
        ["Sikar",27.6094,75.1399],
        ["Sirohi",24.7467,72.8043],
        ["Barmer",25.7532,71.4181],

        ];
        for (var i = 0; i < planes.length; i++) {
            marker = new L.marker([planes[i][1],planes[i][2]],{icon: myIcon}).addTo(map).bindPopup('<div id="chart" class="chart"></div>');
  marker.on('click', onMarkerClick, this);

  /*var currentMarker = planes[i][0];
    currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
    */

  marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});


    }
javascriptjqueryhtmlcssleaflet

Answer №1

Retrieve the name from your array based on latitude and/or longitude

 marker.on('mouseover', function(e) {
    var name = "";
    $.each(planes,function(i,v){
       if (v.indexOf(e.latlng[0]) > 0) {//check if the latitude is in the array
          name = v[0];//obtain the name
       }
    })

    var popup = L.popup()
       .setLatLng(e.latlng) 
       .setContent('Location: '+name)
       .openOn(map);
 })

Disclaimer: I am assuming that e.latlng represents an array of [latitude,longitude]

Answer №2

Make sure to update marker1 to match the name of your specific marker.

let customMarker = L.marker(40.7128, -74.0060).addTo(mymap)
    .bindPopup("Sample Popup Content");

let isToggled = false

customMarker.on({
    mouseover: function() {
        if(!isToggled) {
            this.openPopup()
        }
    },
    mouseout: function() { 
        if(!isToggled) {
            this.closePopup()
        }
    },
    click: function() {
        isToggled = true
        this.openPopup()
    }
})

mymap.on ({
    click: function() {
        isToggled = false
    },
    popupclose: function () {
        isToggled = false
    }
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Send information without refreshing the page

Even though there are countless questions similar to this one, I am still struggling to make this work correctly. Any advice on what steps I should take to fix this would be greatly appreciated, as my understanding of jQuery is about 80%. <form action= ...

phpjqueryhtmlforms

Encountering the 404 Not Found error when trying to fetch the Next.js API Route from the app

Currently facing difficulties with the routing in Next.js 13's app. Every time I attempt to access it, for instance via Postman, I keep getting a 404 Not Found error. This is my file structure: https://i.stack.imgur.com/ZWrlb.png An example of one ...

javascriptreactjsnext.jsprisma

Utilizing the output of a callback function to execute res.render in a NodeJS application

Currently, I am utilizing oracledb for node in order to retrieve data from the database. Once the data is fetched, my goal is to transmit it to the client side using render() in express JS. Below is an example of the code structure: config.js module.expo ...

javascriptnode.jsexpressnode-oracledb

The href appending function will succeed in Ajax if the inArray method is used effectively

Once upon a time, I thought I had nailed it with my ajax login, but alas, I was mistaken. The ajax login feature was working like a charm, perfectly appending the username to a link. Everything was going smoothly until I wanted to implement a page refres ...

javascriptjqueryhtmlajax

Is there a way to prevent ng-template-loader from scanning image src's?

Currently, I am beginning to incorporate webpack into my development workflow for an angular project. To create my templateCache, I have had to include the ng-template-loader. Below is a snippet of my webpack configuration: { test: /\.html$/, loa ...

javascriptangularjswebpack

Ajax handling all tasks except for adding HTML elements

Having an issue with my basic "Load More on Scroll" AJAX function. The console is showing that the HTML is being sent back from the request, but for some reason, nothing is being rendered on the page. I must be missing something really simple here. $(wi ...

javascripthtmlajax

Should the ID be utilized in a modal dialog?

When working with a modal window, I need to know how to retrieve and utilize the field id of the record in a mysql select. While I am able to display it using . , I am unsure of how to work with it using PHP. Any assistance would be greatly appreciated. ...

javascriptphpjquerymysql

Adjust the size of the FabricJS canvas within a child component in VueJS

In my project, I am using VueJS and FabricJS to create a dynamic canvas that changes size based on user input. The goal is to have the canvas adjust its dimensions as soon as the user enters new values in the sidebar component. Despite using $emit from ch ...

javascriptvue.jscanvashtml5-canvasfabricjs

The test does not pass when attempting to use a shorthand operator to ascertain the truthfulness of

I've encountered an interesting issue with my unit test. It seems to work perfectly fine when I directly return true or false, but fails when I try to use a shorthand method to determine the result. Let's say I have a function called isMatched w ...

javascriptnode.jsunit-testingjestjs

JQuery Success/Failure Callback does not trigger the function

I'm a beginner with jQuery and I'm trying to use it to call a Python web service and display a message based on the response received. Below is the current jQuery code I have: $(document).ready(function(){ $("#loginForm").submit( function () { ...

jquerypythonajaxweb-servicesjquery-callback

Exploring the possibilities of querying Firestore data with dynamic user input

I am facing an issue with my code and struggling to find the right solution. My goal is to build a filter that, upon clicking on each option, will automatically fetch data from firestore. https://i.sstatic.net/ktLuE.png Within my Redux Saga, I have the ...

javascriptreactjsfirebasegoogle-cloud-firestore

Having trouble with Express router behaving unexpectedly in a subdirectory

In my Node.js app, I have organized my API queries by modules. This structure is reflected in the index.js file as follows: app.use('/api/schedule/', apiSchedule); Within the apiSchedule router, I have defined different route handlers: router. ...

javascriptnode.jsexpressroutes

Dynamic image gallery with a flexible layout and interactive scrollbar using Flexbox

I'm looking to incorporate a scrolling image gallery into a flexbox layout so that as the browser page size changes, the gallery will scale according to the flex-grow index. My goal is to ensure all images remain accessible via a scrollbar without usi ...

htmlcssflexboxscrollbarimage-gallery

Is there a method to modify the arrangement in which 3 specific HTML elements are displayed (i.e., their hierarchy in relation to one another)?

I have 3 "p" elements and I'm trying to find a way to change the order in which they load on the page using JS or CSS. Below is an example of what I've attempted so far. When you click on the first box labeled "about 1," it opens up and displays ...

javascripthtmlcss

Load the React component asynchronously while waiting for the data to be fetched

My ReactJS component looks like this: import React, {useState} from 'react'; import Plot from 'react-plotly.js'; import {utility} from "./utility"; function Chart() { const [use_data, setData] = useState([]); c ...

javascriptreactjs

Is there a universal browser variable where I can attach a listener to capture any errors that occur?

Currently, I am utilizing Selenium to navigate an AngularJS website and am keen on generating a comprehensive catalog of all errors that are thrown (my main focus is on lex errors). AngularJS provides access to $exceptionHandler for altering exception hand ...

javascriptangularjsseleniumerror-handling

Adjusting body styles in a NextJS application using localStorage prior to hydration: A step-by-step guide

If you visit the React website and toggle the theme, your choice will be saved in localStorage. Upon refreshing the page, the theme remains persistent. In my NextJS project, I am attempting to achieve a similar outcome by applying styles to the body eleme ...

javascriptreactjsnext.js

How can I combine jQuery UI Themeroller with my own custom jQuery UI widget?

I am reaping the advantages of Themeroller in conjunction with the standard widgets provided by jQuery UI. The part that perplexes me is integrating Themeroller with a custom widget built on top of the jQuery UI widget factory. This excerpt from the help ...

jqueryjquery-uiwidgetthemeroller

Swapping out .generateFile() within jQuery

Is there a way to replace document.createElement in jQuery? for (let word in myDictionary) { let buttonElement = document.createElement('button'); $(buttonElement).html(word); $(buttonElement).on("click", createOnClickListener(myDict ...

jquery

What is the reason that jQuery does not work on HTML generated by JavaScript?

One of my JavaScript functions, named getImages, is responsible for loading the following HTML structure: // Function starts here function getImages() { $.getJSON(GETIMAGELIST, function(data) { var items = []; // Populating the HTML $.each(dat ...

javascripthtmljquery