Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alpacatravel/pigeon-maps
Vanilla flavoured Pigeon Maps, without any dependencies
https://github.com/alpacatravel/pigeon-maps
Last synced: about 1 month ago
JSON representation
Vanilla flavoured Pigeon Maps, without any dependencies
- Host: GitHub
- URL: https://github.com/alpacatravel/pigeon-maps
- Owner: AlpacaTravel
- License: other
- Created: 2020-05-04T21:30:19.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-21T01:29:18.000Z (over 2 years ago)
- Last Synced: 2023-02-28T21:56:46.520Z (almost 2 years ago)
- Language: HTML
- Homepage:
- Size: 109 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# pigeon-maps
A vanilla JS version of the popular ReactJS Pigeon Maps, without the ReactJS bit.
No dependencies. Nilche.
Pigeon Maps is really cool. It offered a massive reduction in filesize (down to 20KB min/7KB gzip excluding marker lib) over products like Google Maps and Mapbox. But, it still has dependency on React/ReactDOM. These are around an additional 40KB gzip of library. Out of curiousity, is it possible to just release a stand-alone pigeon maps, with _just_ the 7KB file size to have it on a page.
Answer: So far we've bundled in the marker component and it is 28KB min/10KB gzip. This provides a good working map for ~10KB.
Svelte offers a way to compile to vanilla JS, without the need for React/ReactDOM, allowing you to shed that requirement and use Pigeon Maps in other use cases.
## Tasks
The following tasks are in progress for an initial release.
- shows a map/tiles (done)
- wheel/zoom around (done)
- drag pan (done)
- attribution (e.g. osm requirements) (done)
- warnings (done)
- overlays (done)
- markers (done)
- prop callbacks
- touch interaction (in progress)
- event listeners - switch to dispatcher for standard events emit pattern
- web-component example
- packed as component lib
- webpack deployment
## Example
### In Svelte
```
import Map from "./Map.svelte";
import Marker from "./Marker.svelte";
```
### Web Components
Anticipating this coming... (not yet ;))
```html
```
## Developing
```
npm clone https://github.com/AlpacaTravel/svelte-pigeon-maps.git
cd svelte-pigeon-maps
npm install
npm run dev
```
## See Also
- [https://github.com/mariusandra/pigeon-maps](https://github.com/mariusandra/pigeon-maps)