質問

I'm using Angular-Leaflet-directive and geojson for my markers and I'm having difficulties adding custom markers. I am able to style line/polygons using the style property but no such luck with adding custom icons

e.g. styling line/polygons

angular.extend($scope, {
    geojson: {
        data: data,
        style: {
            fillColor: "green",
            weight: 2,
            opacity: 1,
            color: 'white',
            dashArray: '3',
            fillOpacity: 0.7
        }
    }
});

e.g. attempting to add custom icons for my markers:

var myIcons = {
    div_icon: {
        type: 'div',
        iconSize: [12, 12],
        html: '<circle cx="10" cy="10" r="8" stroke="black" stroke-width="1" fill="green" />',
        popupAnchor:  [0, 0]
    },
    redPin: {
        iconUrl: 'images/mapPinRed.png',
        iconSize:     [38, 95],
        iconAnchor:   [22, 94]
    }
};
angular.extend($scope, {
  geojson: {
    data:data,
    style: {icon: myIcons.redPin}
  }  
}); 
役に立ちましたか?

解決

It turns out that in angular-leaflet-directive_v0.7.6 there is no "pointToLayer" for the geojson data, added "pointToLayer:geojson.pointToLayer"

eg angular-leaflet-directive

    //...
geojson.options = {
  style: geojson.style,
  onEachFeature: onEachFeature,
  pointToLayer:geojson.pointToLayer
};

It turns out that v0.8 has this feature

e.g. adding the icon

var myIcon = {  iconUrl:'images/mapPinRed.png',
                iconSize:[25, 25],
                iconAnchor:[12, 0]})  
            };
angular.extend($scope, {
  geojson: {
    data:data,
    style:
        function (feature) {return {};},
        pointToLayer: function(feature, latlng) {
            return new L.marker(latlng, {icon: L.icon(myIcon);
        },
        onEachFeature: function (feature, layer) {
            layer.bindPopup("number: " +feature.properties.something);
        } 
  } //geojson
});
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top