I am trying to modify the default cursor icon when a certain control button is pressed.
Although I was partially successful by using css on the container div, doing this overrides the move cursor state, which is something I do not want. What I mean with this is that the move icon no longer appears while moving through the map (but not when on markers!).
I'd like to know if there is a non-hacky way through the api to achieve special cursor behaviour without redifining everything.
This is what I tried to do, #map is the container div for the leaflet map.
#map[control=pressed] {
cursor: url('..custom.png');
}
Edit 5.18.2017: Raw CSS and Javascript via Leaflet Framework (recommended)
I was looking through the source code for the BoxZoom plugin and noticed their approach using Leaflet's built-in DOM mutators and wanted to promote it here...this is certainly the best practice.
Example jsfiddle
Somewhere in your CSS include a class like this..
.leaflet-container.crosshair-cursor-enabled {
cursor:crosshair;
}
When you want to enable crosshairs, do this in your JS..
// Assumes your Leaflet map variable is 'map'..
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled');
Then, when you want to disable crosshairs, do this in your JS..
L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled');
Original Answer: Map-level Crosshairs
#scud42 got me on the right path. You can use JQuery to change the Leaflet map cursor like this:
$('.leaflet-container').css('cursor','crosshair');
Then later, when you want to reset the map cursor, you can do this:
$('.leaflet-container').css('cursor','');
Edit 1.21.2016: Per-feature Crosshairs
You can also enable crosshairs for individual features supporting the className option, such as a polygon, or feature vertices, etc.
Here's an example of a draggable vertice that will toggle pointer crosshairs (jsfiddle):
var svg_html_default = '<div style="margin:0px;padding:0px;height:8px;width:8px;border-style:solid;border-color:#FFFFFF;border-width:1px;background-color:#424242"</div>';
var default_icon = L.divIcon({
html: svg_html_default,
className: 'leaflet-mouse-marker',
iconAnchor: [5,5],
iconSize: [8,8]
});
var m = new L.marker([33.9731003, -80.9968865], {
icon: default_icon,
draggable: true,
opacity: 0.7
}).addTo( map );
m.on("mouseover",function(){$('.leaflet-mouse-marker').css('cursor','crosshair');});
m.on("mouseout",function(){$('.leaflet-mouse-marker').css('cursor','');});
Leaflet's styles allow you to change some cursor behavior. Put these in your local CSS to make the change.
/* Change cursor when mousing over clickable layer */
.leaflet-clickable {
cursor: crosshair !important;
}
/* Change cursor when over entire map */
.leaflet-container {
cursor: help !important;
}
Set to crosshair:
document.getElementById('map').style.cursor = 'crosshair'
Reset it back:
document.getElementById('map').style.cursor = ''
Use the active pseudo class.
#map:active {
cursor: url('..custom.png');
}
JSFiddle
For overriding a cursor you will probably want to use the css3 attribute user-select: none so that it doesn't toggle between the text and default cursor when dragging on the element. That implementation is also shown in the JSFiddle.
This is what worked for me:
// CSS first. Add this to leaflet stylesheet.
.leaflet-interactive.wait-cursor-enabled {
cursor: wait !important;
}
// JS select from map container and add class to each element
let map = L.map('map');
let els = map.getContainer().querySelectorAll('.leaflet-interactive');
for(let el of els){
el.classList += ' wait-cursor-enabled';
}
//JS remove class once no longer needed
let els = map.getContainer().querySelectorAll('.leaflet-interactive.wait-cursor-enabled');
for(let el of els){
el.classList.remove("wait-cursor-enabled");
}
$('.leaflet-container').css('cursor','crosshair');
I use react-leaflet and needed to change the cursor over the map and the polygons on it, based on a bit of state higher up in the app. Changing the cursor for the map itself was simple:
map.getContainer().style.cursor = 'crosshair';
For the polygons on the map it was not as straightforward. Leaflet polygons take a className option, which could be used to override the default leaflet-interactive class that sets the cursor to pointer. However, I found that className was not a dynamic option: re-rendering the polygon did not change the className (see this github issue).
I use styled-components, so I tried to wrap the Polygon component to override the cursor style rule, but this, also, only worked when the Polygon was first created. Eventually, I settled on capturing a reference to the Polygon object:
<Polygon ref={(el:any) => this.wrapperRef = el} /* ... */ />
and used this to set the cursor style rule on update:
componentDidUpdate = () => {
this.wrapperRef._path.style.cursor = this.props.cursor;
}
As discussed in the aforementioned github issue, the property _path of the object created by Leaflet can be used to access and override the style.
Related
Is there a simple way to have a custom cursor for a map? The following code I have works very nicely, it's simple too but it's just a predefined option :
map.getCanvas().style.cursor = 'default';
Is it possible to have something like this? :
map.getCanvas().style.cursor = url('custom.png');
You can change the style of the cursor through the css of the mapboxgl canvas container :
.mapboxgl-canvas-container { cursor: url(/path/to/cursor.png), auto !important }
[ https://jsfiddle.net/dpbx96of/ ]
You can do this by converting the icon to a .cur file; cursor.cc is what I used.
I found that .png will not work, but .cur will; then, stdob--'s solution will work:
.mapboxgl-canvas-container { cursor: url(/path/to/cursor.CUR), auto !important }
I am calling the following function and passing it the location of an image:
function show_image(source) {
var img = d3.select("#right-section").append("img").attr("src",source)
img.transition().duration(5000).easeLinear;
}
Here is the function that uses some JQuery to empty the relevant HTML div object (right-section) and then show the image:
function Con1aaRight(div) {
$("#right-section").empty();
show_image("images/netflix.jpg");
}
The problem is the image is showing but not fading in like I would like it to (with d3.ease in the show_image function). I probably should be using JQuery but I would like to incorporate d3. Similar transition/animation ideas welcome. I am building a scrolling webpage tutorial on a data science topic with text on the left and images on the right.
The problem here is understanding what is a D3 transition and how it works.
A D3 transition, as the name implies, transitions from one state, or value, to another state.
That being said, you can, for example, transition...
A position: from x = 10 to x = 60.
A color: from green to blue.
A font size: from 10px to 18px.
An opacity: from 0.2 to 0.9.
A stroke width: from 1px to 5px.
... and several other attributes/styles.
However, you cannot transition this:
non-existence ➔ existence
As Bostock, creator of D3, once said (emphasis mine):
When modifying the DOM, use selections for any changes that cannot be interpolated; only use transitions for animation. For example, it is impossible to interpolate the creation of an element: it either exists or it doesn’t. (source)
Solution: transition the opacity of the image:
var body = d3.select("body");
show_image("http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg")
function show_image(source) {
var img = body.append("img").attr("src", source).style("opacity", 0)
img.transition().duration(5000).ease(d3.easeLinear).style("opacity", 1)
}
<script src="https://d3js.org/d3.v4.min.js"></script>
PS: get rid of that jQuery code. You don't need jQuery when using D3. Mixing jQuery and D3 is not only unnecessary but also, in some cases, it will make things silently break.
I am using the Prototype JavaScript library and have this div:
new Element('div', {id: 'summaryGraph', style: 'width: 100%; height:90px;'});
Inside that div, I am showing a graph:
summaryGraph: function (data, bounds) {
var p = Flotr.draw(
$('summaryGraph'),
[data],
{
}
);
return p;
}
Now my question is, is it possible to disable and enable the div depending on the conditions?
If you want to "disable" the Graph you have 2 possibilities:
hide the Graph and show a placeholder (image, text) stating that the Graph is not accessible at the moment
overlay the Graph with a semi-transparent DIV, which will prevent any interaction with it
I'm not sure what you mean by 'disabling' the graph. But you may want to take a look at hide() (relevant docs) or show() (relevant docs).
If your graph should not respond to mouse events, add a disable flag and in the mouse event listener, return false if the flag is set.
I'm trying to change the background image of a button when the mouse is hovered.
with the statement
function testIn ()
{
elem.style.backgroundImage = 'url("image_name_in.png")';
}
function testOut ()
{
elem.style.backgroundImage = 'url("image_name_out.png")';
}
i'm doing this with onMouseOver=testIn() and onMouseOut=testOut().
Here the problem is that, when i hover the mouse. I'm seeing the progress bar (bottom right side) is shown in firefox as if some page is getting loaded
Use :hover pseudo-class and CSS Sprites instead.
You need a few changes in order to pass your object reference:
onMouseOver="testIn(this)"
function testIn (elem)
{
elem.style.backgroundImage = 'url("image_name_in.png")';
}
BTW - convention now uses "onmouseover" (no caps)
You're getting activity in the progress bar because your onmouseover image does NOT load until you call the function.
You could use a sprite combined with :hover CSS for the effect - like #Tomasz mentions.
If you don't want to combine your default and hover image states into a sprite, you may try adding an additional container for the hover image (setting it's default CSS to display:none;) then use JS, or jQuery to swap the display states of the default and hover images on mouseover or hover.
$('myDefaultImage').hover(function() {
$(this).hide();
$('myHoverImage').show();
}, function () {
...the inverse, etc.
});
This will eliminate the progress bar issue because all of your images will be loaded together.
At the same time, this is going to bloat your page size unnecessarily.
I'd really try to go with the :hover CSS and sprite, or reevaluate the importance of what you're trying to accomplish with the image swap (is it really the best solution for your overall project?).
I'm trying to figure out what the best way would be to set up a website interface that has a large centre 'tile' (basically a div with rounded corners, a variable background image, and text on it) that acts as the hub of the interface, around which I have smaller tiles which are clickable as link, e.g. one tile will lead to a photo gallery etc... However I need these smaller tiles to be moveable i.e. I would like them to visibly whisk away off the screen (in a specific direction) before the next set of tiles enters the screen.
(Ideally they would be the same set of tiles, they would simply go off screen to 'change' as it were and come back as the new set of tiles - An ideal example would be of clicking on the photo gallery tile, all the main tiles whisk away off screen, to be replaced by more tiles representing individual photos in the gallery)
I have no issues with the CSS of round corners and positioning my tiles etc... but I'm currently trying to get the tiles to actually move using the code referenced here: Alter CSS class attributes with javascript?
I can't get it to work. I've set up one of my test tiles to make just one change to the width of another test tile using the above-referenced code when it detects a mouseover event on the div, but it appears not to work.
Here's my code, if you can spot any errors, but primarily I'd also like to hear if you have any better suggestions of reaching the design state I'm looking for:
var style;
function changeFoo() {
if(typeof style == 'undefined') {
var append = true;
style = document.createElement('style');
}
else {
while (style.hasChildNodes()) {
style.removeChild(style.firstChild);
}
}
var head = document.getElementsByTagName('head')[0];
var rules = document.createTextNode(
'.tiletest2 { border:4px solid #999; background-color:#999; width: 50px; border-radius:32px; }'
);
style.type = 'text/css';
if(style.styleSheet) {
style.styleSheet.cssText = rules.nodeValue;
} else {
style.appendChild(rules);
}
if(append === true) head.appendChild(style);
}
The onmouseover event looks like this:
<div class="tiletest1" onmouseover="changeFoo()">
<br/><br/>
SAMPLE left
<br/><br/>
Try using a JavaScript library like http://jquery.com/. You can also get plugins like http://jqueryui.com/ for the kinds of effects you're describing.
I agree with TimS to go with jquery, specifically you will want to use the .animate()function.
This will make it much easier on yourself since you can easily control the speed and time the animation plays and you may be able to easily remove div(s) with the .hide() function, which gives you many options of what kind of animation you could use to close it.