React-leaflet: Marker With Label

[Shadowman4205]

Hello i have got map without labels(Towns etc) i want near my marker appear and one text Like townName , i tried this to extend Marker.

// @flow

import { Icon, marker } from 'leaflet'
import React from 'react'

import { PropTypes , MapLayer } from 'react-leaflet'
require('leaflet.label');

const childrenType  = PropTypes.children
const latlngType  = PropTypes.latlng

export default class MarkerLabel extends MapLayer {
  static propTypes = {
    children: childrenType,
    label: React.PropTypes.string.isRequired,
    labelOptions: React.PropTypes.object,
    icon: React.PropTypes.instanceOf(Icon),
    opacity: React.PropTypes.number,
    position: latlngType.isRequired,
    zIndexOffset: React.PropTypes.number,
  }

  static childContextTypes = {
    popupContainer: React.PropTypes.object,
  }

  getChildContext (): {popupContainer: Object} {
    return {
      popupContainer: this.leafletElement,
    }
  }

  createLeafletElement (props: Object): Object {
    const { position, ...options } = props
    return marker(position, this.getOptions(options)).bindLabel(label, labelOptions);
  }

  updateLeafletElement (fromProps: Object, toProps: Object) {
    if (toProps.position !== fromProps.position) {
      this.leafletElement.setLatLng(toProps.position)
    }
    if (toProps.icon !== fromProps.icon) {
      this.leafletElement.setIcon(toProps.icon)
    }
    if (toProps.zIndexOffset !== fromProps.zIndexOffset) {
      this.leafletElement.setZIndexOffset(toProps.zIndexOffset)
    }
    if (toProps.opacity !== fromProps.opacity) {
      this.leafletElement.setOpacity(toProps.opacity)
    }
    if (toProps.draggable !== fromProps.draggable) {
      if (toProps.draggable) {
        this.leafletElement.dragging.enable()
      } else {
        this.leafletElement.dragging.disable()
      }
    }
  }

  render (): null | React.Element<*> {
    return this.props.children || null
  }
}

And tried use it like Marker of this package.

var {MarkerLabel} = require('./MarkerLabel');
<MarkerLabel  position={[item.lat, item.lng]} icon={icon} label={item.name}></MarkerLabel>

But i am getting error

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

What am i doing wrong? Do i have write it as plugin or what?

[PaulLeCam]

Leaflet.Label is deprecated since Leaflet v1 includes it in the core as Leaflet.Tooltip, which is supported in this lib with the <Tooltip /> component.
You can see it used in this example, I don't think you need a custom component for this use case.

[Shadowman4205]

Thank you,but what if i want use both Tooltip and Popup

<Marker position={[item.lat, item.lng]}>
              <Popup>
                    <span>{item.name}</span>
              </Popup>
               <Tooltip direction='right' offset={[-8, -2]} opacity={1} permanent>
                       <span>{item.name}</span>
                </Tooltip>
</Marker>

This give me error.
So i tried this

<Marker position={[item.lat, item.lng]}>
            <LayerGroup>
                   <Popup>
                          <span>{item.name}</span>
                    </Popup>
                     <Tooltip direction='right' offset={[-8, -2]} opacity={1} permanent>
                           <span>{item.name}</span>
                       </Tooltip>
              </LayerGroup>
</Marker>

But i get error Uncaught Error: Unable to find element with ID 210.

When i am using or popup or tooltip only, working fine.

[PaulLeCam]

There was a bug preventing Marker from having multiple children, that should be fixed in v1.1.1 so your code

<Marker position={[item.lat, item.lng]}>
              <Popup>
                    <span>{item.name}</span>
              </Popup>
               <Tooltip direction='right' offset={[-8, -2]} opacity={1} permanent>
                       <span>{item.name}</span>
                </Tooltip>
</Marker>

should work as expected after you upgrade to the latest version.

[psben113]

<Marker position={[item.lat, item.lng]}>
              <Popup>
                    <span>{item.name}</span>
              </Popup>
               <Tooltip direction='right' offset={[-8, -2]} opacity={1} permanent>
                       <span>{item.name}</span>
                </Tooltip>
</Marker>

How could you modify this so that you can have multiple popups respective to each marker?