Is it possible to have an orthographic projection with OpenLayers?

I didn't find anything specific on the matter.

@Mike’s answer is what I needed. As I am using OpenLayers 4.6.5, I had to change the last part of the code, otherwise it doesn't work. I modified the creation of the circle in

var circle = new ol.geom.Circle([0, 0], 6370997);
var style = new ol.style.Fill({
  color: "black"

I imagine that the function to trigger the circle, should be changed in

map.on("postrender", function(e){

However I am not sure how to change the function internal code.

1 Answer 1


Yes, proj4js supports ortho projections. To get a neat effect you should clip the output with the radius used in the projection definition. https://codesandbox.io/s/orthographic-0v3s3

import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import Circle from "ol/geom/Circle";
import { getVectorContext } from "ol/render";
import { Style, Fill } from "ol/style";
import { register } from "ol/proj/proj4";
import proj4 from "proj4";

  "+proj=ortho +lat_0=42.5333333333 +lon_0=-72.53333333339999 +x_0=0 +y_0=0 +a=6370997 +b=6370997 +units=m +no_defs "

var map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
  target: "map",
  view: new View({
    center: [0, 0],
    projection: "ORTHO",
    zoom: 2

var circle = new Circle([0, 0], 6370997);
var style = new Style({
  fill: new Fill({
    color: "black"

  .on("postrender", function(e) {
    var vectorContext = getVectorContext(e);
    e.context.globalCompositeOperation = "destination-in";
    e.context.globalCompositeOperation = "source-over";

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.