Interference + brochure + plotly - temporary clicks

I have come across a reproducible example that I found at the following link: https://bl.ocks.org/timelyportfolio/5ab450e90ee510f4df9758b9ec5a8ad0.

library(sf)
library(plotly)
library(leaflet)
library(crosstalk)
library(htmltools)

boroughs_data <- st_read("http://services5.arcgis.com/GfwWNkhOj9bNBqoJ/arcgis/rest/services/nybb/FeatureServer/0/query?where=1=1&outFields=*&outSR=4326&f=geojson")
boroughs_data$x <- seq(1:5)
boroughs_data$y <- seq(2,10,2)

boroughs_shared_data <- SharedData$new(
  boroughs_data,
  key=~BoroCode,
  group = "boroughs"
)

map_visualization <- leaflet(boroughs_shared_data) %>%
  addProviderTiles(providers$CartoDB.Positron) %>%
  addPolygons(
    data=boroughs_data,
    layerId = ~BoroCode,
    color = "#444444",
    weight = 1,
    smoothFactor = 0.5,
    opacity = 1.0,
    fillOpacity = 0.5,
    fillColor = ~colorQuantile("Greens", x)(x)
  )

add_select_script <- function(lf, styleFalse, styleTrue, ns="") {
  // JavaScript function for toggling selection

}

browsable(
  tagList(
    tags$div(
      style = "float:left; width: 49%;",
      add_select_script(
        map_visualization,
        styleFalse = list(fillOpacity = 0.2, weight = 1, opacity = 0.4, color="black"),
        styleTrue = list(fillOpacity = 0.7, weight = 3, opacity = 0.7, color="blue")
      )
    ),
    tags$div(
      style = "float:left; width: 49%;",
      plot_ly(boroughs_shared_data, x = ~x, y = ~y) %>%
        add_markers(alpha = 0.5,text = ~paste('Borough: ', BoroName)) %>%
        highlight(on = "plotly_selected")
    )
  )
)

I made a small adjustment to the code compared to the original source so that now polygons are highlighted on mouseover instead of click.

Since my knowledge of JavaScript is limited, I am unsure what modifications are necessary to ensure that the selection of polygons is not constant (meaning the highlight effect only appears during mouseover and does not persist after the mouse moves away from the polygon). Could you provide some guidance on this?

Answer №1

I have a suggestion for improving a portion of code. Let's update the following section:

lyr.on('mouseover',function(e){
  var selected = toggle_state(e.target);
  toggle_style(e.target, style_obj[String(selected)]);
});

to the following:

lyr.on('mouseover',function(e) {
  var selected = toggle_state(e.target, true);
  toggle_style(e.target, style_obj[String(selected)]);
});
lyr.on('mouseout',function(e) {
  var selected = toggle_state(e.target, false);
  toggle_style(e.target, style_obj[String(selected)]);
});

This modification has been successfully tested on my R platform.

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

What is the best way to conceal a callback form once it has been successfully submitted?

In my callback form, everything seems to be functioning properly. However, there is a slight issue when the client hits the submit button multiple times. Each time they do so, a notification saying "Your request sent successfully" pops up next to the butto ...

Tips for monitoring the activities of a different user on a website

I am working on a project where I need to display all the activities of one user to another user on a web page. Essentially, the second user should be able to see everything that the first user is doing on their page. While I know it can be done using AJA ...

Access Flask variable in JavaScript code

Currently working on a CTF challenge, my query is not seeking assistance in solving it, but rather pertains to syntax. The task involves retrieving the secret key from Flask server's configuration. This key is stored within the app.secret_key variable ...

Can Python's datetime object be used interchangeably with a JavaScript date object?

Take for instance in python, a date might look like: 2020-06-19T11:32:16.548109Z, is there a method I can utilize to transform this into a javascript Date object? ...

Steps for triggering a click event on a div with a button role within a class containing multiple elements

Can anyone help me figure out how to auto-click every button in Instagram's "hide story from" settings using console? I tried the following code: for (let i = 0; i < 300; i++) { document.getElementsByClassName('wbloks_1')[i] ...

Is geom_label() no longer available in ggplot2 version 1.01?

While exploring the ggplot2 documentation, I attempted to recreate text labels using geom_label. However, I encountered an error message, "could not find function geom_label" . Searching through ?geom_label also returned no information on such a functi ...

Troubleshooting CodeIgniter's AJAX call functionality issue

I have been attempting to test AJAX functionality within CodeIgniter, but unfortunately, I haven't had any success so far. Can someone please point out where I might be making a mistake? Below is my test_page.php: <!DOCTYPE html> <head> ...

Can a callback in an ES6 class constructor ensure that the promise is either resolved or rejected?

I'm currently puzzled by the concept of using a callback function that always returns an empty object and then passing a parameter to this callback. Visit this link for more information My assumption is that this approach ensures that the Promise wi ...

What could be causing the error message "CSRF token missing or incorrect" to appear?

I am facing an issue with returning a value from a View function in Django. This particular function is called from a JavaScript code using Ajax, but I'm encountering an error that says 'Forbidden (CSRF token missing or incorrect)'. JavaScr ...

What could be causing this error to appear when using Next.js middleware?

The Issue at Hand Currently, I am in the process of setting up an authentication system using Next.js, Prisma, and NextAuth's Email Provider strategy. My goal is to implement Next.js middleware to redirect any requests that do not have a valid sessio ...

Just starting out with JS/jQuery and having trouble hiding a div as I thought it should (or revealing it incorrectly)

The issue can be observed by visiting . Upon clicking on a location name, a home "button" appears in the bottom left corner. Clicking this home button is supposed to revert back to the original page layout and hide the button. However, as soon as the curso ...

Exploring creative methods for incorporating images in checkboxes with CSS or potentially JavaScript

Although it may seem like a basic question, I have never encountered this particular task before. My designer is requesting something similar to this design for checkboxes (positioned on the left side with grey for checked boxes and white for unchecked). ...

The specific model cannot be utilized for custom control within the ViewSettingsCustomItem

Exploring examples to enhance my SAPUI5 knowledge, I encountered an unusual behavior when utilizing the ViewSettingsDialog component with a ViewSettingsCustomItem filter. In my controller, I initiate the Dialog in this manner: onOrdersFilterPress ...

Steps to make ng-packagr detect a Typescript type definition

Ever since the upgrade to Typescript 4.4.2 (which was necessary for supporting Angular 13), it appears that the require syntax is no longer compatible. Now, it seems like I have to use this alternative syntax instead: import * as d3ContextMenu from ' ...

Galaxy S5 browsers experiencing issues with website responsiveness

I've been using jquery to dynamically remove a div in order to change the appearance of my home screen on smaller devices. It's been successful on my Macbook Air and Iphone X, but unfortunately, it doesn't seem to work properly on Android de ...

Converting to alphanumeric characters using JavaScript

Is there a way to efficiently encode a random string into an alphanumeric-only string in JavaScript / NodeJS while still being able to decode it back to the original input? Any suggestion on the best approach for this would be greatly appreciated! ...

Establishing a universal function within Ionic AngularJS

I have the following code snippet, where I have added a reset function that I want to be able to use from ng-click in any part of any template. angular.module('starter', ['ionic', 'starter.controllers', 'starter.services ...

ReactJS - Continuous Loop invoking Encapsulated Function

I keep encountering the same issue with an infinite loop in my code, but I can't figure out why. Currently, I am working with reactJS version 16.5.2 The infinite loops tend to occur when you try to use SetState where it is not allowed (such as in th ...

The issue with CKEDITOR is that it fails to send data through ajax upon the initial submission

When using CKEDITOR, I am experiencing an issue where my forms do not send data to the server on the first submit. If I click the submit button once, empty fields are sent without any input from me. However, when I submit the form a second time, only then ...

Looking for a Plugin that Can Responsively Display Images in a Vertical Layout - Does One Exist using Jquery

Looking for a gallery slider plugin that is responsive both horizontally and vertically. Have tried Flexslider1/2, Galleria, and others but they do not adjust to vertical resizing. Changing the CSS did not help. If you resize the browser horizontally with ...