リーフレットマップのデフォルトカーソルを変更するにはどうすればよいですか？

Question

特定のコントロールボタンが押されたときに、デフォルトのカーソルアイコンを変更しようとしています。 私はコンテナdivでcssを使用することで部分的に成功しましたが、これは移動カーソルの状態をオーバーライドします。これは私が望まないものです。私が言っていることは、地図上を移動中に移動アイコンが表示されなくなったことです。

私は、すべてを再調整せずに特別なカーソル動作を実現するために、非ハッキーな方法でAPIがあるかどうかを知りたいと思います。

これは私がやったことですが、#mapはリーフレットのコンテナdivです。

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

Answer 1

編集2017年5月18日：リーフレットフレームワークを経由して生のCSSとJavaScript（推奨）

私はthe BoxZoom pluginのためにソースコードを見ているとLeaflet's built-in DOM mutatorsを使用して彼らのアプローチに気づき、ここでそれを促進したかったです。これは確かにベストプラクティスです。どこかあなたのCSSで

Example jsfiddle

このようなクラスが含まれる。..

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

あなたは十字線を有効にしたい場合は、あなたのJSでこれを行う。..

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

その後、十字線を無効にする場合は、JSでこれを行います。

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

---

オリジナル回答：scud42 @

クロスヘア地図レベルは正しい道に私を得ました。あなたはこのようなリーフレットマップカーソル変更するjQueryのを使用することができます。あなたがマップカーソルをリセットしたいとき、後に続いて

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

を、あなたはこれを行うことができます。

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

---

編集1.21 。2016：クロスヘア

機能-パーあなたはまた、個々の多角形などclassNameオプションをサポートしている機能、またはフィーチャの頂点のための十字線を有効にすることができ、など

ここでポインタを切り替えることができますドラッグ可能な頂点の一例です十字線（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

擬似クラスactiveを使用してください。あなたはおそらく、要素の上にドラッグしたときに、それは、テキストと、デフォルトのカーソルを切り替えないように、CSS3の属性user-select: noneを使用したいと思うでしょう、カーソルをオーバーライドするために

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

JSFiddle

。その実装は、JSFiddleにも示されています。

Answer 3

リーフレットのスタイルでは、カーソルの動作を変更することができます。これらをあなたのローカルCSSに入れて変更を加えてください。

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

セット：

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

リセットボタン：

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