Changing CRS is not yet supported by Leaflet

[alexxlagutin]

Hi! Do you have any plans to make CRS changing reactive?

[bezany]

I think not good solution will implements change CRS if leaflet don't support it. It's need full re-mounted map component and all children. But you can manual re-mounted map after change CRS. For this need set :key property of LMap depended from CRS type. If CRS change then vue re-create component of LMap. I create example: https://jsfiddle.net/yd8Lrx6e/1/

[DonNicoJs]

This is a perfect case to add in a note in the new docs! Let's keeps this issue open till we are a done with the new docs.

[alexxlagutin]

@bezany Thank you! Your solution works well for my case

[scramatte]

Hi,

I need support for EPSG25830. It looks that I need to use proj4 and proj4leaflet ? Can you add support for both libraries ? Thank you

Regards

[bezany]

@scramatte Hello! I think you can integrate proj4 and proj4leaflet libraries in mounted lifecycle hook. Only need adds v-if guard for render template while all data initialize. I created simple example with vue2leaflet, proj4 and proj4leaflet. Used EPSG:3006

[DonNicoJs]

Labelling this as a doc update

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Munyvorn]

@bezany @DonNicoJs could you kindly help me with visualizing a Geojson file of crs ESPG:6675. I'm trying to use Vue2-Leaflet library in this case. As with this example it's using l-tile-layer while in my case I am using l-geo-json and pass a Geojson object directly to the l-map as following:

<l-map   :zoom="zoom"
               :center="center"
               :crs="crs"
               style="height: 90vh"
>
            <l-geo-json
                    :geojson="geojson"
                    :options-style="styleFunction"
            />
</l-map>

In my mounted function, I tried using your example as following:

mounted() {
           const crs = new L.Proj.CRS('EPSG:6675', '+proj=tmerc +lat_0=36 +lon_0=137.1666666666667 +k=0.9999 +x_0=0 +y_0=0 +ellps=GRS80 +units=m +no_defs', {
                    resolutions: [
                        8192, 4096, 2048, 1024, 512, 256, 128,
                        64, 32, 16, 8, 4, 2, 1, 0.5
                    ],
                    origin: [0, 0],
                })
                this.options = {
                maxZoom: 14,
                minZoom: 0,
                continuousWorld: true,
            }
            this.crs = crs
        }

I got the response in the log Changing CRS is not yet supported by Leaflet

here is the console log: