Rendering of heatmap on image

[Manoj]

we want to render a heatmap on an image which is png/jpeg file

is there any way on with angular maps

if we have to convert the image, which tool you recommend

is the below information is true?

The geo map library provided in Syncfusion is postponed due to the complexity of developing region-specific maps. Currently, only US states and cities are provided out of the box. For other regions, including India, we have to handle Geo JSON data conversion ourselves

[Indumathi Ravi]

Hi Manoj,

Please find the details for your queries from the below table.

Queries	Details
we want to render a heatmap on an image which is png/jpeg file is there any way on with angular maps	To achieve your scenario, you can apply the background-image CSS style to the div element containing the Maps component to render Maps over an image. Please see the following link for a sample and screenshot to demonstrate the same.   https://www.syncfusion.com/downloads/support/directtrac/general/ze/Maps318879621
if we have to convert the image, which tool you recommend	Can you please confirm whether you need to convert the maps from the Maps component as images or whether you need to convert the Maps including the background image in the above query as a complete image? We do not support exporting Maps along with background images. However, the Maps component supports the "export" method, which allows you to download the rendered Maps component as an image. Please find the documentation link below for your reference. https://ej2.syncfusion.com/angular/documentation/maps/print/#image-export
is the below information is true? The geo map library provided in Syncfusion is postponed due to the complexity of developing region-specific maps. Currently, only US states and cities are provided out of the box. For other regions, including India, we have to handle Geo JSON data conversion ourselves	Our Syncfusion Maps component is intended to display the map from the JSON files with GeoJSON format and from online map providers such as OSM, Bing Maps, etc. For rendering the maps from GeoJSON data in the Maps component, you can refer to the below documentation link.   https://ej2.syncfusion.com/angular/documentation/maps/getting-started/#render-shapes-from-geojson-data   On the other hand, we lack a tool and must handle the creation and updating of the maps' GeoJSON data manually.However, if you need to modify the GeoJSON map or need a custom map, please check with any online map vendors for the required maps. Alternatively, you can find many open sources for the requested shapes. You can download the GeoJSON data and bind the GeoJSON data to the Maps component.

Please let us know if you need any further assistance.

Regards,

Indumathi R.

[Manoj]

Thanks for the reply.

Our scenario is, the user would be giving us, the image of a floor on the building, & we will have to show a heatmap on the image according to the people present on a particular area of the floor.

from your answer, I understood that we will have to convert the image provided to geo JSON and then render it on the map, and superimpose the heatmap layer above it. am I correct?

Also, we do have a syncfusion license ( Siemens ), but when I am using the map component on my project it is showing a red message popup that, we will have to buy another license. if this is true could you please give me information on what license to buy?

[Indumathi Ravi]

Hi Manoj,

Please find the details for your queries from the below table.

Queries	Details
Our scenario is, the user would be giving us, the image of a floor on the building, & we will have to show a heatmap on the image according to the people present on a particular area of the floor. from your answer, I understood that we will have to convert the image provided to geo JSON and then render it on the map, and superimpose the heatmap layer above it. am I correct?	The floor plan can be provided as GeoJSON into our Syncfusion Maps component, and we can perform UI operations using the existing features. There is no need to overlay the HeatMap component.   Please see our bus seat selection demo in our Angular SB demo section for a better understanding.   https://ej2.syncfusion.com/angular/demos/#/bootstrap5/maps/seat-selection
Also, we do have a syncfusion license ( Siemens ), but when I am using the map component on my project it is showing a red message popup that, we will have to buy another license. if this is true could you please give me information on what license to buy?	We suspect that the issue may occur due to the following reasons: Reason 1:  Due to duplicate packages installed in your application, Follow the below steps to resolve the issue.    Delete the @Syncfusion folder from node_modules and the package-lock.json file from the root folder.    Clear npm .cache file at your end.   Update our packages to the same major version. For example, if you are using a version like (i.e. v20.3.XX) use the same version for all the Syncfusion components in the package.json file.    Run the ‘’npm install" command to install the node_modules.   Reason 2:  If Syncfusion components are used with Cap Symbol (^) in the package.json file, there is a possibility of a license banner appearing after registering the license and this is one of the cases of license validation. So, we are suggesting you use the Tilde (~) symbol instead of Cap (^) symbol to resolve this issue.   Kindly follow the below steps to resolve this issue    Delete the @Syncfusion folder from node_modules and the package-lock.json file from the root folder.   Clear the npm cache at your end.   Remove the cap (^) symbol before the version number and use the mentioned symbol Tilde (~) before the version number, like ("@syncfusion/ej2-angular-maps": "~20.3.58").   Run the "npm install" command to install the packages.

Please let us know if you need any further assistance.