Viewport coordinates in Maps component

[Matthieu]

hi, 

In the maps component, how can I get the viewport bounds coordinates?

Thanks,

Regards,

Matt

[Matthieu]

Hi,

I succeeded to find a solution with the use of 

'pointToLatLong' and 'availableSize' method and property of map component:

  private getMapBounds(): MapBounds {

    return new MapBounds(this.map.pointToLatLong(0, this.map.availableSize.height) as MapCoordinates, this.map.pointToLatLong(this.map.availableSize.width, 0) as MapCoordinates);

  }

Is this the good way of doing things?

Thanks,

Regards,

Matt

[Swetha Babu]

Hi Matthieu,

Thank you for contacting Syncfusion support.

We can use the provided code to find the viewport co-ordinates in the Maps control. But the arrangement of the values in your code is not in correct format. If we need to get the viewport co-ordinates in the left of the control, we must use the first point as (0, 0) as we are rendering the map from the left side and the extreme right side of the viewport co-ordinate will be the height and width of the Maps. Please find the modified code snippet below. 

public getMapBounds() { 

        return [this.maps.pointToLatLong(0, 0), this.maps.pointToLatLong(this.maps.availableSize.height, this.maps.availableSize.width)]; 

    } 

  

Please let us now if the above solution meets your requirement. If not, please let us know your requirement in detail. It will be helpful for us to analyze further and assist you better. 

Please let us know if you need any further assistance.

Regards,
Swetha Babu  

[Matthieu]

Thanks for your response.

I needed the map bounds as minLat, minLong, maxLat, maxLong, reason why I arranged the values in this order.

Now I'm facing another issue: I struggle to add markers dynamically to my layer. The markers are indeed displayed but are not binded to the underlying map and so don't move when the map is panning. And I didn't succeed also to hidden them (using visible property on markerSettings object is not working)

Here is how I add them:

    const customMarkerSettings = new MarkerSettings(this.map.layers[0], "markerSettings", this.mapService.getMarkerGroupConfig("user", false));

    const customMarker = { longitude: 6.395789907842442, latitude: 45.306779500000005, title: "Utilisateur" };

    customMarkerSettings.dataSource = [customMarker];

    customMarkerSettings.visible = true;

    this.map.layers[0].markerSettings.push(customMarkerSettings);

And this is my layer config:

  public mapLayers: any[] = [

    {

      layerType: "OSM",

      animationDuration: 0,

      visible: true,

      markerSettings: [],

    }

  ];

I will try to make a Stackblitz example.

Regards,

Matt

[Indumathi Ravi]

Hi Matthieu, 

  

We have analyzed your queries and please find our responses below. 

  

Query1: I needed the map bounds as minLat, minLong, maxLat, maxLong, reason why I arranged the values in this order. 

  

The latitude and longitude values in "pointone" and "pointtwo" are obtained using the code snippet below. Finally, we arranged the values as you suggested. 

  

public GetMapBounds() { 

        let pointone: GeoPosition = this.maps.pointToLatLong(0, 0); 

        let pointtwo: GeoPosition = this.maps.pointToLatLong(this.maps.availableSize.height, this.maps.availableSize.width); 

        let mapBounds: object = { 

            minLat: Math.min(pointone.latitude, pointtwo.latitude), 

            minLong: Math.min(pointone.longitude, pointtwo.longitude), 

            maxLat: Math.max(pointtwo.latitude, pointone.latitude), 

            maxLong: Math.max(pointtwo.longitude, pointone.longitude) 

        }; 

        return mapBounds; 

 } 

  

Query2: I struggle to add markers dynamically to my layer. The markers are indeed displayed but are not binded to the underlying map and so don't move when the map is panning. And I didn't succeed also to hidden them (using visible property on markerSettings object is not working) 

  

We have created a sample for your reference, which can be found at the link below. 

https://stackblitz.com/edit/angular-wkintn-rntjxv?file=app.component.ts 

Please let us know if the sample above meets your requirements. If we have misunderstood your question, please provide more information and we will assist you further. 

 

Regards, 

Indumathi R 

[Matthieu]

Hello,

Thanks a lot, with your help, I managed to make it works.

I'm facing a last issue: 

my markers is displayed as picture with the help of the properties shape='Image' and imageUrlValuePath: 'pict' (pict is a property of my marker object). Alas the marker is not rendered at all (nothing in the map, not even a broken picture).

I've managed to track down the problem to this line of code in the markerShapeChoose function in ej2-maps.es2015.js:

const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath) && !isNullOrUndefined(data[eventArgs.imageUrlValuePath])) ?

        getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : eventArgs.imageUrl;

        eventArgs.imageUrl = shapeImage;

Changing this line to:

const shapeImage = (!isNullOrUndefined(eventArgs.imageUrlValuePath) && !isNullOrUndefined(data[eventArgs.imageUrlValuePath])) ?

        ((eventArgs.imageUrlValuePath.indexOf('.') > -1) ? getValueFromObject(data, eventArgs.imageUrlValuePath).toString() : data[eventArgs.imageUrlValuePath]) : eventArgs.imageUrl;

        eventArgs.imageUrl = shapeImage;

And voila! my markers are displayed. Should I fill a bug report for this?

 

[Indumathi Ravi]

Hi Matthieu, 

Thank you for contacting Syncfusion Support. 

  

We are able to reproduce the reported scenario in the Maps control. We will analyze this and update you with further details on November 26, 2021. 

Regards,
Indumathi R 

[Indumathi Ravi]

Hi Matthieu, 

 

We have confirmed the reported issue as a defect and logged a defect report for the same. However, we will include the fix for the reported issue in our weekly patch release which is expected to be available by the second week of December 2021. Please find the below feedback link to keep track of the reported issue. 

  

https://www.syncfusion.com/feedback/30732/ 

 

Regards, 

Indumathi R 

[Indumathi Ravi]

Hi Matthieu, 

  

Sorry for the inconvenience. 

  

We have fixed the reported issue internally. Due to a technical issue, we are unable to include the fix in our weekly patch release. However, the fix will be available in our 2021 Volume 4 Release, which is expected to be available by the end of December 2021.  

  

Regards,
Indumathi R. 

[Indumathi Ravi]

Hi Matthieu, 

  

We have fixed the reported issue and it is included in our Essential Studio 2021 Volume 4 release v19.4.0.38 which is rolled out and is available for download under the following link. 

 

Essential Studio 2021 Volume 4 Main Release v19.4.0.38 is available for download | Announcements Forums | Syncfusion 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

  

Regards, 

Indumathi R