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

[Tetsuya Oba]

大庭@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/

==================================