@bigemap/leaflet v2.0.0

@bigemap/leaflet

Leaflet plugin supporting Bigemap server..

Features

• Provides integration with Bigemap server for imagery data.

Installation

Install the package using npm:

npm install @bigemap/leaflet

Peer Dependencies

This package requires the following peer dependency:

• leaflet >= 1.9.0

Usage

importing the Plugin

import type { Map, MapOptions } from '@bigemap/leaflet';
import { config, map } from '@bigemap/leaflet';

import 'leaflet/dist/leaflet.css';
import '@bigemap/leaflet/style.css';

// Set the Bigemap server URL
config.URL = 'http://bigemap-server-url';

// Initialize the Leaflet Map
_map = map("leafletContainer", 'bigemap.dc-satellite');

Using with React

import type { Map, MapOptions } from '@bigemap/leaflet';
import { config, map } from '@bigemap/leaflet';
import { useEffect, useRef } from 'react';

import 'leaflet/dist/leaflet.css';
import '@bigemap/leaflet/style.css';

export default function LeafletMap() {
  const leafletContainer = useRef(null);
  let _map: Map | null = null;

  useEffect(() => {
    if (!leafletContainer.current) return;

    // Config Bigemap Server URL
    config.URL = 'http://bigemap-server-url';

    // Initialize the Leaflet Map
    _map = map(leafletContainer.current, 'imagery-layer-id');

    return () => {
      if (_map) _map.remove();
    };
  }, []);

  return (
    <div
      ref={leafletContainer}
      style={{
        width: '100%',
        height: '100vh',
        position: 'absolute',
        top: 0,
        left: 0
      }}
    />
  );
}