Skip to content

Overlay that lets you display an image on top of the map, transform it using three anchors, and customise the opacity of the image using the toolbox provided.

License

Notifications You must be signed in to change notification settings

fedealconada/Leaflet.AffineImage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Leaflet.AffineImage

This is an overlay for leaflet[1] that lets you display an image on top of the map, transform it using three anchors, and customise the opacity of the image using the toolbox provided.

This code is inspired & portions taken from:
- John P. Kiffmeyer
- Stanislav Sumbera

This mainly takes the ideas of Stanislav Sumbera in terms of sekeleton and implementing an L.Class and uses the main methods of John P. Kiffmeyer to create resizers (anchors) and render the image.

[1] http://leaflet.cloudmade.com/

Screencapture GIF

var image = new Image();

image.onload = function() {

    L.affineImage().params({image:image,boundingScale:0.5}).addTo(map);
    
    //Adding marker
    L.marker([-34.6,-58.383],{draggable: true}).addTo(map);

};

image.src = "./img/buildingLayer.png";

Look at index.html for a usage example.

LEGAL

[email protected] wrote this file. As long as you retain this notice you can do whatever you want with this stuff.

About

Overlay that lets you display an image on top of the map, transform it using three anchors, and customise the opacity of the image using the toolbox provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published