We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143717 Apr 2,2019 09:18 AM UTC Jun 11,2019 09:44 AM UTC Angular - EJ 2 19
loading
Tags: Maps
Laurens Albers
Asked On April 2, 2019 09:18 AM UTC

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 [Syncfusion]
Replied On April 3, 2019 01:38 PM UTC

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, 
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. 
  
  
Regards, 
Baby. 


Laurens Albers
Replied On April 4, 2019 09:07 AM UTC

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.

  
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 [Syncfusion]
Replied On April 4, 2019 10:40 AM UTC

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.   
  

The fix will be available in our upcoming weekly patch release 2019 which is expected to be rolled out on 16th  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 [Syncfusion]
Replied On April 17, 2019 05:19 AM UTC

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
Replied On April 17, 2019 09:14 AM UTC

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 [Syncfusion]
Replied On April 17, 2019 01:32 PM UTC

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 [Syncfusion]
Replied On May 2, 2019 06:14 AM UTC

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.   
    
    
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
Replied On May 2, 2019 02:14 PM UTC

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.

greetings,

Laurens Albers

Attachment: issues_42ff85c.zip

Baby Palanidurai [Syncfusion]
Replied On May 3, 2019 04:13 PM UTC

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
Replied On May 6, 2019 07:15 AM UTC

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 [Syncfusion]
Replied On May 7, 2019 10:05 AM UTC

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, 
 
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 14th 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 [Syncfusion]
Replied On May 14, 2019 05:40 PM UTC

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, 

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 [Syncfusion]
Replied On May 15, 2019 12:18 PM UTC

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. 
 
 
 
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
Replied On June 6, 2019 09:50 AM UTC

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:

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
Replied On June 6, 2019 10:12 AM UTC

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. 
 
 
 
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 [Syncfusion]
Replied On June 7, 2019 07:17 AM UTC

Hi Laurens, 

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

Also we would like to let you know that, from the May 14th 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 15th 2019 which we have stated in our May 15th update. 

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


Laurens Albers
Replied On June 7, 2019 07:26 AM UTC

Hi Laurens, 

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

Also we would like to let you know that, from the May 14th 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 15th 2019 which we have stated in our May 15th 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 [Syncfusion]
Replied On June 10, 2019 12:53 PM UTC

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.  
  
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 (11th June, 2019). We appreciate your patience until then. 


Regards, 
Baby. 


Baby Palanidurai [Syncfusion]
Replied On June 11, 2019 09:44 AM UTC

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.  


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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon