Jak zmienić domyślny kursor w mapach ulotek?

Question

Próbuję zmodyfikować domyślną ikonę kursora po naciśnięciu określonego przycisku sterowania. Mimo, że byłem częściowo udany, używając css w div kontenera, robiąc to przesłoniłem stan kursora, co jest czymś, czego nie chcę. Mam na myśli to, że ikona ruchu nie pojawia się już podczas poruszania się po mapie (ale nie w przypadku znaczników!).

Chciałbym wiedzieć, czy istnieje aproksymacja w interfejsie API, aby uzyskać specjalne zachowanie kursora bez przerywania wszystkiego.

Oto, co próbowałem zrobić, #map to div kontenera dla mapy ulotek.

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

Answer 1

Edycja 18.05.2017: Raw CSS i Javascript poprzez Ulotka Framework (zalecane)

Szukałem poprzez kod źródłowy dla the BoxZoom plugin i zauważył ich podejście korzystając Leaflet's built-in DOM mutators i chciał go promować tutaj. ... to z pewnością najlepsza praktyka.

Example jsfiddle

Gdzieś w CSS obejmują klasę tak ..

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

Jeżeli chcesz włączyć krzyżyk, to zrobić w swoim JS ..

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

Następnie gdy chcesz wyłączyć celownik, zrób to w swoim JS ..

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

---

oryginalny odpowiedź: MAP-poziom celowniku

@ scud42 masz mnie na właściwą drogę. Można użyć jQuery zmienić Ulotka mapę kursorem takiego:

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

Później, gdy chcesz przywrócić kursor mapa, można to zrobić:

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

---

Edycja 1.21 .2016: Per-feature Crosshairs

Można także włączyć krzyżyk dla poszczególnych funkcji wspomagających opcji className, takich jak wielokąta, czy wierzchołki fabularnych itp

Oto przykład Draggable vértice że przełącza wskaźnik krzyżyk (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

Użyj klasę active pseudo.

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

JSFiddle

nadrzędne kursor będzie prawdopodobnie chcesz użyć atrybutu CSS3 user-select: none tak, że nie przełączać się pomiędzy kursorem tekstowym i domyślnej podczas przeciągania na elemencie. Ta implementacja jest również pokazana w JSFiddle.

Answer 3

Style ulotek umożliwiają zmianę zachowania kursora. Umieść je w lokalnym CSS, aby wprowadzić zmiany.

/* 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

Zestaw do celownika:

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

Powrót do poprzedniej wersji:

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