Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<!-- Leaflet v1.3.1 -->
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
</head>
<body>
    <div id="mapid"></div>
    <style>
        #mapid { height: 180px; }
    </style>
    <script>
        var mymap = L.map( "mapid" ).setView( [ 51.505, -0.09 ], 13 ); // 建立地圖設定視角 setView( [中心點], [縮放比例] )
​
        // 讀取地圖圖層[註1]
        L.tileLayer( "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw", {
            maxZoom: 18, // 最大縮放比例
            attribution: "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
            "<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
            "Imagery © <a href='http://mapbox.com'>Mapbox</a>", // 文字區塊
            id: "mapbox.comic" // 地圖風格ID
        }).addTo( mymap );
​
        // 建立圓形區塊[註2]
        var circle = L.circle( [ 51.508, -0.11 ], {
            color: "red", // 顏色
            fillColor: "#f03", // 填滿區塊的顏色
            fillOpacity: 0.5, // 填滿區塊的透明度
            radius: 500 // 尺寸
        }).addTo( mymap );
​
        // 建立多邊形區塊 polygon( 【座標】, 【設定】 )
        var polygon = L.polygon([
            [ 51.509, -0.08 ], 
            [ 51.503, -0.06 ],
            [ 51.51, -0.047 ]
        ]).addTo( mymap );
    </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
hsuehmingfangpro
0viewers