Preact-leaflet NPM

preact-leaflet

🚧 This library is current under construction. 🚧

Currently Supporting the following Leaflet components:

Example

import { h } from 'preact';
import { SvgIcon } from './SvgIcon';
import {
  MapContainer,
  TileLayer,
  Marker,
} from 'preact-leaflet';
import 'leaflet/dist/leaflet.css';
import './styles.css';


export const App = () => {
  return (
    <MapContainer
      // ref={this.mapRef}
      center={[51.505, -0.09]}
      zoom={13}
      options={{
        // Options
        // preferCanvas: false,

        // Control Options
        // attributionControl: true,
        // zoomControl: true,

        // Interaction Options
        // closePopupOnClick: true,
        // zoomSnap: 1,
        // zoomDelta: 1,
        // trackResize: true,
        // boxZoom: true,
        // doubleClickZoom: true,
        // dragging: true,

        // Map State Options
        // crs:
        // center: [51.505, -0.09],
        // zoom: 13,
        // minZoom: // Number
        // maxZoom: // Number
        // layers: [],
        // maxBounds: null,
        // rendered:

        // Animation Options
        // zoomAnimation: true,
        // zoomAnimationThreshold: 4,
        // fadeAnimation: true,
        // markerZoomAnimation: true,
        // transform3DLimit:

        // Panning Inertia Options
        // inertia:
        // inertiaDeceleration:
        // inertiaMaxSpeed:
        // easeLinearity:
        // worldCopyJump:
        // maxBoundsViscosity:

        // Keyboard Navigation Options
        // keyboard:
        // keyboardPanDelta:

        // Mouse wheel options
        // scrollWheelZoom:
        // wheelDebounceTime:
        // wheelPxPerZoomLevel:

        // Touch interaction options
        // tapHold:
        // tapTolerance:
        // touchZoom:
        // bounceAtZoomLimits:
      }}
    >
      <TileLayer
        // to use mapbox
        url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
        // to use open street maps
        // url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        options={{
          // to use mapbox
          attribution: "Map data &copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, Imagery © <a href='https://www.mapbox.com/'>Mapbox</a>",
          // to use open street maps
          // attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
          maxZoom: 18,
          id: 'mapbox/streets-v11',
          tileSize: 512,
          zoomOffset: -1,
          // required for mapbox
          accessToken: '',
          // crossOrigin: false,
        }}
      />
      <Marker
        position={[51.5, -0.09]}
        icon={SvgIcon}
        options={{
          title: 'this is my title',
          opacity: 0.5,
        }}
      />
    </MapContainer>
  );
}