proj4leaflet

Proj4Leaflet allows you to use any projection supported by Proj4js within a Leaflet map. This is achieved by creating a new L.Proj.CRS instance and passing it to the Leaflet map options. This enables support for custom tile layers, GeoJSON in non-WGS84 projections, and image overlays using projected coordinates.

// RT90 with map's pixel origin at RT90 coordinate (0, 0)
var crs = new 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
  }
);

var map = L.map('map', {
  crs: crs,
  continuousWorld: true,
  worldCopyJump: false
});

L.tileLayer('http://tile.example.com/example/{z}/{x}/{y}.png').addTo(map);

The L.Proj.Projection class handles the actual mathematical conversion between geographic coordinates (LatLng) and projected coordinates (Points).

• project(latlng): Converts a L.LatLng to an L.Point using the forward projection.
• unproject(point, unbounded): Converts an L.Point back to an L.LatLng using the inverse projection. The unbounded parameter determines if the resulting LatLng should be constrained.

The L.Proj.geoJson factory function creates an L.Proj.GeoJSON layer. This layer is specifically designed to handle GeoJSON data that contains its own CRS information.

If the GeoJSON object contains a crs property (either with a name or a type and code), the layer will automatically configure its coordsToLatLng option to unproject the coordinates using the specified projection.

// Use the factory function to create a GeoJSON layer that respects the GeoJSON's CRS
var geojsonLayer = L.Proj.geoJson(myGeojsonData, {
    style: function(feature) {
        return { color: '#ff7800' };
    }
});

geojsonLayer.addTo(map);

The L.Proj.imageOverlay factory function creates an L.Proj.ImageOverlay layer. Unlike the standard L.ImageOverlay, this version allows you to provide bounds in the projected coordinate system (e.g., meters) rather than latitude/longitude. This is useful for overlaying maps or imagery that are already in a specific projection.

// bounds should be in the projected coordinate system
var bounds = [[minX, minY], [maxX, maxY]];
var imageOverlay = L.Proj.imageOverlay('url_to_image.png', bounds).addTo(map);

The L.Proj.CRS class extends L.CRS to allow Leaflet maps to use non-standard coordinate reference systems via proj4js. You can initialize it using a Proj4 code, a Proj4 definition string, or a Proj4 object.

Key configuration options include:

• bounds: The bounding box of the projection.
• origin: An array [x, y] used to set the transformation origin.
• scales or resolutions: Used to define the scale/zoom relationship.
• transformation: An L.Transformation object (defaults to new L.Transformation(1, 0, -1, 0)).

// Example using a Proj4 code and definition
var crs = new L.Proj.CRS('EPSG:3857', '+proj=merc +a=6378137 +b=6378137 +R=0 +datum=WGS84 +units=m +no_defs', {
    resolutions: [8192, 4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5]
});

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

Extends L.GeoJSON to add CRS support. The CRS is derived from the name property of a crs defined directly on the GeoJSON object.

Important Requirements:

1. The relevant Proj4 definition must be defined via proj4.defs before loading the GeoJSON object, otherwise Proj4Leaflet will throw an error.
2. Linked CRSs are not supported.

proj4.defs("urn:ogc:def:crs:EPSG::26915", "+proj=utm +zone=15 +ellps=GRS80 +datum=NAD83 +units=m +no_defs");

var geojson = {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [481650, 4980105]
  },
  crs: {
    type: "name",
    properties: {
      name: "urn:ogc:def:crs:EPSG::26915"
    }
  }
};

var map = L.map('map');

L.Proj.geoJson(geojson).addTo(map);

Works like L.ImageOverlay, but accepts bounds in the map's projected coordinate system instead of LatLngs. This prevents distortion when the projected coordinate system's axis does not align with latitudes and longitudes.

// Coordinate system is EPSG:28992 / Amersfoort / RD New
var imageBounds = 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);

A CRS implementation that uses a Proj4 definition for the projection. This is the primary class used to integrate Proj4 projections into Leaflet.

var map = 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]
      }
    ),
    continuousWorld: true,
    worldCopyJump: false
});