Getting 3rd Party Street Mapping to work with 'Custom Code Block' using 'TomTom Navigation' service

[William_Lee]

Hi TomTom Mapping has some great pay as you grow deal for developers so I decided to use it to see if I could get a 3rd party mapping service other than google maps to work with the new ‘Custom Code Block’.

Been struggling to try to get their most basic mapping function working with the following javascript and css templates they have for this map.

I downloaded their SDK and loaded the following files into my backendless file directory and I also inserted my TomTom Api Key into the code as you can see (blanked out).

I created a new test page called ‘z_test_1’

I created a UI block and created the ‘map’ anchor id.

I then went into the Page Enter event to add the ‘Custom Block’ with the TomTom HTML code where I was careful to change the path for included CSS and JS files from their SDK download.

However this didn’t work and just displayed a blank page. My app id is 721AC780-A565-8D74-FF75-5158A2EB5500.

Thanks for any help!!

[William_Lee]

I just tried to use the other company MapBox which had an even “easier” looking install so I tried it with the Custom Code block but that didn’t work as well.

Thanks!

[mark-piller]

Hi William,

I posted a recipe in our UI Builder cookbook that describes how to import the MapBox component into UI Builder:

How to import the MapBox component into a UI Builder page

This recipe describes how to import the MapBox JS component into a UI Builder page. The described approach uses the Custom Code codeless block that imports the component’s JavaScript and provides integration between the component’s code and codeless logic. You can see the final result on the following page: https://www.backendless.us/api/files/ui-builder/containers/default/index.html?page=mapbox We will be using MapBox’s GL JS library documented at: Let’s go: The MapBox component uses th…

Regards,
Mark