Package Exports

react-leaflet-enhanced-marker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-leaflet-enhanced-marker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>
    );
  }
}