React-leaflet: Support for non-geographical maps/simple coordinate reference system

Created on 2 Mar 2018  路  3Comments  路  Source: PaulLeCam/react-leaflet

Before opening an issue, make sure to read the
contributing guide
and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good
reason not to follow this template.

  • [x ] All peer dependencies are installed: React, ReactDOM and Leaflet.
  • [ x] Using a supported version of React and ReactDOM (v15.x or v16.x).
  • [ x] Using the supported version of Leaflet (v1.3.x) and its corresponding CSS file is loaded.
  • [ x] Using the latest stable version of React-Leaflet.
  • [ x] The issue has not already been reported.
  • [ x] Make sure you have followed the quick start guide for Leaflet.
  • [ x] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

I just have a question. I was wondering if there was support for non-geographical maps as described in http://leafletjs.com/examples/crs-simple/crs-simple.html. I looked through the API but could not find a way to set a simple coordinate reference system. Is there an option for this?

Actual behavior

Could not find mention throughout the docs.

Steps to reproduce

Please provide the simplest example possible to reproduce the issue, based on
this CodePen.

Most helpful comment

@lambdakris

In case you're interested:

import React from 'react'
import { Map, ImageOverlay, Marker, Popup } from 'react-leaflet'
import L from 'leaflet'

const bounds = [[0, 0], [1900, 2546]]
const style = { height: '80vh', width: '75vw' }

export default class SimpleExample extends React.Component {
  render() {
    return (
      <Map crs={L.CRS.Simple} minZoom={-4} bounds={bounds} style={style}>
        <ImageOverlay
          bounds={bounds}
          url="https://beamtech-file.s3.amazonaws.com/company/3/6dcbca6e-574d-410b-b732-b6ba0865ed06-hermitage-standard-lhs-2546x1900_0.png"
        />

        <Marker position={[1000, 1000]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    )
  }
}

All 3 comments

You can inject any option supported by a Leaflet layer in the corresponding component, so the example from

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

roughly translates to

<Map crs={L.CRS.Simple} ...>...</Map>

@PaulLeCam

Just a suggestion: document this somewhere. I'm going to guess people new to this library don't know where to find this information.

@lambdakris

In case you're interested:

import React from 'react'
import { Map, ImageOverlay, Marker, Popup } from 'react-leaflet'
import L from 'leaflet'

const bounds = [[0, 0], [1900, 2546]]
const style = { height: '80vh', width: '75vw' }

export default class SimpleExample extends React.Component {
  render() {
    return (
      <Map crs={L.CRS.Simple} minZoom={-4} bounds={bounds} style={style}>
        <ImageOverlay
          bounds={bounds}
          url="https://beamtech-file.s3.amazonaws.com/company/3/6dcbca6e-574d-410b-b732-b6ba0865ed06-hermitage-standard-lhs-2546x1900_0.png"
        />

        <Marker position={[1000, 1000]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </Map>
    )
  }
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Shadowman4205 picture Shadowman4205  路  4Comments

josdejong picture josdejong  路  4Comments

ekatzenstein picture ekatzenstein  路  4Comments

fborghi picture fborghi  路  3Comments

samankhademi picture samankhademi  路  3Comments