Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ngyewch/leaflet-webcomponent
Simple web component for displaying Leaflet maps.
https://github.com/ngyewch/leaflet-webcomponent
leaflet webcomponent
Last synced: 3 days ago
JSON representation
Simple web component for displaying Leaflet maps.
- Host: GitHub
- URL: https://github.com/ngyewch/leaflet-webcomponent
- Owner: ngyewch
- License: mit
- Created: 2024-09-08T04:17:51.000Z (26 days ago)
- Default Branch: main
- Last Pushed: 2024-09-22T04:23:46.000Z (12 days ago)
- Last Synced: 2024-09-26T17:11:50.023Z (7 days ago)
- Topics: leaflet, webcomponent
- Language: TypeScript
- Homepage: https://ngyewch.github.io/leaflet-webcomponent/
- Size: 1.53 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@ngyewch/leaflet-webcomponent)
# leaflet-webcomponent
Simple web component for displaying [Leaflet](https://leafletjs.com/) maps.
## Usage
### Import
Script tag:
```
```
### Markup
```
{
"options": {
"center": [
1.3521,
103.8198
],
"zoom": 3
},
"scaleOptions": {
"maxWidth": 200
},
"baseLayers": [
{
"name": "OpenStreetMaps",
"config": {
"kind": "TileLayer",
"urlTemplate": "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
"options": {
"attribution": "© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"
}
}
}
],
"overlayLayers": [
{
"name": "OpenSeaMap",
"selected": false,
"config": {
"kind": "TileLayer",
"urlTemplate": "https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png",
"options": {
"opacity": 0.2,
"attribution": "© <a href=\"http://www.openseamap.org\">OpenSeaMap</a> contributors"
}
}
}, {
"name": "Singapore Neighbourhoods",
"selected": false,
"config": {
"kind": "GeoJSON",
"id": "singapore-neighbourhoods",
"fitBounds": true,
"options": {
"attribution": "© <a href=\"https://insideairbnb.com/get-the-data/\">Inside Airbnb</a> contributors"
}
}
}, {
"name": "Newark, N.J. in 1922",
"selected": false,
"config": {
"kind": "ImageOverlay",
"imageUrl": "https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg",
"bounds": [[40.799311, -74.118464], [40.68202047785919, -74.33]],
"fitBounds": true,
"options": {
"attribution": "Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.",
"opacity": 0.8,
"errorOverlayUrl": "https://cdn-icons-png.flaticon.com/512/110/110686.png",
"interactive": true
}
}
}, {
"name": "Hurricane Patricia",
"selected": false,
"config": {
"kind": "VideoOverlay",
"videoUrl": [
"https://www.mapbox.com/bites/00188/patricia_nasa.webm",
"https://www.mapbox.com/bites/00188/patricia_nasa.mp4"
],
"bounds": [[32, -130], [13, -100]],
"fitBounds": true,
"options": {
"attribution": "NASA GSFC GOES Project",
"opacity": 0.8,
"errorOverlayUrl": "https://cdn-icons-png.flaticon.com/512/110/110686.png",
"interactive": true,
"autoplay": true,
"muted": true,
"playsInline": true
}
}
}
]
}
```