LeafletJS Map

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to. LeafletJS Map Website

Usage

You can add LeafletJS Map easily by using the following Qwik starter script:

npm run qwik add leaflet-map

The previous command updates your app with the necessary dependencies.

• leaflet@1.9.4
• @types/leaflet@1.9.4

It also adds new files to your project folder:

• src/helpers/boundary-box.tsx: Check map area boundaries function.
• src/models/location.ts: Model to define locations info elements to use in props.
• src/models/map.ts: Model to define map info to use in props.
• src/components/leaflet-map/index.tsx: Leaflet map simple map features component.
• src/routes/basic-map/index.tsx: Example to consume Leaflet Map component with demo data

Interesting info about LeafletJS Map:

Official

• Tutorials: Examples step by step to reference to create new features using Documentation. Reference.
• Docs: All necessary info to work with LeafletJS. Reference