Access OpenStreetMap (OSM) from Codeless

Server Code
1

I’ve been working with Open Street Map (OSM) via Leaflet, one of its major API libraries. It’s been good experience with basic web page coding practices (HTML/CSS/JavaScript), and provides an alternate to Google maps (open source, no API keys).

I’d like to start accessing OSM/Leaflet APIs from Codeless/UI Builder. I believe the JavaScript can go into custom code blocks, but not sure how to connect them to Codeless and UI builder, which I assume replaces (Some of? All of?) the HTML and the CSS styling.

This working code opens/renders a new map, adding a layer and marker to it:
Index1.html - the hfef and src URLs are for the hosted version from Leaflet documentation: Download - Leaflet - a JavaScript library for interactive maps.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" />    
    <style> #map{width: 100%; height: 100vh;} </style>
    <title>map</title>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"></script>
    <script src="scripts1.js"></script>  
  </body>
</html>

Scripts1.js

let point = [51.958, 9.14];
let mapOptions = {center: point, zoom: 10};
let map = new L.map('map', mapOptions);

let layer = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer);

let marker = new L.Marker(point);
marker.addTo(map);

Is it possible to access OSM from Codeless? Is the ‘translation’ something a HTML/JavaScript newbie might attempt? This could be a useful custom component for OpenStreetMap, similar to the ‘Google Map’ component.

2

Hi, @Jim_Austin

I believe the JavaScript can go into custom code blocks, but not sure how to connect them to Codeless and UI builder, which I assume replaces (Some of? All of?) the HTML and the CSS styling.

The Custom Code block is not suitable because it can only be used to write code in Codeless in JS only.

The best option is to use a custom component. We are currently developing the one to suit your purposes. It’s still in the testing phase, but you can use it.
The archive can be found at: https://github.com/Backendless/ui-builder-library/tree/main/components/bl-leafletMap-component

To insert the component into your application. You need to unpack the archive by the following path /ui-builder/containers/default/components/custom

Regards,
Marina

3

Thanks Marina, looks like the Backendless team is way ahead of me!
My progress in getting the Backendless custom code:

  • I don’t see anything downloadable at the GitHub URL you gave.
  • I went back to Code and downloaded the ZIP file via the green ‘Code’ button.
  • the downloaded folder (ui-builder-library-main > components) has 24 folders (current ‘under-development Custom Components?).
  • from there I copied the folder ‘bl-leafletMap-component’ to default > components > custom as you directed.
  • UI Builder Custom Components list now shows a ‘Leaflet map’ component, and a map centered on New York (40.6893, -74.0444) renders in UI Builder.
  • running Preview gives these errors:
    Preview
    Preview

Console
Console

Did I download the correct version of this custom component? Do I need to do something else?

4

Hello @Jim_Austin

Did I download the correct version of this custom component? Do I need to do something else?

Yes. Try to open this custom component, make any change at index.js (for example add empty line) and click Save that will trigger a build and issue must gone.

Regards, Dima

5

Thanks Dima, that fixed it! Maybe a good idea to force a rebuild on any downloaded code?

I understand that this component is in development/testing. Should I post problems/suggestions, or is it too early in development for that?

6

This problem mustn’t happen when these components are installed from the marketplace(in a common way).
When you download it from GitHub - it’s like beta testing.

7

If this is beta testing then I assume you want to hear if I see problems. Should I do that

  • here on this thread,
  • on a new Support topic, or
  • direct to you?
8

Hello @Jim_Austin,

It is fine to create a new support topic for any issue you faced with (and we’ll try to fix it as soon as possible).

Regards,
Olha