I'm working toward creating a series of web maps involving relations between Canada and the Asia Pacific. The standard Spherical Mercator projection supported (exclusively it seems) by all major web-mapping frameworks is wildly unsuited to the task due to the extreme distortion in the north.

I really need to be able to use some other projection for this while also still being able to publish the final result as an interactive web map. My understanding is that the support for other projections in web cartography is essentially nil, with the exception of Proj4Leaflet. Working on the front-end only, that of course doesn't help me produce map tiles, and the support for alternative projections in that domain seems to be even slimmer. For example, I tried to create tiles in QGIS with a custom projection set in my map display and it managed to convert everything to Spherical Mercator automatically for the output - no projection options at all.

I'm beginning to wonder if the easiest solution isn't just to define an Oblique Mercator projection suited to my particular region, and then just try to shoehorn it into the framework used to display standard Web Mercator maps.

Is there any better, easier, less hacky way of doing this? Are there any web-mapping frameworks out there that support a reasonable set of alternative projections?

  • Vector or raster data? Vector or raster rendering? Static or dynamic backend? Have you looked at OpenLayers? – bugmenot123 Aug 17 at 18:16
  • What other data are you using? Is a fancy projection really necessary or would maybe using CRS.simple and pixel coordinates be fine for your usecase? – Merion Aug 17 at 21:51
  • 1
    GeoServer would have no problem serving your maps in a custom projection, I'm pretty sure that OpenLayers can handle projections using proj4js so that should be fine too – Ian Turton Aug 18 at 7:45

Answering my own question after a bit more research:

It looks like both OpenLayers and D3 have solid support for projections out of the box, while other libraries like Leaflet can support projections with external libraries or plugins (e.g. proj4leaflet or proj4js). OpenLayers of course is designed to be an interactive web-map, while D3 can essentially be used to construct one by adding interactions for drag+drop and zoom to a graphic which would otherwise be static by default.

Creating pre-projected tiles is still an issue as far as I can see, though OpenLayers has a demo showing dynamic reprojection of standard raster tiles.

I think my best strategy here is going to be to try to do this entirely as a vector map, eliminating the need for pre-rendered tiles. Given that all the presentation will be set in the browser, I'm going to go with D3 since the styling can be done with plain SVG + CSS, which is more familiar to me. OpenLayers provides a style class which seems a bit more limited, and I couldn't easily find any great examples of styled vector maps that didn't lean heavily on pre-rendered tiles. I also really like that d3-geo automatically treats lines as geodesics and interpolates as necessary to produce smooth curves under arbitrary projections.

That was actually one of the major problems I found with Leaflet - that projections could work for points, but that lines between coordinates would be treated as straight within the projected space, leading to some strange results.

Thanks to everyone for the suggestions!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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