Come si modifica il cursore predefinito nelle mappe degli opuscoli?

Question

Sto tentando di modificare l'icona cursore predefinita quando viene premuto un determinato pulsante di controllo. Anche se in parte ho avuto successo usando css sul contenitore div, facendo questo sovrascrive lo stato del cursore di movimento, che è qualcosa che non voglio. Ciò che intendo con questo è che l'icona di spostamento non appare più mentre si muove attraverso la mappa (ma non quando è sui marcatori!).

Mi piacerebbe sapere se c'è un modo non hacky attraverso l'api per ottenere un comportamento speciale del cursore senza dover ridisegnare tutto.

Questo è quello che ho cercato di fare, #map è il contenitore div per la mappa del volantino.

#map[control=pressed] { 
    cursor: url('..custom.png'); 
} 

Answer 1

Edit 2017/05/18: Raw CSS e Javascript tramite Opuscolo quadro (consigliato)

stavo guardando attraverso il codice sorgente per the BoxZoom plugin e ho notato il loro approccio con Leaflet's built-in DOM mutators e ha voluto per promuovere qui. ..questa è sicuramente la migliore pratica.

Example jsfiddle

Da qualche parte nel CSS includono una classe come questa ..

.leaflet-container.crosshair-cursor-enabled { 
    cursor:crosshair; 
} 

Quando si desidera attivare mirino, farlo nel vostro JS ..

// Assumes your Leaflet map variable is 'map'.. 
L.DomUtil.addClass(map._container,'crosshair-cursor-enabled'); 

Poi, quando vuoi disabilitare i crosshairs, fallo nel tuo JS ..

L.DomUtil.removeClass(map._container,'crosshair-cursor-enabled'); 

---

risposta originale: Mappa livello mirino

@ scud42 mi ha fatto sulla strada giusta. È possibile utilizzare JQuery per modificare il foglio mappa del cursore in questo modo:

$('.leaflet-container').css('cursor','crosshair'); 

Poi più tardi, quando si desidera ripristinare il cursore della mappa, si può fare questo:

$('.leaflet-container').css('cursor',''); 

---

Edit 1.21 .2016: Per-funzione mirino

È anche possibile attivare mirino per singole funzioni di supporto dell'opzione className, come un poligono, o funzionalità vertici, ecc

Ecco un esempio di un vertice trascinabile che alternare puntatore mirino (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','');}); 

Answer 2

Utilizzare la pseudo classe active.

#map:active { 
    cursor: url('..custom.png'); 
} 

JSFiddle

Per l'override un cursore probabilmente si desidera utilizzare l'attributo CSS3 user-select: none in modo che esso non passare tra il cursore di testo e di default quando si trascina sull'elemento. Tale implementazione è anche mostrata nel JSFiddle.

Answer 3

Gli stili di volantini consentono di modificare il comportamento del cursore. Metti questi nel tuo CSS locale per apportare la modifica.

/* Change cursor when mousing over clickable layer */ 
.leaflet-clickable { 
    cursor: crosshair !important; 
} 
/* Change cursor when over entire map */ 
.leaflet-container { 
    cursor: help !important; 
} 

Answer 4

Set di mirino:

document.getElementById('map').style.cursor = 'crosshair' 

Ripristinarlo:

document.getElementById('map').style.cursor = ''