Wondering what’s next for npm?Check out our public roadmap! »

    react-leaflet-enhanced-marker

    1.0.19 • Public • Published
    Leaflet

    react-leaflet-enhanced-marker

    This library will help render dynamic markers on Leaflet Map. The marker can be :-

    • A simple String
    • A React Component
    • An Image

    It works with any stable version of react-leaflet 1.x.x and 2.x.x.

    How to use :

    Using react-leaflet-enhanced-marker to render Marker using plain text

    import React, { Component } from "react";
    import ReactDOM from "react-dom";
    import { Map, TileLayer } from "react-leaflet";
    import Marker from 'react-leaflet-enhanced-marker'
     
     
    class MarkerExample extends Component {
      state = {
        center: [32, -97],
        zoom: 6,
      };
     
      render() {
        return (
          <div>
            <Map center={this.state.center} zoom={this.state.zoom}>
              <TileLayer
                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
              />
              <Marker 
                icon={'Test Marker Here'}
                position={this.state.center}
              />
            </Map>
          </div>
        );
      }
    }

    Using react-leaflet-enhanced-marker to render Marker using static React Component

    class ReactComponent extends Component {
      render() {
        const markerStyle = {
          backgroundColor: "blue",
          color: "white",
          display: "flex",
          justifyContent: "center",
          width: "50px",
          height: "50px",
          borderRadius: "50px",
          alignItems: "center"
        };
        return <div style={markerStyle}>Marker</div>;
      }
    }
     
    class MapExample extends Component {
      state = {
        center: [32, -97],
        zoom: 6
      };
     
      render() {
        return (
          <div>
            <Map center={this.state.center} zoom={this.state.zoom}>
              <TileLayer
                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
              />
              <Marker icon={<ReactComponent/>} position={this.state.center} />
            </Map>
          </div>
        );
      }
    }

    Using react-leaflet-enhanced-marker to render Image markers

    import img from './imagePath'
     
    class MapExample extends Component {
      state = {
        center: [32, -97],
        zoom: 6
      };
     
      render() {
        return (
          <div>
            <Map center={this.state.center} zoom={this.state.zoom}>
              <TileLayer
                attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
              />
              <Marker icon={<img src={img} style={{width:'100'}} />} position={this.state.center} />
            </Map>
          </div>
        );
      }
    }

    Install

    npm i react-leaflet-enhanced-marker

    DownloadsWeekly Downloads

    504

    Version

    1.0.19

    License

    MIT

    Unpacked Size

    3.03 MB

    Total Files

    20

    Last publish

    Collaborators

    • avatar