roblabs
commented
1 month ago Leaflet method to display image files without Geographic coordinates
A solution for those using Leaflet. Set bounds based on an image dimensions, and use L.CRS.Simple.
Features
-
[✅] Uses Simple CRS
-
[✅] No need to tile cut. Simply URL link image resource & compute Bounds
-
[✅] Supports JPEG, PNG
-
[ ] Requires code to compute Width × Height, e.g, 3300 × 2550 for an 8½ × 11 map.
-
[ ] Alternatively use a JSON data file similar to
ImageProperties.xml -
[ ] Each map will need need a proper zoom set (e.g., set to a known first feature that you would want the customer to see)
- Map demo: Use Leaflet L.imageOverlay
- Map demo: Zoom to Pacific Beach 92109
-
[❌] Entire image is downloaded to browser memory; a slight disadvantage compared tile cutting. Compare for your customer experience if Leaflet imageLayer adds value over tile cutting.
The Tile Cutter for "image pyramids" from Zoomable.ca has zoomify tile support. When cutting tiles for JPEG, the Zoomable tool creates non-square tiles. This typically happens around the edges of the input image. As well, JPEG images do not have a transparency layer.
Using the Zoomify Tile Service
This properly displays the San Diego map that was tile cut by the Zoomable.ca plugin for Photoshop.
Zoomable also has a service that allows you to upload a file
Same Tiles Rendered with Leaflet & MapLibre
These map rendering SDKs expect square tiles usually 256x256 or 512x512 for rendering raster images.
Wish List for Zoomable output
Wish List for Leaflet & MapLibre
Screenshot of rendering in Leaflet
The original map for the Sierra Club of San Diego