[ ] Tell us what version of Leaflet, Angular, and ngx-leaflet you're using
"@asymmetrik/ngx-leaflet": "^13.0.2"
"@ionic/angular": "^6.0.0",
"@angular/core": "~13.2.2",
[ ] Include code that reproduces your issue
public onClick(){ console.log('clicked'); const symbolDiv = document.createElement('app-officer-svg') as NgElement & WithProperties<{symbol: Symbology}>; symbolDiv.symbol = this.officer; const divIcon = L.divIcon({ html:symbolDiv, className: 'my-div-icon', iconSize: [30, 30], iconAnchor: [15, 0], }); this.layers.push(L.marker([ 47.879966, -121.726909], { icon: divIcon })); }
Explanation:
I'm trying to use a custom angular svg component you can find the one i'm using here: SVG - StackBlitz Editor
This is a dynamic component with an @Input() that make changes to its state.
Due to the amount of options I have to represent there's a bit of extra code, therefore I would recommend to replace with a blank SVG component with an @Input() toggle maybe a boolean which change [attr.display]='toggle' in the .SVG.
Once the SVG Component and the map instance are ready the next step is to convert the angular Component into an NgElement which extends HTMLElement.
By using this, we are creating an instance of the SVG component with the @Input()property which in this case is called symbol:
const symbolDiv = document.createElement('app-officer-svg') as NgElement & WithProperties<{symbol: Symbology}>; symbolDiv.symbol = this.officer;
Then finally we should be ready to display it in the map by adding a marker with our custom L.divIcon:
const divIcon = L.divIcon({ html:symbolDiv, className: 'my-div-icon', iconSize: [30, 30], iconAnchor: [15, 0], }); this.layers.push(L.marker([ 47.879966, -121.726909], { icon: divIcon }));
Doing this, the marker is attached to the map, but the custom component is in 0x0 (WxH), on the other hand, the Icon wrapper size is correct (30x30). If I try to change the size by hand in the browser nothing changes.
Is this possible to accomplish? Any progress on that would be so helpful, 1 dynamic svg can avoid having 50 .png files under assets folder!
public onClick(){ console.log('clicked'); const symbolDiv = document.createElement('app-officer-svg') as NgElement & WithProperties<{symbol: Symbology}>; symbolDiv.symbol = this.officer; const divIcon = L.divIcon({ html:symbolDiv, className: 'my-div-icon', iconSize: [30, 30], iconAnchor: [15, 0], }); this.layers.push(L.marker([ 47.879966, -121.726909], { icon: divIcon })); }Explanation:
I'm trying to use a custom angular svg component you can find the one i'm using here: SVG - StackBlitz Editor
This is a dynamic component with an
@Input()that make changes to its state. Due to the amount of options I have to represent there's a bit of extra code, therefore I would recommend to replace with a blank SVG component with an@Input() togglemaybe a boolean which change [attr.display]='toggle' in the .SVG.Once the SVG Component and the map instance are ready the next step is to convert the angular Component into an
NgElementwhich extendsHTMLElement.By using this, we are creating an instance of the SVG component with the
@Input()property which in this case is called symbol:const symbolDiv = document.createElement('app-officer-svg') as NgElement & WithProperties<{symbol: Symbology}>; symbolDiv.symbol = this.officer;Then finally we should be ready to display it in the map by adding a marker with our custom L.divIcon:
const divIcon = L.divIcon({ html:symbolDiv, className: 'my-div-icon', iconSize: [30, 30], iconAnchor: [15, 0], }); this.layers.push(L.marker([ 47.879966, -121.726909], { icon: divIcon }));Doing this, the marker is attached to the map, but the custom component is in 0x0 (WxH), on the other hand, the Icon wrapper size is correct (30x30). If I try to change the size by hand in the browser nothing changes.Is this possible to accomplish? Any progress on that would be so helpful, 1 dynamic svg can avoid having 50 .png files under assets folder!