Marker base64 Image Src is prepended with path to leaflet images

[ctwoolsey]

I have installed the leaflet and ui-leaflet via bower. This is the line in my html: <leaflet id="mapid" lf-center="ctrl.courtOnMap" markers="ctrl.courtMarkers"></leaflet>

When I look in the browser debug console at the source code this is what I find for the source of the marker: <div class="leaflet-pane leaflet-marker-pane"><img tabindex="0" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" style="width: 25px; height: 41px; margin-top: -41px; margin-left: -12px; z-index: 125; transform: translate3d(278px, 125px, 0px);" src="http://localhost:9000/bower_components/leaflet/dist/images/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAGmklEQVRYw7VXeUyTZxjvNnfELFuyIzOabermMZEeQC

I have temporarily fixed this issue by pointing the icon images to the leaflet image name. Starting at line 2092: if (!isDefined(iconData) || !isDefined(iconData.iconUrl)) { return new L.Icon.Default({ iconUrl: "marker-icon.png",//base64icon, shadowUrl: "marker-shadow.png",//base64shadow, iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] }); }

[ctwoolsey]

This issue was caused by using leaflet 1.0.1 I went back and used leaflet 0.7.0

[elesdoar]

Please use leaflet-1.X branch

[morfair]

@ctwoolsey Do u solve this issue?

[ctwoolsey]

@morfair Yes

[AlexeyKorkoza]

How use leaflet-1.X branch?

[ctwoolsey]

@AlexeyKorkoza I'm not sure what your question is. But http://leafletjs.com has lots of documentation and tutorial on how to use leaflet.js. It appears they are now on version 1.0.3.

[morfair]

It issue do not solved.

[morfair]

@ctwoolsey sorry, how?

[ctwoolsey]

@morfair It has been a while since I dealt with this issue and I don't remember all of the details of how I got it working. Here is my relevant code, though:

For the markers & Icon definition: https://github.com/OpenDataSTL/STLCourts-client/blob/develop/app/scripts/controllers/courtSearchInfo.ctrl.js

For the ui-leaflet usage see line#23: https://github.com/OpenDataSTL/STLCourts-client/blob/develop/app/views/courtSearchInfo.html

You can check out the index.html file and bower.json files to see the versioning of leaflet & ui-leaflet. I believe that I ended up using leaflet 1.0.2 and ui-leaflet 3.0 (I downloaded a local copy and referenced it since at the time it was not available via bower.

I hope this helps.

[elesdoar]

@AlexeyKorkoza , @ctwoolsey You can download leaflet-1.X branch or use bower as:

bower install angular-ui/ui-leaflet#leaflet-1.X --save

[gecko-8]

I had this issue as well (ui-leaflet 1.0.3 and leaflet 1.0.3) and manually setting the icon as in @morfair link did the trick.

[elesdoar]

Hi @gecko-8,

You are using ui-leaflet 1.0.3, please use the branch leaflet-1.X, it's 3.0.0 ui-leaflet version.