javascript - Leaflet js adding custom marker pic fails -
i trying add custom marker picture keeps giving me standard blue marker. here's custom marker definition:
var amarker = { lat:location.lat, lng:location.lng, message: location.name, // focus: true, draggable: false, getmessagescope: function() { return $scope; }, message: '<button class="icon-left ion-information-circled" ng-click=""></button> '+location.name, compilemessage: true, 'icon': { 'type': "awesomemarker", // use awesomemarker font awesome 'icon': spotmarkericon, // variable icon } }; var spotmarkericon = l.icon({ iconurl: './images/spotmarker.png' }); angular.extend($scope,{ defaults: { tilelayer: 'http://server.arcgisonline.com/arcgis/rest/services/ocean_basemap/mapserver/tile/{z}/{y}/{x}', maxzoom: 16, zoomcontrolposition: 'topright', path: { weight: 10, color: '#800000', opacity: 1 } } }); angular.extend($scope,{ markers : new array() }); $scope.markers.push(amarker);
have tried define dimensions of icon this:
var greenicon = l.icon({ iconurl: 'leaf-green.png', shadowurl: 'leaf-shadow.png', iconsize: [38, 95], // size of icon shadowsize: [50, 64], // size of shadow iconanchor: [22, 94], // point of icon correspond marker's location shadowanchor: [4, 62], // same shadow popupanchor: [-3, -76] // point popup should open relative iconanchor });
edit: here working example: http://jsfiddle.net/belxbfep/
Comments
Post a Comment