React-leaflet: Missing support for Non-Geographical Maps

[awjreynolds]

Leaflet supports non-geographical maps

    var map = L.map('map', {
        crs: L.CRS.Simple
    });

    var bounds = [[0,0], [1000,1000]];
    var image = L.imageOverlay('uqm_map_full.png', bounds).addTo(map);

    map.fitBounds(bounds);

http://leafletjs.com/examples/crs-simple/crs-simple.html

I've been able to get this working in react-leaflet but had to import Leaflet to get at the L.CRS.Simple to handle map manipulation.

import React, { Component } from 'react';
import {
  ImageOverlay,
  Map
} from 'react-leaflet';
var Leaflet = require('leaflet');

export default class InterfaceDevicesMap extends Component {
  render () {
    const bounds = [[0, 0], [1000, 1000]];
    return (
      <div>
        <Map crs={ Leaflet.CRS.Simple } bounds={ bounds }>
          <ImageOverlay url='http://leafletjs.com/examples/crs-simple/uqm_map_full.png' bounds={ bounds } />
        </Map>
      </div>
    );
  }
}

Not sure if this is just a case of a missing example and this is the way it is supposed to work.

[PaulLeCam]

Sorry I don't get what is your issue?
If it is having to import Leaflet, it is the expected behavior, this library is a wrapper around Leaflet, not a replacement for it.

[awjreynolds]

The Map component properties does not include csr. Happy to put together a pull request once I've got this working in my project.
export default class Map extends MapComponent { static propTypes = { animate: PropTypes.bool, bounds: boundsType, boundsOptions: PropTypes.object, center: latlngType, children: childrenType, className: PropTypes.string, id: PropTypes.string, maxBounds: boundsType, maxZoom: PropTypes.number, minZoom: PropTypes.number, style: PropTypes.object, useFlyTo: PropTypes.bool, zoom: PropTypes.number, }

[PaulLeCam]

These are the props handled by React-Leaflet itself, as there can be additional logic related to them, but any other prop is passed to the Leaflet.map() factory, as you can see here.

[awjreynolds]

In that case that makes a lot of sense. Thank you for your feedback. I'll close this.

[dragGH102]

@awjreynolds how did you got that working?

If I try:

import { Map } from 'react-leaflet';
import L from 'leaflet';

<Map 
   ... other props (zoom, center) // works without crs
   crs = {L.CRS.Earth}
/>

the map is shown as gray and I get a lot of errors in console:

Uncaught TypeError: Cannot read property 'x' of undefined
    at Point._add (reactBoilerplateDeps.dll.js:88974)
    at Point.add (reactBoilerplateDeps.dll.js:88969)
    at NewClass.layerPointToLatLng (reactBoilerplateDeps.dll.js:92083)
    at NewClass._fireDOMEvent (reactBoilerplateDeps.dll.js:92503)
    at NewClass._handleDOMEvent (reactBoilerplateDeps.dll.js:92464)
    at HTMLDivElement.handler (reactBoilerplateDeps.dll.js:90467)

[LukyVj]

https://github.com/PaulLeCam/react-leaflet/issues/311#issue-220611097

I used the latest example, and it worked like a charm:

import React, { Component } from 'react';
import {
  ImageOverlay,
  Map
} from 'react-leaflet';
var Leaflet = require('leaflet');

export default class InterfaceDevicesMap extends Component {
  render () {
    const bounds = [[0, 0], [1000, 1000]];
    return (
      <div>
        <Map crs={ Leaflet.CRS.Simple } bounds={ bounds }>
          <ImageOverlay url='http://leafletjs.com/examples/crs-simple/uqm_map_full.png' bounds={ bounds } />
        </Map>
      </div>
    );
  }
}

Thanks !

[imshmen]

@dragGH102 I am having a very similar problem as you mentioned. Did you mange to resolve the issue? If you did, please kindly help me a bit here.