OSM for ERPnext

I am new to ORS and want to use OSM in a field in ERPNext, to show map. Below is my code for map using open route service, but not able to add it into a HTML field in ERPNext. Can someone please help me?

let request = new XMLHttpRequest();


 request.open('POST', "https://api.openrouteservice.org/v2/matrix/driving-car");

 request.setRequestHeader('Accept', 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8');
 request.setRequestHeader('Content-Type', 'application/json');
 request.setRequestHeader('Authorization', 'key');

 request.onreadystatechange = function () {
   if (this.readyState === 4) {
     console.log('Status:', this.status);
     console.log('Headers:', this.getAllResponseHeaders());
     console.log('Body:', this.responseText);
     var data = this.responseText;
     var jsonResponse = JSON.parse(data);
     console.log(jsonResponse.destinations[0].snapped_distance);
   }
 };

 const body = '{"locations":[[9.70093,48.477473],[9.207916,49.153868]]}';

  request.send(body);

Thank you

If you want to add an ORS map view in an HTML, the ORS embedded mode might fit your needs. Please take a look at this link New embedded mode for openrouteservice VueJs client | Openrouteservice

Thanks for responding @amoncaldas , as I said I am new to ORS,

let request = new XMLHttpRequest();
request.open('POST', "https://api.openrouteservice.org/v2/directions/driving-car");
request.setRequestHeader('Accept', 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8');
request.setRequestHeader('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'key');
        
request.onreadystatechange = function () {
if (this.readyState === 4) {
   console.log('Headers:', this.getAllResponseHeaders());
   console.log('Body:', this.responseText);
   var data = this.responseText;
   var jsonResponse = JSON.parse(data);
}
};
        
const body = '{"coordinates":[[55.801281,37.573242],[115.663757,38.106467]]}';

I am using above code for distance and time calculation for given coordinates and I want to add below map to the field, which was successfully done.

frm.set_df_property('map','options','<div class="mapouter"><div class="canvas"><iframe width=100% height="300" id="canvas" src="https://maps.openrouteservice.org/#/directions/Ladenburg,Germany/Heidelberg,Germany/data/55,130,32,198,15,97,4,224,38,9,96,59,2,24,5,192,166,6,113,0,184,64,14,0,232,3,96,1,128,86,82,6,103,32,26,0,88,4,228,62,227,24,184,129,184,142,63,1,24,1,51,208,14,192,217,189,65,85,243,225,11,68,4,0,14,169,224,68,77,135,40,5,208,32,3,55,128,6,221,46,112,1,60,195,234,64,28,192,45,52,116,150,2,187,238,77,22,72,45,232,119,163,184,140,17,188,58,200,152,24,193,110,200,250,24,208,40,202,0,110,232,0,250,218,14,33,184,160,168,46,150,232,168,241,144,14,136,168,184,2,114,152,0,22,46,9,129,96,168,48,184,164,36,114,0,238,232,240,150,37,217,149,213,174,56,124,44,0,190,114,0,94,80,0,182,184,124,248,189,189,64,0/embed/en-us" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><br><style>.mapouter{position:relative;text-align:right;height:300px;width:100%;}</style><style>.canvas {overflow:hidden;background:none!important;height:300px;width:100%;}</style></div></div>');
frm.refresh_field('map');

Now please help me to use dynamic locations based on my coordinates for map.
Thank you

Hey @Aditi
The values in the URL are parameters that are used to calculate/display the route and are based on the values of the inputs/filters that are set by the user. In maps.openrouteservice.org/#/settings in the advanced section you can set the data compressing off so you can see the values in plain text on the URL

Okay @amoncaldas , I will check.
But can you help me with my above mentioned problem?

Hey @Aditi
I could not understand what exactly is the help you need. If you could request/calculate the data using ORS API successfully, but you can not display this data in a web application/page, than the issue is not related to ORS. As there are many ways, frameworks and libraries to display a map view using html/JavaScript, it is out of team´s scope to hep with specific implementations (sorry, but we don´t have enough human resource for that). But as a general info I would tell you to check the https://leafletjs.com/ library, as we use it in our map client.

If you want to focus on the embedded mode (iframe) then you do not need to create any JavaScript code. Just follow what the page I shared with says, and you will be able to have a valid iframe code and then you just have to put it in you html code. You can even inspect the source code of the page itself to see how the iframe is used in a html page.

Kind regards,

Hi @amoncaldas, this iframe does not allow us to pass latitude and longitude right, and we are not allowed create maps dynamically.

Did you check the option in maps client settings to use uncompressed URL data as I told you in the previous comment? Once you set the maps client to avoid compressing the data in URL you will see the parameters, including the latitude and longitude.