Repository files navigation

ThisLeaflet plugin adds support for using projections supported byProj4js.

Proj4Leaflet uses Leaflet 1.0.3, for compatibility with Leaflet 0.7.x use the0.7.2 release.

Leaflet comes with built in support for tiles inSpherical Mercator anda few other projections.If you need support for tile layers in other projections, the Proj4Leaflet plugin lets you use tiles in any projectionsupported by Proj4js, which means support for just about any projection commonly used.

Proj4Leaflet also adds support for GeoJSON in any projection, while Leaflet by itself assumes GeoJSON to alwaysuse WGS84 as its projection.

Image overlays with bounds set from projected coordinates rather thanLatLngs are also supported by Proj4Leaflet plugin.

For more details, see this blog post ontiling and projections.

Common use means making a new CRS instance for the projection you want to use.

// RT90 with map's pixel origin at RT90 coordinate (0, 0)varcrs=newL.Proj.CRS('EPSG:2400','+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 '+'+y_0=0.0 +proj=tmerc +ellps=bessel +units=m '+'+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs',{resolutions:[8192,4096,2048]// 3 example zoom level resolutions});varmap=L.map('map',{crs:crs,continuousWorld:true,worldCopyJump:false});L.tileLayer('http://tile.example.com/example/{z}/{x}/{y}.png').addTo(map);

Using options when constructing the CRS, you can set the tile set's origin.

// SWEREF 99 TM with map's pixel origin at (218128.7031, 6126002.9379)varcrs=newL.Proj.CRS('EPSG:3006','+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',{origin:[218128.7031,6126002.9379],resolutions:[8192,4096,2048]// 3 example zoom level resolutions});

Proj4js has breaking changes introduced after version 1.1.0. The current version of Proj4Leafletuses Proj4js 2.3.14 or later. If you for some reason need Proj4js version 1.1.0 compatibility, you canstill use Proj4Leafletversion 0.5.

The plugin extends Leaflet with a few classes that helps integrating Proj4's projections intoLeaflet'sCRS abstract class.

A CRS implementation that uses a Proj4 definition for the projection.This is likely to be the only class you need to work with in Proj4Leaflet.

varmap=L.map('map',{center:[57.74,11.94],zoom:13,crs:L.Proj.CRS('EPSG:2400','+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 '+'+y_0=0.0 +proj=tmerc +ellps=bessel +units=m '+'+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs',{resolutions:[8192,4096,2048]// 3 example zoom level resolutions}),continuousWorld:true,worldCopyJump:false});

L.Proj.CRS(code,proj4def,options)

• code is the projection's SRS code (only used internally by the Proj4js library)
• proj4def is the Proj4 definition string for the projection to use
• options is an options object with these possible parameters:
  • origin - the projected coordinate to use as the map's pixel origin; overrides thetransformation option if set
  • transformation - anL.Transformation that is usedto transform the projected coordinates to pixel coordinates; default isL.Transformation(1, 0, -1, 0)
  • scales - an array of scales (pixels per projected coordinate unit) for each corresponding zoom level;default is to use Leaflet's native scales. You should usescalesorresolutions, not both.
  • resolutions - an array of resolutions (projected coordinate units per pixel) for each corresponding zoom level;default is to use Leaflet's native resolutions. You should usescalesorresolutions, not both.
  • bounds - anL.Bounds providing the bounds of CRS in projectedcoordinates. If defined, Proj4Leaflet will use this in thegetSize method, otherwise reverting to Leaflet'sdefault size for Spherical Mercator.

ExtendsL.GeoJSON to add CRS support. Unlike the TileLayer extension, theCRS is derived from thename property of acrs defined directly on the GeoJSON object perthe spec.Linked CRSs are not supported.

Note: The relevant Proj4 definition should be defined directly viaproj4.defs before loading the GeoJSON object.If it is not, Proj4leaflet will throw an error.

Also, note that future versions of the GeoJSON spec may not include explicit CRS support. Seegeojson/draft-geojson#6 for more information.

proj4.defs("urn:ogc:def:crs:EPSG::26915","+proj=utm +zone=15 +ellps=GRS80 +datum=NAD83 +units=m +no_defs");vargeojson={type:"Feature",geometry:{type:"Point",coordinates:[481650,4980105]},crs:{type:"name",properties:{name:"urn:ogc:def:crs:EPSG::26915"}}};varmap=L.map('map');L.Proj.geoJson(geojson).addTo(map);

Works likeL.ImageOverlay, but accepts bounds in the map'sprojected coordinate system instead of latitudes and longitudes. This is useful when the projected coordinate systemsaxis do not align with the latitudes and longitudes, which results in distortion with the default image overlay in Leaflet.

// Coordinate system is EPSG:28992 / Amersfoort / RD NewvarimageBounds=L.bounds([145323.20011251318,475418.56045463786],[175428.80013969325,499072.9604685671]);L.Proj.imageOverlay('http://geo.flevoland.nl/arcgis/rest/services/Groen_Natuur/Agrarische_Natuur/MapServer/export?'+'format=png24&transparent=true&f=image&bboxSR=28992&imageSR=28992&layers=show%3A0'+'&bbox=145323.20011251318%2C475418.56045463786%2C175428.80013969325%2C499072.9604685671&size=560%2C440',imageBounds);