umap-project / umap

uMap lets you create maps with OpenStreetMap layers in a minute and embed them in your site.
https://umap-project.org
Other
1.19k stars 226 forks source link

Any interest in allowing different coordinate systems? #789

Open brentfraser opened 4 years ago

brentfraser commented 4 years ago

I'd like to use EPSG:3413 a polar stereographic crs suitable for the Arctic.

brentfraser commented 4 years ago

For those interested in supporting another crs, here's a simple example showing the North Pole using EPSG:3413.

<!doctype html>
<html>
<head>
    <title>Simple Demo</title>
    <meta charset="utf-8">
  <style>
  body {
    margin: 0px;
  }
  #map {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #fff;
  }
  </style>

</head>

<body>
<link rel="stylesheet" href="https://npmcdn.com/leaflet@1.6.0/dist/leaflet.css" />
<script                 src="https://npmcdn.com/leaflet@1.6.0/dist/leaflet-src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"                 integrity="sha256-JqrpvcArHHBvGYR2mUJeONFhUYLhl5qDEjyhoy9OF38=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js" integrity="sha256-IIb6zlGmoYdKMco2DkshWuX5Oz/d4VSFbOG7x0Zamjo=" crossorigin="anonymous"></script>

<div id="map"></div>

<script>
  var EPSG3413 = new L.Proj.CRS(
    'EPSG:3413',
    '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 ' +
    '+ellps=WGS84 +datum=WGS84 +units=m +no_defs',
    {
      origin: [-4194304, 4194304],
      resolutions: [8192.0, 4096.0, 2048.0, 1024.0, 512.0, 256.0],
      bounds: L.bounds([ [-4194304, -4194304],[4194304, 4194304] ])
    }
  );

  var map = L.map('map', {
    center: [90, 0],
    zoom: 6,
    crs: EPSG3413
  });

  var imageLayer = L.tileLayer("//gibs-{s}.earthdata.nasa.gov/wmts/epsg3413/best/{layer}/default/{time}/{tileMatrixSet}/{z}/{y}/{x}.{format}", {
                format: "jpg",
                layer: "BlueMarble_NextGeneration",
                tileMatrixSet: "EPSG3413_500m",
                time: "2016-04-14",
                daily: false,
                tileSize: 512,
                subdomains: "abc",
                noWrap: true,
                continuousWorld: true,
                attribution:"<a href='https://wiki.earthdata.nasa.gov/display/GIBS'>NASA EOSDIS GIBS</a>&nbsp;&nbsp;&nbsp;"
  }).addTo(map);
</script>

</body>
</html>

My thought would be to add a model/table to hold the CRS definitions, and add foreign keys in the umap_map and umap_tilelayer tables to link to the umap_crs table.