Posts

Showing posts with the label Leaflet

IT筆記 :Leaflet開源JavaScript地圖學習篇(1)

Image
 使用leaflet製作網頁版的地圖,首先引入基本的avaScript 庫(leaflet.js)和一個CSS 樣式表(leaflet.css)。 較為方便的做法就是引用CDN上的版本     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> 添加一個div容器來顯示地圖 <div id="map"></div> 設定地圖div的高度,可使用pixel或者%,如果沒有設定,地圖會顯現不出來!    #map {         /* configure the size of the map */         width: 100%;         height: 100%;       } 設定地圖的中心點座標及縮放等級。   var map = L.map('map').setView({lon: 114.20847, lat:22.29227},16); 或者 var map = L.map('map',{                 center: [ 22.29227 , 114.20847],                 zoom: 16             }); 在容器中加底圖,添加 OpenStreetMap 地圖圖塊作為範例。       // add the OpenStreetMap tiles     ...

Norman's 資料視像化及地理資訊系統工具書籤

Image
近來對資料視像化(Data visualization)及地理資訊系統(Geographic Information System),例如地圖、圖表、儀表版(Dashboard)等項目有興趣,經常參訪的網站如下: Hands-On Data Visualization : Interactive Storytelling from Spreadsheets to Code Open learning GIS lab GIS Geography Openstreetmap-tile-server  : set up an OpenStreetMap PNG tile server using docker Leaflet-providers preview: This page shows mini maps for all the layers available in Leaflet-providers. Learn OpenStreetMap Step by Step OruxMaps世界圖資離線地圖的安裝,OpenAndroMaps Hong Kong map Download  : OpenAndroMaps Contour map for  OpenAndroMaps Download OpenStreetMap data from GEOFABRIK