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.
Related
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.
Using the code from this question I managed to successfully add a tileLayer of place/road labels above my overlay layer. However, this has had the unfortunate side-effect of blocking any clicks to the overlay layer below.
Broadly, how can I reenable detection of clicks to layers/objects below the top tileLayer?
See this example where I add a layer of labels to the top with:
var CartoDB_PositronOnlyLabels = {
"tilejson": "2.0.1",
"tiles":['http://c.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png'],
"attribution": '© CartoDB',
"maxzoom": 19,
"minzoom": 13
};
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var labelLayer = L.mapbox.tileLayer(CartoDB_PositronOnlyLabels).addTo(map);
topPane.appendChild(labelLayer.getContainer());
labelLayer.setZIndex(9);
Update
Originally this was a problem because I am using a special draw function to draw in routes by clicking to add waypoints to the route. With the addition of the tileLayer, users can still add waypoints. But they can't drag waypoints to move the route, nor can they click on the last point to end the route.
I fixed this by setting the ZIndex of the label tileLayer to 5, so that it would be in-between the overlay layer (zIndex: 4) and the marker layer (zIndex:6). I would however still like to know if it's possible to have a clickable overlay layer under a tilelayer.
I'de give CSS rule pointer-events: none a try on the tiles/tilelayer that's on top of your features/overlays. When set to none the images shouldn't respond to any mouse/cursor events, so every event should delegate to the layer that's underneath it:
Pointer-events:
The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events.
None:
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
I'm trying to follow this example:
http://openlayers.org/dev/examples/SLDSelect.html
When I click on the point, its color should be changed, here is a piece of my code:
control = new OpenLayers.Control.SLDSelect(
OpenLayers.Handler.Click,
{
//displayClass: 'olControlClick',
layers: [city]
}
)
map.addControl(control);
control.activate();
Still can't figure out what's the point of displayClass. and how to assign the new color.
displayClass is the css class that gets used when the SLDSelect control is active. To play around with it and see what html element is being modified, try setting the class like this:
.olControlClick {
cursor: crosshair;
background-color: yellow;
border: 5px solid green;
}
When you refresh your browser page, you may see the flash of yellow background as the layer renders, you will see a cross-hair cursor, and you will see the large green border on the div that uses the css class.
Use this to modify the characteristics of the map div when the SLDSelect control is active.
You can play around with this by calling activate() and deactivate() on your SLDSelect control. When the control is not active (after calling deactivate()), you won't see the artifacts of the css style (no green border, no cross-hair cursor). When the control is active, you will see these 2 style properties (border and cursor).
This example may be useful, make sure you view the source to see the javascript.
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.