React Leaflet - Amend X/Y LatLng to work from center rather than bottom left using CRS

Question

Hey has anybody managed to change the X/Y axis start points in react leaflet? I need my co-ordinates to work from the middle of the map rather than the bottom left using CRS. Below is what I have so far, any point in the right direction would be great!

  componentDidMount() {
    if ( __CLIENT__ ) {
      Leaflet = require('leaflet');
      LeafletCRS = Leaflet.CRS.Simple;

      this.setState({
        leafletLoaded: true
      });
    }
  }

  render() {
    const bounds = [[0, 0], [600, 600]];
    return (
       <div className="columns small-12 medium-6">
          <Map
             style={ { width:'600px',height: '600px' } }
             minZoom={ 1 }
             center= { [0, 0] }
             maxZoom={ 2 }
             bounds={ bounds }
             crs={ LeafletCRS }
           >
           <ImageOverlay
              url="IMG HERE"
              bounds={ bounds }
           />
           <Circle center= { [0, 0] } radius={5} fillColor="blue" />
         </Map> 
      </div>
   )

See https://stackoverflow.com/questions/34638887/leaflet-custom-coordinates-on-image — ghybs, Apr 27 '20 at 19:48

score 0 · Answer 1 · answered Apr 28 '20 at 11:50

Best example of this is - http://plnkr.co/edit/5SQqp7SP4nf8muPM5iso?p=preview&preview

  L.CRS.MySimple = L.extend({}, L.CRS.Simple, {
    // At zoom 0, tile 268x268px should represent the entire "world" of size 8576x8576.
    // scale is therefore 8576 / 268 = 32 (use the reverse in transformation, i.e. 1/32).
    // We want the center of tile 0/0/0 to be coordinates [0, 0], so offset is 8576 * 1/32 / 2 = 268 / 2 = 134.
    transformation: new L.Transformation(1 / 32, 134, -1 / 32, 134)
  });

You just need to amend the maths scale to suit you

React Leaflet - Amend X/Y LatLng to work from center rather than bottom left using CRS

1 Answers1