tombatossals / angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library
http://tombatossals.github.io/angular-leaflet-directive
MIT License
1.5k stars 635 forks source link

Marker icon base64 string and real marker-icon.PNG conflict #1160

Open sashberd opened 7 years ago

sashberd commented 7 years ago

I have some strange issue with default marker image. My markers are not rendered on map with default marker icon. The source of icon image tag looks like: http://localhost:60000/js/grunt/dist/images/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAGmklEQVRYw7VXeUyTZxjvNnfELFuyIzOaberm.......... My queion was why base 64 string needs physical path, after small investigation I found that there is some ambiguous behavior in leaflet that combines path with base 64 string(see attached PS) Am I doing something wrong or there is real problem with markers default images in current version? untitled

alcalin commented 6 years ago

It can be seen here that the source code tries to modify the image for the default icon in leaflet in a way different from the one recommended by leaflet docs here.

Nevertheless, a solution is to explicitly add the default icon's image as a custom icon when you define the markers for the directive. (Until it is fixed in the directive)

var base64icon = "data:image/png;base64,iVBO...ggg=="; var icondata = { iconUrl: base64icon, iconAnchor: [19, 19], };

       ` this.scope.markers = {
            myMarker: {
                lat: locationLat,
                lng: locationLon,
                draggable: false,
        icon: icondata
            }
        };`