react-leaflet#ZoomControl TypeScript Examples

The following examples show how to use react-leaflet#ZoomControl. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Map.tsx    From MLH-Fellow-Map with MIT License 6 votes vote down vote up 
Map: FunctionComponent<{
  defaultBaseMap: string;
  className?: string;
}> = ({
  children,
  className,
  defaultBaseMap = DEFAULT_MAP_SERVICE,
  ...rest
}) => {
  useConfigureLeaflet();

  const basemap = getMapServiceByName(defaultBaseMap);

  const mapClassName = `map`;

  if (!isDomAvailable()) {
    return (
      <div className={`${mapClassName} ${className || ''}`}>
        <p className="map-loading">Loading map...</p>
      </div>
    );
  }

  const mapSettings = {
    className: 'map-base',
    zoomControl: false,
    ...rest,
  };

  return (
    <div className={mapClassName}>
      <BaseMap {...mapSettings}>
        {basemap && <TileLayer {...basemap} />}
        {children}
        <ZoomControl position="bottomright" />
      </BaseMap>
    </div>
  );
}
Example #2
Source File: LeafletMap.tsx    From Teyvat.moe with GNU General Public License v3.0 4 votes vote down vote up 
LeafletMap: FunctionComponent = () => {
  const classes = useStyles();

  const onTileLayerLoadStart = useCallback(() => {
    dispatchSetLoading('loadLeafletTiles', 'progress');
  }, []);

  const onTileLayerLoadError = useCallback(() => {
    dispatchSetLoading('loadLeafletTiles', 'error');
  }, []);

  const onTileLayerLoadSuccess = useCallback(() => {
    dispatchSetLoading('loadLeafletTiles', true);
  }, []);

  return (
    <MapContainer
      className={classes.main}
      maxBounds={MAP_BOUNDS}
      center={MAP_CENTER}
      zoom={DEFAULT_ZOOM}
      zoomDelta={0.5}
      editable
      crs={CRS.Simple}
      zoomSnap={0.5}
      maxZoom={MAXIMUM_ZOOM}
      minZoom={MINIMUM_ZOOM}
      attributionControl={false} // Override the Leaflet attribution with our own AttributionControl.
      zoomControl={false}
    >
      {/* Handles events related to the map position. */}
      <MapPositionHandler />
      {/* Handles events related to the map editing, and renders the editor controls.. */}
      <MapEditorHandler />
      {/* Controls the actual map image. */}
      <TileLayer
        onLoadSuccess={onTileLayerLoadSuccess}
        onLoadStart={onTileLayerLoadStart}
        onLoadError={onTileLayerLoadError}
      />

      <RegionLabelLayer />
      {/* <WorldBorderLayer /> */}
      <EditorLayer />

      {/* Controls the zoom buttons in the top left corner. */}
      <ZoomControl zoomInTitle="+" zoomOutTitle="-" />
      <DebugControls />

      {/* Display each visible feature. */}
      {_.map(getMapFeatureKeys(), (key) => {
        const feature = getMapFeature(key);
        if (!feature) {
          console.error(`ERROR: Feature '${key}' is not defined.`);
          return null;
        }

        return (
          <ErrorHandler key={`feature:${key}`} errorHandler={ErrorLayer}>
            <FeatureLayer mapFeature={feature} featureKey={key} />
          </ErrorHandler>
        );
      })}

      {/* Display each visible route. */}
      {_.map(getMapRouteGroupKeys(), (key) => {
        const route = getMapRouteGroup(key);
        if (!route) {
          console.error(`ERROR: Route '${key}' is not defined.`);
          return null;
        }

        return (
          <ErrorHandler key={`route:${key}`} errorHandler={ErrorLayer}>
            <RouteLayer routeKey={key} routeGroup={route} />
          </ErrorHandler>
        );
      })}
    </MapContainer>
  );
}