BoldSign®Effortlessly integrate e-signatures into your app with the BoldSign® API. Create a sandbox account!
Where can I find more info about using google as a map provider? For examples:
1) I try to show satellite layer with
But the browser still shows the same Road Map as in "lyrs=m".
2) Set the map width and height:
But the height won't stick (width is OK). From the "Elements" display in a Chrome browser:
|
Queries |
Details | |
|
I try to show satellite layer. But the browser still shows the same Road Map as in "lyrs=m". |
We are able to reproduce the reported issue when the “layerType” property is set as “Google” and the provided “urlTemplate” is set in the Maps control. However, we have plans to deprecate the “layerType” property and render the online map providers using “urlTemplate” property alone. This implementation will be available in our 2022 Volume 1 release which may be available by March 2022. Please find the feedback link to keep track of this implementation.
Workaround Solution:
For the time being, we can resolve this issue at the application level by setting “layerType” as “OSM” instead of “Google”. Please find the code snippet for the same below.
In your code snippet, we noticed that the URL in the “urlTemplate” property does not contain “tileX”, “tileY” and “level” texts which are essential for rendering of the online map provider. So, please find the correct URL from the above code snippet. | |
|
Set the map width and height as 1000. But the height won't stick (width is OK). |
We are unable to reproduce the reported issue in the Maps control. We are able to set the height and width as “1000px” and the control renders as expected.
Please provide us a sample application reproducing the reported issue. It will be helpful for us to analyze and assist you further. |
Thank you for a quick response. We are able to display the satellite image using your sample code. We could not find any documentation regarding the parameters for the x/y/z. Most Google search results use the {x}/{y}/{z} and that what we used in our attempts.
Regarding the map height problem, we use the render function below. Please see the attached screenshot for how it is rendered on our browser.
render() {
return (
<div style={{width: 1000, height: 1000}}>
<MapsComponent
id='maps'
className='maps'
style={{width: 1000, height: 1000}}
>
<LayersDirective>
<LayerDirective
layerType='OSM'
/>
</LayersDirective>
</MapsComponent>{' '}
</div>
);
}
For the className="maps", we define the class in a .css file as follow:
.maps {
height: 1000px;
width: 1000px;
position: relative;
}
|
Queries |
Details | |
|
We could not find any documentation regarding the parameters for the x/y/z. Most Google search results use the {x}/{y}/{z} and that what we used in our attempts. |
As we updated in our previous update, we need to modify the URL string for the “urlTemplate” property. We used the texts (such as “tileX”, “tileY” and “level”) to maintain a common handling for all map providers. So, we can render any map providers with the similar URL string.
We will update this information in our documentation and will refresh the same by the end of next week. | |
|
Regarding the map height problem, we use the render function below |
When we analyzed the provided code snippet, we came to know that you have used “className” and “style” attributes in the React Maps control which is not supported. We can set the size to the control using “height” and “width” properties. This will render the Maps in desired size. Please find the code snippet for the same below.
Code Snippet:
We have created a sample to demonstrate the same and it can be found from the below link.
|
Hi Tuy,
Sorry for the inconvenience caused.
We did not include the feature "Support for various online map providers" in our 2022 Volume 1 release. However, we will include this implementation in Volume 2, 2022, which is expected to be available in June 2022.
Regards,
Indumathi R
Hi Tuy,
We have implemented the feature “Support for various online map providers” in the Maps component and it is included in our Essential Studio 2022 Volume 2 release v20.2.0.36 which is rolled out and is available for download under the following link.
We can render various online map providers using the "urlTemplate" property in the Maps component. The tile server URL provided by map providers such as OSM, Bing Maps, TomTom, and others must be set in the "urlTemplate" property to render the required map. Please see the documentation link below for more information on the OpenStreetMap tile server URLs.
https://wiki.openstreetmap.org/wiki/Tile_servers
Code Snippet:
|
<MapsComponent id="maps"> <LayersDirective> <LayerDirective urlTemplate=”http://mt0.google.com/vt/lyrs=s&hl=en&x=tileX&y=tileY&z=level”> </LayersDirective> </MapsComponent> |
In the above documentation links, you will find the tile map URLs such as below.
https://tile.openstreetmap.org/${z}/${x}/${y}.png
In the above tile link, we need to replace “${z}”, “${x}” and “${y}” as “level”, “tileX” and “tileY” respectively when we set it in the “urlTemplate” property.
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.
