[筆記] Leaflet

• 常用圖示

  • marker
  • circle
  • polygon
  • popup

• 多數的 leaflet method 都會回傳一個 map object，因此可以允許 object chaining 的方法

Example

Sample Code

/**
 * Modified from Leaflet Quick Start Guide
 * https://leafletjs.com/examples/quick-start/
 **/

import './map.css';

const TAIPEI_101 = [25.033964, 121.564468];

/**
 * initialize
 */
const map = L.map('map').setView(TAIPEI_101, 15);

const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}).addTo(map);

/**
 * marker
 */

const marker = L.marker(TAIPEI_101).addTo(map);
marker.bindPopup('<b>台北 101</b><br>這裡就是台北 101 🏙️');

/**
 * circle
 */

const circle = L.circle(TAIPEI_101, {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 500,
}).addTo(map);
circle.bindPopup('I am a circle.');

/**
 * polygon
 */
const [x, y] = TAIPEI_101;
const polygon = L.polygon([
  [x - 0.001, y - 0.001],
  [x + 0.001, y + 0.001],
  [x - 0.001, y + 0.001],
]).addTo(map);

/**
 * popup
 */
const popup = L.popup();

function onMapClick(e) {
  popup
    .setLatLng(e.latlng)
    .setContent('You clicked the map at ' + e.latlng.toString())
    .openOn(map);
}

map.on('click', onMapClick);