The avatar for @yangchengkai1
yang chengkai
Published
Edited
Dec 5, 2019
Importers
Insert cell
md `# Leaflet Map`
Insert cell
md `## Examples
- [Basic Composition Example](https://observablehq.com/@yangchengkai1/basic-component-example)`
Insert cell
md `## Exports`
Insert cell
md `### Leaflet CSS`
Insert cell
md `Usage: import { leafletCSS } from '@yangchengkai1/leaflet-map'`
Insert cell
leafletCSS = html`<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>`
Insert cell
md `### Basic Usage`
Insert cell
md `#### Map Container`
Insert cell
mapContainer = {
const mapContainer = DOM.element('div', {
style: `width:${width}px; height:${width / 1.25}px`
})
yield mapContainer
}
Insert cell
md `#### Default Map`
Insert cell
map = {
const map = L.map(mapContainer).setView([34.3416, 108.9398], 4);
return map;
}
Insert cell
md `#### Open Street Map Layer`
Insert cell
openStreetMapLayer = {
const osm = L.tileLayer('https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey=d1921d56558744ed821907b2b1e1d642', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
return osm
}
Insert cell
md `## Imports`
Insert cell
L = require('leaflet@1.6.0')
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more