maptalks - TileLayer of custom projection by proj4js

TileLayer of custom projection by proj4js

Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations.

Maptalks can work with proj4js to load maps or data from different geo projections.

All you need to do is to define a projection object with proj4js and set to map's spatial reference.

Below is a proj4js version of the default EPSG:3857 projection.

index.html

<!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>TileLayer and Geo-Projections - TileLayer of custom projection by proj4js</title>
  <style type="text/css">
    html,body{margin:0px;height:100%;width:100%}
    .container{width:100%;height:100%}
  </style>
  <link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <body>
    <script type="text/javascript" src="proj4.js"></script>
    <div id="map" class="container"></div>

    <script>
      // EPSG:3857's proj definition
      var proj3857 = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs';
      var proj4 = proj4('WGS84', proj3857);

      // define a custom projection object
      var projection = {
        code : 'proj4-merc',  // code of the projection

        project : function (c) { // from wgs84 to EPSG3857
          var pc = proj4.forward(c.toArray());
          return new maptalks.Coordinate(pc);
        },

        unproject : function (pc) { // from EPSG3857 to wgs84
          var c = proj4.inverse(pc.toArray());
          return new maptalks.Coordinate(c);
        },

        // tell projection how to measure
        // for cartesian coordinates change this to:
        // measure: 'identity'
        measure: 'EPSG:4326'
      };

      var map = new maptalks.Map('map', {
        center:     [-0.113049, 51.498568],
        zoom:  13,
        // spatial reference definition
        spatialReference : {
          projection : projection,        // geo projection, defined by proj4js
          resolutions : [           // map's zoom levels and resolutions
            156543.03392804097,
            78271.51696402048,
            9135.75848201024,
            19567.87924100512,
            9783.93962050256,
            4891.96981025128,
            2445.98490512564,
            1222.99245256282,
            611.49622628141,
            305.748113140705,
            152.8740565703525,
            76.43702828517625,
            38.21851414258813,
            19.109257071294063,
            9.554628535647032,
            4.777314267823516,
            2.388657133911758,
            1.194328566955879,
            0.5971642834779395,
            0.29858214173896974
          ],
          fullExtent : {         // map's full extent
            'top': 6378137 * Math.PI,
            'left': -6378137 * Math.PI,
            'bottom': -6378137 * Math.PI,
            'right': 6378137 * Math.PI
          }
        },
        baseLayer : new maptalks.TileLayer('base',{
          urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
          subdomains: ["a","b","c","d"],
          attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
        })
      });

    </script>
  </body>
</html>

// EPSG:3857's proj definition
var proj3857 = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs';
var proj4 = proj4('WGS84', proj3857);

// define a custom projection object
var projection = {
  code: 'proj4-merc', // code of the projection

project: function(c) { // from wgs84 to EPSG3857
    var pc = proj4.forward(c.toArray());
    return new maptalks.Coordinate(pc);
  },

unproject: function(pc) { // from EPSG3857 to wgs84
    var c = proj4.inverse(pc.toArray());
    return new maptalks.Coordinate(c);
  },

// tell projection how to measure
  // for cartesian coordinates change this to:
  // measure: 'identity'
  measure: 'EPSG:4326'
};

var map = new maptalks.Map('map', {
  center: [-0.113049, 51.498568],
  zoom: 13,
  // spatial reference definition
  spatialReference: {
    projection: projection, // geo projection, defined by proj4js
    resolutions: [ // map's zoom levels and resolutions
      156543.03392804097,
      78271.51696402048,
      9135.75848201024,
      19567.87924100512,
      9783.93962050256,
      4891.96981025128,
      2445.98490512564,
      1222.99245256282,
      611.49622628141,
      305.748113140705,
      152.8740565703525,
      76.43702828517625,
      38.21851414258813,
      19.109257071294063,
      9.554628535647032,
      4.777314267823516,
      2.388657133911758,
      1.194328566955879,
      0.5971642834779395,
      0.29858214173896974
    ],
    fullExtent: { // map's full extent
      'top': 6378137 * Math.PI,
      'left': -6378137 * Math.PI,
      'bottom': -6378137 * Math.PI,
      'right': 6378137 * Math.PI
    }
  },
  baseLayer: new maptalks.TileLayer('base', {
    urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
    subdomains: ["a", "b", "c", "d"],
    attribution: '© <a href="http://osm.org">OpenStreetMap</a>  contributors, © <a href="https://carto.com/">CARTO</a> '
  })
});