import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import { MapContent } from './ui/MapContent';
import "react-leaflet-markercluster/dist/styles.min.css";
import L from "leaflet";
const defaultCenter = [49.280806, -122.828007]; // Univerus Vancouver Office 
const defaultZoom = 13; // Ranges from 0 to 18
const defaultStyle = { height: '100%', width: '100%' };
export const FluentMap = ({ onClick, onMouseOver, onMouseOut, data, // {ex. long, lat, title, iconProps (component, color) }
IconComponent, bounds, style = defaultStyle, centerCoordinates = defaultCenter, zoom = defaultZoom, dragging = true, doubleClickZoom = true, scrollWheelZoom = true, attributionControl = true, zoomControl = true, highlightMarkersOnClick = true, PopupComponent, children, useDefaultMarker = true, useMarkerClustering = false }) => {
    return (React.createElement(MapContainer, { bounds: bounds, style: style, center: centerCoordinates, zoom: zoom, dragging: dragging, doubleClickZoom: doubleClickZoom, scrollWheelZoom: scrollWheelZoom, attributionControl: attributionControl, zoomControl: zoomControl, preferCanvas: true, renderer: L.canvas({}) }, React.createElement(TileLayer, { attribution: "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors", url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" }), React.createElement(MapContent, { data: data, IconComponent: IconComponent, onClick: onClick, onMouseOver: onMouseOver, onMouseOut: onMouseOut, highlightMarkersOnClick: highlightMarkersOnClick, PopupComponent: PopupComponent, children: children, useDefaultMarker: useDefaultMarker, useMarkerClustering: useMarkerClustering })));
};
//# sourceMappingURL=FluentMap.js.map