Your piece of code seems to be good in theory. As I used arcGIS/Leaflet in exactly the same way.
But the problem could come from missing spatial reference (or maybe incorrect format (image/png or image/jpeg).
For the spatial reference, here is how Leaflet works :
- Leaflet expects default spatial reference : EPSG:3857 / WGS84
- But you can change it by an other one with JS plugin like Proj4leaflet by Kartena.
It's really easy and helpful. Works like this (for EPSG:3006) :
You define your new crs
// SWEREF99 TM (EPSG:3006) with map's pixel origin at SWEREF99 TM coordinate (0, 0)
var crs = new L.Proj.CRS('EPSG:3006',
'+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
{
resolutions: [
8192, 4096, 2048, 1024, 512, 256, 128
],
origin: [0, 0]
})
And include it in your map :
var map = new L.Map('map', {
crs: crs
});
You can find Spatial References here.
I think you are mixing up a couple of things.
When you install Geoserver, it comes with a lite distribution of OpenLayers. That is used to preview the data once you publish some. But this functionality is only suitable for previewing, and not as a production front-end.
If you want a Production quality front end, you need to develop that yourself. You can use any client which supports Geoserver's OGC Services( i.e. WMS, WFS etc).
Many people use OpenLayers as a JavaScript Library for this, or you could also use Leaflet.
There are many examples on this site which talk about doing so, for example: Combine Leaflet with Geoserver WMS map
If your Geoserver or data cannot be projected in Web Mercator, then you can us a Leaflet plugin called Proj4Leaflet, which can display a Map in projections other than Web Mercator. See this example.
Best Answer
Peter Liu at Mapbox wrote a tutorial about tilting a Leaflet map with CSS transformations, but found it resulted in awkward interaction and degraded image quality. Here's a little map I made trying to build on Peter's tutorial.
If you're open to other options, Mapbox GL JS might be better suited for a tilted map. It contains methods for setting both pitch and bearing. They even have an example using WMS.