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
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.