Nonconformist Propaganda Machine

    another-react-leaflet
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    another-react-leaflet

    npm

    Another react leaflet library.

    Install

    npm install --save another-react-leaflet leaflet

    If using typescript also install @types/leaflet.

    Usage

    Create React App

    // setupLeaflet.ts
    
    import L from 'leaflet';
    
    // Import leaflet css
    import 'leaflet/dist/leaflet.css';
    
    // Import icons so that they are bundled.
    import MarkerIcon from 'leaflet/dist/images/marker-icon.png';
    import MarkerIcon2 from 'leaflet/dist/images/marker-icon-2x.png';
    import MarkerShadow from 'leaflet/dist/images/marker-shadow.png';
    
    // Disable auto detection. And update the urls.
    // https://leafletjs.com/reference.html#icon-default-option
    L.Icon.Default.prototype.options.imagePath = ' ';
    L.Icon.Default.prototype.options.iconRetinaUrl = MarkerIcon2;
    L.Icon.Default.prototype.options.iconUrl = MarkerIcon;
    L.Icon.Default.prototype.options.shadowUrl = MarkerShadow;
    // MapView.tsx
    
    import React from 'react';
    import './setupLeaflet'; // Only needs to be imported once per app.
    import { MapContainer, Marker, ScaleControl, TileLayer, Tooltip } from 'another-react-leaflet';
    
    export function MapView() {
      return (
        <MapContainer zoom={3} center={[0, 0]}>
    
          <ScaleControl/>
          
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            urlTemplate="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
    
          <Marker latlng={[0, 0]}>
            <Tooltip>
              <h1>Hello!</h1>
            </Tooltip>
          </Marker>
    
        </MapContainer>
      );
    }

    Plugins

    Help

    Changing some props doesn't do anything.

    The leaflet library doesn't allow changing all options after an instance has been created. Only some options can be changed after creation.

    In order to be able to change any option, the instance would be need to be destroyed and recreated, loosing the internal state in the process.

    If you would like to opt-in to that behaviour you only need to change the react key to force a remount.

    <Tooltip key={JSON.stringify({permanent})} permanent={permanent}>
      <h1>Hello!</h1>
    </Tooltip>

    Install

    npm i another-react-leaflet

    DownloadsWeekly Downloads

    1

    Version

    0.1.1

    License

    ISC

    Unpacked Size

    167 kB

    Total Files

    149

    Last publish

    Collaborators

    • mrxdst