Mapbox GL JS custom cursor - javascript

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 }

Related

Particles JS - How to change background color between lines?

Please, I need help...
I have to create a particles JS canvas. It's not really difficult but I have to change the background color between each lines like this :
EXAMPLE
I browsed all setting provide by particles JS but nothing did something like I need...
If Someone could help me and provide me some code, that will be really kind.
Thank's you very much
Kevin, i've found the solution. You can specify the color using 'color' attribute from 'particles' param. Here's an example from my applicaiton. (I'm using angular with typescript):
<particles [style]="style" [width]="width" [height]="height" [params]="params"></particles>
On the view side specify params and then add actual params object inside the component. In my case it's:
this.params = {
particles: {
number: {
value: 100,
},
color: {
value: ['#858585']
},
line_linked: {
color: '#f44242',
opacity: 1
}
}
};
So you'll have particles of color: #858585
And all of your connections between nodes will be colored in: #f44242
Hope it helps! =)
I don't know exactly how you can create this effect with particleJS but you can try Trianglify.js which pretty much creates the same effect you want. You can look up tessellation effect with js and you might find some effects similar to this. If you want some code I pulled this off the quickstart code from Trianglify.js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
<script>
var pattern = Trianglify({
width: window.innerWidth,
height: window.innerHeight
});
document.body.appendChild(pattern.canvas())
You can add a custom css file with the following and it should work.
#particles-js {
background-color: #f5f5f5;
}

CKeditor removes the image align attribute

I have a CMS which uses ckeditor at its heart. I have just upgraded the version of ckeditor to the latest and now when you align an image left or right in the editor it puts in the inline style rather than the 'align' attribute.
While the inline style is not a problem I need the 'align' attribute to remain so that I can apply padding to images through CSS programmatically without needing to add styles to each image in the editor (as the users of the CMS would not be technically competent to do this).
I have been successful in making a function to find images with the style attribute and assigning an align attribute. Then updating the editor using 'setData' and when I 'getData' the update seems to remain. However, at somepoint during the save process it seems to remove this. Any ideas on where this is, or how to add both align and style align at the same time.
After alot more Googling ironically I found the answer on here:
CKEditor align images instead of float
Why it didnt come up in searches I have no idea. This certainly did the trick, though I removed the lines relating to width and height and removed the replacement of the 'float' css attribute as this caused the WYSIWYG to not pickup the styling. Apart from that its all good!
UPDATE: I found there were instances where this didn't quite work with CKeditor 4 and found this small edition to the code fixed it.
element.forEach = function(){};
element.writeChildrenHtml = function(){};
See: http://vibhajadwani.wordpress.com/2011/07/18/how-to-remove-image-style-property-from-ckeditor/
So the complete code block is as follows:
CKEDITOR.on('instanceReady', function( ev )
{
// Ends self closing tags the HTML4 way, like <br>.
// See: https://stackoverflow.com/questions/4466185/ckeditor-align-images-instead-of-float
// Mod added for CKE 4
// See: http://vibhajadwani.wordpress.com/2011/07/18/how-to-remove-image-style-property-from-ckeditor/
ev.editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
$: function( element )
{
// Output dimensions of images as width and height
if( element.name == 'img' )
{
var style = element.attributes.style;
if( style )
{
// Get the width from the style.
var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
width = match && match[ 1 ];
// Get the height from the style.
match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
var height = match && match[ 1 ];
// Get the float from the style.
match = /(?:^|\s)float\s*:\s*(\w+)/i.exec( style );
var align = match && match[ 1 ];
if( align )
{
element.attributes.align = align;
}
}
element.forEach = function(){};
element.writeChildrenHtml = function(){};
}
return element;
}
}
});
});
As a quick fix (for those of you who don't want to dig into the CKEditor files) you can actually style the images with CSS even if there is no align or class added to the image with the * property.
example:
img[style*=left] {
float: left;
margin: 0px 20px 10px 0px;
}
img[style*=right] {
float: right;
margin: 0px 0px 10px 20px;
}
You can use the [style*=] property to check the inline style="" attribute for the word 'left' or 'right' which gets applied to images by CKEditor, then style them any way you want. Clients will still use the alignment dropdown to select whether they want the image to float to the left or the right, so they won't notice any change at all.
We ran into the same issue as #Eth, however our entire ckEditor had been minified and was nearly uneditable. Hope this offers another solution!
Make sure filter is "Full HTML", Limit allowed HTML Tags is unchecked, Convert media tags to mark ups is checked and in Filter processing order Convert Media tags to markup is at top. Voila it is done

How do I change the default cursor in leaflet maps?

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.

Overlay graphic border on img tags

I want to be able to overlay a graphic border on all images on a site without having to manually apply it in photoshop. The border I'm using is a rough 'distressed' graphic which therefore isn't achievable by using css borders.
My initial idea is to use javascript to dynamically add a surrounding div (or divs) containing the border graphic to all img tags although I'm not quite sure how to do this.
I'd suggest the following JavaScript:
var D = document,
images = D.getElements​ByTagName('img');
function imageWrap(el, wrapper) {
if (!el) {
return false;
} else {
var wrapper = wrapper || 'div',
d = D.createElement(wrapper);
el.parentNode.insertBefore(d, el.nextSibling);
d.appendChild(el);
}
}
for (var i = 0, len = images.length; i < len; i++) {
imageWrap(images[i]);
}
JS Fiddle demo.
References:
appendChild().
createElement().
getElementsByTagName().
insertBefore().
parentNode.
There's an alternative using CSS3.
Example snippet:
img {
border-width: 20px;
-moz-border-image:url("border.png") 20 repeat stretch;
-webkit-border-image:url("border.png") 20 repeat stretch;
border-image:url("border.png") 20 repeat stretch;
}
​jsFiddle
References:
The W3C Candidate Recommendation
The W3C Working Draft
On Mozilla Developer Network
On CSS-Tricks
Disclaimer: CSS3 is currently not fully supported across browsers, this solution assumes we aim to move forward in web development to target modern browsers.
You can make your border as a background image and put the image inside it and add some margin
check my jsfiddle
You should be able to do it with JQuery, I tested this script and it worked for me. I just gave the image a background image and added padding.
You would call JQuery in the header:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Then you could try this script:
<script>
$(document).ready(function(){
$('img').css({
'background' : 'url(images/002.jpg) repeat',
'padding' : '10px'
});
});
</script>
You could replace 'img' with your class, for example '.border', you could adjust the padding as well, and you would just replace the url of the background image with yours. Hope this helps/works!

Image swap in firefox

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?).

Categories

Resources