I want to create an component like Adobe gradient picker in Javascript and jQuery. I want to use the jQuery gradients plugin. there is a div with 2 markers left and right. when I clicked in bound of div this automatically add a marker, and when I double click on this it open a jQuery color to select a color. Also the marker should be moving across the main div. Please help me with an example.
Check slider in JQuery UI http://jqueryui.com/demos/slider/ (you can modify code of widget to add multiply numbers of markers, changing style, and attach click handler on sliding element to open color picker), CSS3 Gradient http://css-tricks.com/examples/CSS3Gradient/ (you can manipulate css3 gradients with jquery), color picker plugin http://www.eyecon.ro/colorpicker/ or Farbtastic color picker — http://acko.net/dev/farbtastic
If you don't want to use JQuery UI widgets — and do this from scratch — you can create <div> with with position: relative; and inside it <span> with position: absolute; then in javascrtip/jquery add live event mousedown/mouseup/mousemove to handle moving when user drags the marker, and add click event to open color picker.
To handle adding new markers you need to add click event to div just add new span, you also need function that interpolates gradients from position in div, so when user click in center of black to white gradient it add grey marker (but you can also add default color for marker or copy the color from marker in the left or the right);
And you can pack it inside plugin and put it on the web.
Related
I have a map with a number of markers. When a user clicks on one marker information for that marker is displayed on a side pane. To accomplish that I have added 'click' listeners to the markers and also store marker identifiers more or less as suggested in this SO answer.
Now, on certain modes I don't want the markers to be clickable (but still want them to appear on the screen). It is easy for me to remove all the 'click' listeners. However, when I hover over them with my mouse, the icon does change from the "open palm" to the "pointed hand" confusing the user. Upon investigating I see that the canvas class normally has the leaflet-zoom-animated class, but when I hover over a marker, the leaflet-interactive class gets added. I can change that cursor using, e.g.:
.leaflet-interactive {
cursor: crosshair !important;
}
... but this has two problems:
it's not something I can toggle on and off depending on the various user interaction modes my application finds itself in
it's still jarring because the cursor does change and, further, I can't change it to the open palm cursor that Leaflet is normally using, since that's a non-default cursor and it's not clear to me how to access it.
If you can remove the click listener, I suppose that you can also add a css class to your marker. Here is an example http://jsfiddle.net/Mossart/w9830at1/7/ (look at the top marker)
var breakside = [45.571601194035345, -122.65673562884331];
var marker1 = L.marker(breakside).addTo(map);
marker1._icon.classList.add("not-clickable");
CSS:
.not-clickable {
cursor: grab;
}
This works for L.circleMarker objects on a canvas renderer:
marker.options.interactive = false;
Curiously, it doesn't work on a non-canvas renderer.
I'm using the leaflet styled layer control plug in to customize my map control.
I'm trying to add a button to the top right corner of my controls that closes the controls (primarily for mobile use).
I found this question and it works, but now I'm wondering how I can position this button. I want it to be in the top right corner of the control.
When I position the class "leaflet-control-close" it works (I tested with "position: relative; float: right;" and it did float right but stayed at the bottom), but if I give it an absolute position at the top of the page it seems to be appear behind my overlays.
I want it to push down the overlays a little bit so that it doesn't overlap.
EDIT: here is a jsfiddle showing what's happening. It's a little convoluted because the styled layer control files don't have a CDN so I just pasted in the CSS and javascript. I made a note where I add the button in the original Javascript, and below that JS is the JS to create the map and overlays.
I know the button on a desktop is kind of annoying because when you close the control with it, it immediately pops back open because your mouse is hovering. In my actual code I've set the display to none if the screen width is larger than tablet size, because that's the only time I feel like I need the button.
I customized the styled layer control javascript in order to include the button:
L.Control.StyledLayerControl = L.Control.Layers.extend({
onAdd: function(map) {
this._initLayout();
this._update();
this._addButton();
map
.on('layeradd', this._onLayerChange, this)
.on('layerremove', this._onLayerChange, this);
return this._container;
},
_addButton: function () {
var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
var button = L.DomUtil.create('button', 'layer-control-close', elements[0]);
button.innerText = 'Close control';
L.DomEvent.on(button, 'click', function(e){
L.DomEvent.stop(e);
this._collapse();
}, this);
}
)};
I want to use the leaflet AwesomeMarkers (https://github.com/lvoogdt/Leaflet.awesome-markers). However there is no possibility to not set a marker color. That means, I just want to have the icon on the map, with a transparent markerColor.
Anyone knows how to do that?
Here's a fiddle that leaves out the color:
http://jsfiddle.net/VPzu4/861/
I've set the markerColor to transparent which results in the marker getting the class awesome-marker-icon-transparent and then I've defined my own style for that class which just removes the background for the icon.
Note that this will probably break something if Leaflet.awesome-markers ever decides to use the transparent keyword in a different way.
Update:
To get rid of the shadow you could hide the entire leaflet-shadow-pane by css but that would hide all the shadows.
To set the size of the marker you can try applying more css rules to awesome-marker-icon-transparent or you can pass in the extraClasses property which is used to add classes to the icon element.
There's also the possibility that one of the 160 forks in GitHub already does what you want.
http://i.stack.imgur.com/dxguj.png
What is that blue rectangle line? I want it to be on my control whenever I want to use it. So if I want to remove it, I should be able to for the element. I use bootstrap 3.
Just add the below CSS anywhere in the stylesheet or internally:
button:focus {
outline:0;
}
The blue rectangle line you're pointing out is a line drawn around elements to let them stand out, a so called outline. Imagine a user with only a keyboard navigating through a website, the outline is a good reference to show the user which element is active/has focus. When the outline is on a menu item for example, it shows the user that hitting enter will propably bring him to that particular page.
There is an outline style by default in most browsers, Bootstrap styled it their own way.
More on the outline styling property:
http://www.w3schools.com/cssref/pr_outline.asp
To get rid of the outline for buttons in Bootstrap you could use:
.btn:focus {
outline:none;
}
https://jsfiddle.net/DTcHh/12056/
-edit
As Guruprasad Rao pointed out, the valid outline property is none, according to W3C schools.
Items are stored with x,y coordinates. The .items div starts at [0,0] and is repositioned based on movement of .dragger (which is made draggable). Everytime the user stops dragging / releases, .dragger is repositioned to the center of the screen, and an AJAX request is made which places the next x/y coordinated items which are in the current viewport in the .items container.
That's the introduction.
Every item-type has a imagemap (default [0,0,12,12,15,15,20,25] style). I add an html image-map with those values to .items for every item that is loaded.
The problem is I want the space outside the imagemap to behave as if the user was hovering only the .dragger div. I've added CSS styles to:
dragger (cursor:move)
imagemaps (cursor:pointer)
When I hover my mouse just outside an imagemap (but still on the image, however it is transparent png so I 'think' i'm hovering the .dragger div) the cursor doesn't go from pointer to move-cursor, but from pointer to normal arrow. Only outside the image-boundaries it turns into a move-cursor. And when I try to drag (on the image, outside the imagemap), i copy/drag the item-image (browser integrated drag, not the jQuery drag used on .dragger).
I need the .dragger helper and reposition the .items div based on it's movement. Is the cursor/drag behavious possible?
<div class="wrapper">
<div class="dragger"></div>
<div class="items"><!-- dynamic content --></div>
</div>
Please find the answer in this question
Just taking a guess here, but could you possibly make an "inverse" version of the image map using the resulting link as a draggable trigger? You would apply it to start the draggable helper, thereby triggering the drag by being "outside" the original image map area...