Maps, OpenstreetMap issues, Angular 7+, TypeScript 3+

[Laurens Albers]

Hi,

I have a mat-tabgroup(angular material) containing a mapping component:

 

///MAT-TABGROUP contains:

<mat-tab>

                <ng-template mat-tab-label >

                  Mapping

                  <mat-icon style="margin-left: 10px" (click)="tabHide('Mapping')">close</mat-icon>

                </ng-template>

                <ng-template matTabContent> //LAZY LOADING required, or it wont generate map

                <mapping></mapping>

                </ng-template>

</mat-tab>

 

Within the tab there is a row with a few inputs and below that, is the syncfusion Maps component.

 

1. When the element is being created the sublayer is "off" unless i click somewhere in the Maps component. 2.The map is offcenter and pushed towards the right and  for some reason the user can navigate the map when the mouse is outside the "block" on the left side;

I have added a gif to the zip showing the two issues.

 

On your own website the demo has the same issue when zoomed in https://ej2.syncfusion.com/angular/demos/#/material/maps/osm-with-sublayers

 

Any idea how to fix this?

The zip also contains the .json file of the sublayer, .css, .html and .ts file(slimmed down).

 

greetings,

 

Laurens

Attachment: mapping.component_9b9a1509.zip

[Baby Palanidurai]

Hi Laurens, 

  

Greetings from Syncfusion, 

  

We have analyzed your query. Please find the below response for your queries. 

  

Query  1: When the element is being created the sublayer is "off" unless i click somewhere in the Maps component 

  

We have checked the reported issue from your GIF image. And we have resolved this reported issue at our latest versions of maps component package. Kindly update to the latest versions of linear gauge package. Once you upgrade to our current version, the issue will get resolved. For your reference, please find the below sample link, 

https://stackblitz.com/edit/angular-3jqnay?file=app.component.ts 

If you are already using the latest versions, kindly revert us with provide your sample with replication steps or modify the above sample which will be helpful in further more analysis and provide you the solution sooner. 

  

Query 2: The map is offcenter and pushed towards the right and  for some reason the user can navigate the map when the mouse is outside the "block" on the left side; 

  

We have checked the reported scenario from your GIF image. When the mouse wheel zooming on the left or right side when the mouse is outside of the block, we have focused the mouse position as the center position. So that’s why when zooming the outside the block,  maps started to zoom from the mouse position and that’s the reason maps pushed towards the right when mouse wheel on the left side. This is the actual behavior. And you can set center position by using the centerPosition property in maps. When zooming the maps by using zooming toolbars, maps started to zoom on center positions which we have set manually in the sample level.  

  

For your reference, we have attached the GIF image here. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture_43201962125P-1324022538 

  

  

Regards, 

Baby. 

[Laurens Albers]

Query  1: When the element is being created the sublayer is "off" unless i click somewhere in the Maps component 

  

We have checked the reported issue from your GIF image. And we have resolved this reported issue at our latest versions of maps component package. 

Im already updated to the latest   "@syncfusion/ej2-angular-maps": "^17.1.39". 

No, it is not fixed. Even in your stackblitz the bug is there when zoomed->  update the following property in your original stackblitz

public zoomSettings: object = { enable: true, zoomFactor: 4 };  

Upon initialization using your africa.ts, the sublayer is "offcenter", but because it's a bigger shape its harder to see, but when you move the map 1 pixel or zoom the sublayer readjust itself correctly. 

So with a smaller shape the bug is even more clear, i have replaced the sublayer with my own so you can test/see it for yourself in my situation.

https://stackblitz.com/edit/angular-3jqnay-gpe4zd?file=app.component.ts

  

Query 2: The map is offcenter and pushed towards the right and  for some reason the user can navigate the map when the mouse is outside the "block" on the left side; 

Thank you for your original update, but thats not what i meant. There is a whitespace left of the mapcomponent, you have the same issue in your demo(see zip -> syncdemo.png & bug.gif, that white area should also be filled with the mapcomponent.

But it is a "empty area"( see zip -> rightpositionSync & rightpositionUser) where( as a result) the user can navigate the map with(something you dont want), and the map is slightly pushed towards the right instead of "centered". Those two images shows where the right location should be(based on chrome inspector).

  

  

Attachment: bug_3d25f5be.zip

[Baby Palanidurai]

Hi Laurens, 

Thanks for your update.  

We have checked the sample which you have modified to replicate the issue. We are able to reproduce the reported issue when the element is being created the sublayer is off unless we click the somewhere in the maps component. And also, we can reproduce the The map is off-center and pushed towards the right and for some reason, the user can navigate the map when the mouse is outside the "block" on the left side issue. So, we have logged a defect report. You can keep track of the bug from the feedback portal below.   

  

Link: https://www.syncfusion.com/feedback/5591/ 

The fix will be available in our upcoming weekly patch release 2019 which is expected to be rolled out on 16^th  April 2019 and we will include this fix in the volume 1 service pack 1 release 2019.  If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.   

Regards, 

Baby. 

[Baby Palanidurai]

Hi Laurens,

Thanks for your patience.

We are glad to announce that our v17.1.41 patch release is rolled out and is available for download under the following link.

Npm Packages: https://www.npmjs.com/~syncfusionorg 

Now maps sublayer is positioned properly while zooming . 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.

Sample link: https://stackblitz.com/edit/angular-3jqnay-w2rb1j?file=app.component.ts 

Thanks,
Baby 

[Laurens Albers]

Hi,

Thanks! The fix worked and now everything aligns correctly.

I have another issue.

1. I want inputs above the maps component, but this does not seem to work. The div containing the maps component overlaps the div with inputs above it.

I have added a stackblitz to make it easier for you to understand/edit https://stackblitz.com/edit/angular-3jqnay-dg5hx5?file=app.component.html

In reverse it works fine(map top, inputs below), but i would rather not use it that way. Horizontally is an good alternative/option (80% map, 20% inputs stacked vertically), so i tried using the demo from https://ej2.syncfusion.com/angular/demos/#/material/maps/labels , but this does not seem to work when editing the stackblitz. The inputs are below the map.

greetings,

Laurens

[Baby Palanidurai]

Hi Laurens,  

 

   We have checked the reported issue at our end. We are able to reproduce the reported issue. So, we have considered this as a bug. The fix will be available in our next weekly patch release 2019 which is expected to be rolled out on 30th April 2019.  We will let you know once our release is rolled out. We appreciate your patience until then. 

 

Regards,  

Baby. 

[Baby Palanidurai]

Hi Laurens,   

   

We are glad to announce that our v17.1.43 patch release is rolled out, we have added the fix the reported issue and is available for download under the following link.   

    

Npm Packages: https://www.npmjs.com/~syncfusionorg   

    

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,   

Baby. 

[Laurens Albers]

Hi, 

Thanks for your update!

But the fix has introduced another bug, this one wasn't there before. This time the content of the mapping component is misaligned see(zip file), which i will explain for context.

issue.gif

In my version the map component is contained within a mat-tab-group > mat-tab > ng-template with matTabContent(lazy loading, necessary). The map is greatly misaligned when updating to the recent patch. The gif shows that the element(including layer etc) has been pushed for some reason, checked using the inspector.

issue stackblitz.gif:

recreating the tab in stackblitz shows the bug but with a smaller  but decent misalignment

I also have added the stackblitz for your convenience/reviewing.

https://stackblitz.com/edit/angular-3jqnay-yy9d84?file=app.component.html

greetings,

Laurens Albers

Attachment: issues_42ff85c.zip

[Baby Palanidurai]

Hi Laurens, 

 

 

Thanks for your update.  

 

We have checked your sample and gif image. We are not aware of your exact scenario and we have noticed your gif image. In that, you have removed the map tile parent element left and top from the DOM by using inspector. Kindly provide the clear details about your scenario and which will be helpful in furthermore analysis and we can provide the better solution.  

 

Regards, 

Baby. 

[Laurens Albers]

The gifs show where the maps component should be, but isnt. The stackblitz visually shows that the zoom function is above the map. The map has been pushed down and towards the right, based upon checking google chrome inspector, but why? That's shy the scrollbars appear aswell, because if the misalignment.

This apparently happens when the component is within a angular material mat-tab. the send gif animation just shows where it "should be".

The stackblitz also shows my personal scenario, where the maps component is within a mat-tabgroup using ng-template with mattabcontent for lazy loading. In my own project the gaps are even bigger with the exact same code(also gif).

greetings,

Laurens

[Baby Palanidurai]

Hi Laurens, 

Sorry for the inconvenience caused. 

 

We have understood your scenario and able to reproduce the reported issue at our end.  So, we have logged a bug report ‘Zooming toolbar and sublayer got misaligned in OSM maps’. 

 

You can keep track of the bug from the feedback portal below, 

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

 

The fix will be available in our volume 2 main release which is expected to be rolled out at the end of June 2019. And we can also provide the patch on 14^th May 2019. If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal.     

 

Regards,  

Baby.  

[Baby Palanidurai]

Hi Laurens, 

Thanks for your patience, 

We have fixed the reported issue Zooming toolbar and sublayer got misaligned in OSM maps and we have generated the custom patch for this fix. Kindly find the below custom patch link, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-maps-267858851 

Download the above package and replace it with your ej2-maps package. We will include this fix our volume 2 main release 2019 which is expected to be rolled out on end of June 2019. 

Regards, 

Baby. 

[Baby Palanidurai]

Hi Laurens, 

 

We are glad to announce that our Essential Studio Volume 1 service pack, 2019 release (v17.1.0.47) is rolled out and we have included the fix for Zooming toolbar and sublayer got misaligned in OSM maps and is available for download under the following link. 

 

https://www.syncfusion.com/forums/144607/essential-studio-2019-volume-1-service-pack-release-v17-1-0-47-available-for-download 

 

Sample link: https://stackblitz.com/edit/angular-3jqnay-ra8lbd?file=package.json 

 

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, 

Baby. 

[Laurens Albers]

Hi,

1. the bug still appears when the width gets resized to a certain lowered amount. 

You can replicate this using your own submitted stackblitz:

https://stackblitz.com/edit/angular-3jqnay-ra8lbd?file=app.component.ts

Using a (current situation)1080p monitor, try resizing to about 50% and the bug appears, the map gets pushed a couple of cm's down except for the zoom toolbar.

2. Another situation is that i am using the maps component within your (syncfusion's) dashboardlayout. The situation is probably linked to current bug since the map is smaller than a certain width and as a result is being pushed down and "pushed a bit to the right"(see added zip image)

I have drawn red marks where the map should be centered and is simply not happening, Other components like your own accumulationcharts & charts fit fine.

  <ejs-dashboardlayout max id='dashboardLayout' #dashLayout [cellSpacing]='cellSpacing'

                           [columns]="6"

                           [cellAspectRatio]='aspectRatio'

                          >          <e-panel [sizeX]="2" [sizeY]="4" [row]="0" [col]="0">

            <ng-template #header>

              <div>{{chart2}}</div>

            </ng-template>

            <ng-template #content>

              <ejs-maps id='map1' style="display:block;" width="100%" height="100%" [centerPosition]='centerPosition'

                        [zoomSettings]='zoomSettings'

                        [layers]='layer' [legendSettings]="maplegendSettings">

              </ejs-maps>

            </ng-template>

          </e-panel> ..etc

global.css(edited)

#map1 {

  width: 100%;

  height: calc(100% - 10px);

}

#dashboardLayout.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-header {

  padding: 10px;

  border-bottom: 2px solid #e6e9ed !important;

  height: 35px;

  margin: 0 15px 0 15px;

}

package.json

    "@angular/core": "^7.2.1",

    "typescript": "~3.1.6"

   "@syncfusion/ej2-angular-maps": "^17.1.47",

    "@syncfusion/ej2-angular-layouts": "^17.1.48",

    "@syncfusion/ej2-angular-charts": "^17.1.49",

Attachment: dashimage_55107f83.zip

[Laurens Albers]

Hi Laurens, 

 

We are glad to announce that our Essential Studio Volume 1 service pack, 2019 release (v17.1.0.47) is rolled out and we have included the fix for Zooming toolbar and sublayer got misaligned in OSM maps and is available for download under the following link. 

 

https://www.syncfusion.com/forums/144607/essential-studio-2019-volume-1-service-pack-release-v17-1-0-47-available-for-download 

 

Sample link: https://stackblitz.com/edit/angular-3jqnay-ra8lbd?file=package.json 

 

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, 

Baby. 

Kinda confused with your responses of 14th & 15th of may

On May 14th the fix is going to be added in service pack 2(late june) and on the 15th it is added in service pack 1(17.1.47), that day?

greetings,

Laurens

[Arun Raji]

Hi Laurens, 

Yes, the fix is included in our volume 1 service pack 1 on May 15^th 2019.  

Also we would like to let you know that, from the May 14^th update, we have provided you the custom patch and informed that the fix will be included for volume 2 main release. Since the issue has been resolved earlier, we have included the fix in our volume 1 service pack 1(v17.1.47) itself which is rolled out on May 15^th 2019 which we have stated in our May 15^th update. 

Kindly ensure the reported issue with v17.1.47 and revert us if you have further concerns. 

 

Regards, 

Arun 

[Laurens Albers]

Hi Laurens, 

Yes, the fix is included in our volume 1 service pack 1 on May 15^th 2019.  

Also we would like to let you know that, from the May 14^th update, we have provided you the custom patch and informed that the fix will be included for volume 2 main release. Since the issue has been resolved earlier, we have included the fix in our volume 1 service pack 1(v17.1.47) itself which is rolled out on May 15^th 2019 which we have stated in our May 15^th update. 

Kindly ensure the reported issue with v17.1.47 and revert us if you have further concerns. 

 

Regards, 

Arun 

In the post of june 6th, you can see in the sample code that i have provided, is that the package.json segment has been updated to 17.1.47 as well as the stackblitz where the bug is still visible.

greetings,

Laurens

[Baby Palanidurai]

Hi Laurens, 

Sorry for the inconvenience caused, 

Please find the below response your queries. 

Query 1: the bug still appears when the width gets resized to a certain lowered amount.  

We are able to reproduce the reported issue with stackbliz sample at our end. we have logged a bug report Unwanted highlight fill color was applied to the shape of the map when the shapes were hovered, and this fix will included in our volume 2 main release which is expected to be rolled out at end of June 2019. You can keep track of the bug from the feedback portal below.  

  

Feedback Portal – https://www.syncfusion.com/feedback/6810/  

If the above is not your case, kindly revert us with modify the above sample or provide your sample with replication steps which will be helpful in furthermore analysis and provide you the solution sooner.   

Query 2:  Another situation is that i am using the maps component within your (syncfusion's) dashboardlayout. The situation is probably linked to current bug since the map is smaller than a certain width and as a result is being pushed down and "pushed a bit to the right" 

We are checking this scenario and we will update you status within one business day (11^th June, 2019). We appreciate your patience until then. 

Regards, 

Baby. 

[Baby Palanidurai]

Hi Laurens, 

Thanks for your patience. 

Please find the below response for query 2. 

We have prepared a sample based on your code snippet. Unfortunately the reported issue not replicated at our end.  

Sample used for testing: https://stackblitz.com/edit/angular-1eqcr8-tfevzj?file=app.component.html 

Still we are not aware of your exact scenario which is replicate the issue. Kindly revert us with modify the above sample or provide your replicated sample with replication steps which will be helpful in furthermore analysis and provide you the solution sooner. 

Regards, 

Baby.