Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Aniket Balkhande
15
How to create circular non-proportional zones on IgxGeographicMapComponent.
posted

Hi Team,

Is there any way to create circular non-proportional zones on IgxGeographicMapComponent? So, that after zooming in/out on the map, the zone radius should not change. 

I tried creating circular zones using IgxGeographicProportionalSymbolSeriesComponent. [Attaching code and screenshots]

Link: - Map | Data Visualization Tools | Scatter Proportional Series | Data Binding | Infragistics

But, after zooming in/out on the map, the circle is changing proportionally. As you can see in image 1 and 2. 

Kindly, suggest any alternative approach.

CODE:

HTML: 

<igx-geographic-map #map width="100%" height="100%" zoomable="true" > </igx-geographic-map>

DATA:

  floodZoneLocation = [{
    cap: false,
    pop: 5,
    lat: 64.5206680297852,
    lon: 40.6461601257324,
    country: 'Russia',
    name: 'Arkhangelsk'
  }]
TYPESCRIPT METHOD:
loadFloodZone () {
    const symbolSeriesFloodZone = new IgxGeographicProportionalSymbolSeriesComponent();
    symbolSeriesFloodZone.dataSource = this.floodZoneLocation;
    symbolSeriesFloodZone.markerType = MarkerType.Circle;
    symbolSeriesFloodZone.radiusScale = this.sizeScale();
    symbolSeriesFloodZone.fillScale = this.brushScale();
    symbolSeriesFloodZone.fillMemberPath = 'pop';
    symbolSeriesFloodZone.radiusMemberPath = 'pop';
    symbolSeriesFloodZone.latitudeMemberPath = 'lat';
    symbolSeriesFloodZone.longitudeMemberPath = 'lon';
    symbolSeriesFloodZone.markerOutline = 'SkyBlue';
    symbolSeriesFloodZone.markerThickness = 11;
    symbolSeriesFloodZone.markerBrush = 'SkyBlue';
    symbolSeriesFloodZone.tooltipTemplate = this.floodTooltip;
    this.map.series.add(symbolSeriesFloodZone);
  }

  brushScale (): IgxValueBrushScaleComponent {
    const brushScale = new IgxValueBrushScaleComponent();
    const brushes = [
      'rgba(47, 180, 212, 0.42)'
    ];
    brushScale.brushes = brushes;
    brushScale.minimumValue = 0;
    brushScale.maximumValue = 1000;

    return brushScale;
  }

  sizeScale (): IgxSizeScaleComponent {
    const sizeScale = new IgxSizeScaleComponent();
    sizeScale.minimumValue = 0;
    sizeScale.maximumValue = 1000;

    return sizeScale
  }
SCREENSHOTS:

Image 1: Default loaded image. 

Image 2: Little zoomed in image.