[OSGeoJapan-discuss] leaflet.js zoom controlを拡大したいのですが。

2016年 11月 27日 (日) 21:47:15 PST

中川です。

大庭さん＞
結局箇所お伝えせずすみませんでした。解決したとのこと、よかったです。

松澤さん＞
ありがとうございました。

スマホやタブレット端末だと、.leaflet-touchクラスの要素のなかに
.leaflet-barの要素が作成されるようですので、そちらも修正する必要があります。

松澤さんがおっしゃる通り、開発ツールで要素を調べるのが手っ取り早いです。スマホ・タブレットでのデバッグも、Mac版Safariですと、端末をMacに接続すれば開発ツールにコンソールやエレメントを表示することができます。
WindowsのSafariでそれができるかは不明です。


2016年11月26日 18:24 Tetsuya Oba <t.oba ＠ tys-yokohama.co.jp>:
> 大庭@TYSです。
>
> 松澤さん、補足ありがとうございます。
>
> タブレットだと、
>
> /* tablet 30px => 50px */
> .leaflet-touch .leaflet-bar a {
>     width: 50px;
>     height: 50px;
>     line-height: 50px;
>     }
> を追加しないと、おかしな挙動で拡大できませんでした。
>
> 以　上
>
>
> On 2016/11/26 14:55, Taro Matsuzawa wrote:
>>
>> 松澤です。
>>
>> 補足ですが、この手のスタイルが何かを調べるには
>> Firefoxなら開発ツールのインスペクタを、
>> Chromeならデベロッパーツールを、
>> Safariなら開発メニューのWebインスペクタを使って、
>> 対象の要素(今回ならズームボタン)を選択すると
>> だいたいどのスタイルが影響しているかがわかりますので、
>> その上で必要な部分だけ上書きをすると良いです。
>> # 僕はこれらでどうしたら大きくなるかを弄って調べてからコードを書いてます
>>
>> なお、IEにも同じようなツールがありますが、
>> 普段使ってないので詳細は未確認です。
>>
>> On 2016/11/26 14:10, Tetsuya Oba wrote:
>>>
>>> 大庭@TYSです。
>>>
>>> 松沢様、ありがとうございました。
>>>
>>> leaflet0.7.3でもうまくいきました。
>>> ボタンサイズは、leaflet-barだったんですね。
>>>
>>> ありがとうございました。
>>>
>>> 以　上
>>>
>>>
>>> On 2016/11/26 13:50, Taro Matsuzawa wrote:
>>>>
>>>> 松澤です。
>>>>
>>>> Leaflet 1.0.2なのですが、
>>>> 下記スタイルシートを追加でいけました。
>>>> やってることはLeafletが元々用意しているCSSで
>>>> ボタンサイズに関わる部分だけ二倍に上書きをするというものです。
>>>> もちろん、leaflet.cssを読み込んだ後に読み込む必要があります。
>>>>
>>>> <style>
>>>>   /* button size 26px => 52px */
>>>>   .leaflet-bar a, .leaflet-bar a:hover {
>>>>     width: 52px;
>>>>     height: 52px;
>>>>     line-height: 52px;
>>>>   }
>>>>   /* radius value 4px => 8px */
>>>>   .leaflet-bar a:first-child {
>>>>     border-top-left-radius: 8px;
>>>>     border-top-right-radius: 8px;
>>>>   }
>>>>   .leaflet-bar a:last-child {
>>>>     border-bottom-left-radius: 8px;
>>>>     border-bottom-right-radius: 8px;
>>>>   }
>>>> </style>
>>>>
>>>>
>>>> On 2016/11/26 0:37, tys wrote:
>>>>>
>>>>> 日頃よりお世話になっています。
>>>>>
>>>>> 場違いの質問かもしれませんが。
>>>>>
>>>>> タブレットでHTML5+leaflet.jsを使って地質地図を表示しています。
>>>>>
>>>>> leafletでzoom out,zoom in のアイコン(？)が小さすぎて、
>>>>> タブレット上でタップしにくいとの指摘を受けています。
>>>>>
>>>>> 単純に2倍程度に拡大くしたいのですが、
>>>>> その方法が探し出せません。
>>>>>
>>>>> どのようにすれば、zoom out, zoom inの大きさを変更できるのでしょうか？
>>>>>
>>>>> よろしくお願いいたします。
>>>>>
>>>>> 以　上
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> -----
>>>>> /****************************/
>>>>> 合同会社ＴＹＳ
>>>>> 技術開発部
>>>>> 大庭哲哉
>>>>> http://www.disaster-software.net/
>>>>> http://blog.godo-tys.jp/
>>>>> /****************************/
>>>>> --
>>>>> View this message in context:
>>>>>
>>>>> http://osgeo-org.1560.x6.nabble.com/leaflet-js-zoom-control-tp5297437.html
>>>>>
>>>>> Sent from the OSGeo Japan Local Chapter mailing list archive at
>>>>> Nabble.com.
>>>>> _______________________________________________
>>>>> OSGeoJapan-discuss mailing list
>>>>> OSGeoJapan-discuss ＠ lists.osgeo.org
>>>>> http://lists.osgeo.org/mailman/listinfo/osgeojapan-discuss
>>>>>
>>>>
>>>>
>>>
>>>
>>
>>
>
>
> --
> ==================================
> 合同会社　TYS
> 技術開発部
> 大庭哲哉
> Tetsuya Oba
>
> 〒252-0318
> 相模原市 南区 上鶴間本町5-32-25
>
> TEL : 042-812-5920
> FAX : 042-812-5920
> E-mail : t.oba ＠ tys-yokohama.co.jp
> URL    : http://www.godo-tys.jp/
>        : http://blog.godo-tys.jp/
>        : http://www.disaster-software.net/
>        : http://www.tys-yokohama.co.jp/
>
> ==================================
>
> _______________________________________________
> OSGeoJapan-discuss mailing list
> OSGeoJapan-discuss ＠ lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/osgeojapan-discuss