YOLPで地図上に手書きの図形描画をしてみる #YOLP

今回はこーいうやつのサンプルです。

ポイントは

地図と同じサイズの透明のレイヤーを地図の上に敷く
透明レイヤーにmousedown / mousemove / mouseupのイベントを記述し、ピクセルを緯度経度に変換
polylineを書く。

だけです。

コード上のポイントはfromContainerPixelToLatLng関数です。
これのおかげで実装できています。

全文を下記に掲載しておきます。
YOLPのAPIキーの取得が必要ですので、そちらは別途取得ください。
サンプルはまだスマホやタブレットのタップには対応できていませんが。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <title></title>
<body>
    <form id="form1">
    <div>
        <input type="button" name="btn" value="Clear" onclick="mapInit(!$('#is_select_click').is(':checked'));" />

        <div id="map" style="width: 900px; height: 600px;"></div>
        <div id="dragLayer" style="background-color: transparent; width: 900px; height: 600px; display: none; position: absolute;"></div> 
    </div>
    </form>
        <script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid={ご自分のAPIキーを貼り付けてください}-" type="text/javascript"  charset="UTF-8" ></script>
        <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
    <script type="text/javascript" >
        var ymap;
        var dragStartPos;
        var dragEndPos;
        var movingPos = null;
        var isDragging = false;

        $(document).ready(function () {
            mapInit();
            $('#dragLayer').bind('mousedown', function (e) {
                dragStartPos = {x : 0.0, y : 0.0};
                dragStartPos.x = e.pageX;
                dragStartPos.y = e.pageY;
                isDragging = true;
            });
            $('#dragLayer').bind('mousemove', function (e) {
                if (!isDragging) return;
                var beforePos = movingPos == null ? dragStartPos : movingPos;
                movingPos = ymap.fromContainerPixelToLatLng(new Y.Point(e.pageX, e.pageY));
                var latlngs = [
                    beforePos,
                    movingPos
                ];
                var polyline = new Y.Polyline(latlngs);
                ymap.addFeature(polyline);
            });

            $('#dragLayer').bind('mouseup', function (e) {
                if (!isDragging) return;
                isDragging = false;
                dragEndPos = { x: 0.0, y: 0.0 };
                dragEndPos.x = e.pageX;
                dragEndPos.y = e.pageY;
                dragStartPos = {x : 0.0, y : 0.0};
                movingPos = null;
            });
        });

        function mapInit() {
            var pos = $('#map').position();
            $('#dragLayer').css({ 'top': pos.top, 'left': pos.left });
            $('#dragLayer').show();
            ymap = new Y.Map("map", {
                configure: {
                    doubleClickZoom: true,
                    scrollWheelZoom: true,
                    singleClickPan: false,
                    dragging: true
                }
            });
            ymap.drawMap(new Y.LatLng(35.650084103526534, 139.72107775058697), 17, Y.LayerSetId.NORMAL);
            ymap.addControl(new Y.LayerSetControl());
            ymap.addControl(new Y.SliderZoomControlHorizontal());
            ymap.addControl(new Y.CenterMarkControl());
        }

    </script>
</body>
</html>