Marker Labels & links

#1

Hi Guys,

This may be a very simple question, I only started using the system today. I have setup a map, I have setup a marker. I have that all running on my test system, not problem. I can’t find any reference in the API to being able to apply a mouseover, or label string to a marker applied to a map though. I’m sure I must be missing something really simple, but it’s not leaping out.

Where should I be looking? Ideally it would be a mouseover, or static label on the map, with a click to URL function.

Cheers

Rob

#2

You can use the popup - https://developer.tomtom.com/maps-sdk-web-js/documentation#Maps.Popup
You can put the HTML code with the link in setHTML() method or create an HTML element and use it in setDOMContent() method.

2 Likes
#3

This is largely what I was after but I’m still struggling to get the HTML to work. I have:

    var div = window.document.createElement('div');
    div.innerHTML = 'Hello, world!';

    var m1 =tomtom.L.marker([56.00190, -3.78390], markerOptions)
       .addTo(map)
       .on('click', function(e){
          tomtom.L.popup()
              .setLatLng(e.latlng)
              .setDOMContent(div)
              .openOn(map)
          });
    var m2 =tomtom.L.marker([56.10190, -3.98390], markerOptions)
       .addTo(map)
       .on('click', function(e){
          tomtom.L.popup()
              .setLatLng(e.latlng)
              .setContent("<center><b>Place Name</b> <br> <i>("+ e.latlng.toString()+")</i></center>")
              .openOn(map)
          });

The above contains two markers, m1 and m2. The m2 works nicely, but note the popup refers to setContent which is not listed inthe API ( https://developer.tomtom.com/maps-sdk-web-js/documentation#Maps.Popup ) as a valid method/property. If I use SetDOMContent, or setHTML I get an error. It’s as if the popup class has a different interface. I note the string used by the set content does accept HTML, but got most upset when I tried to enter a URL even when the slashes were escape charactered.

What did I miss?

#4

You are mixing versions of the SDK. The code above refers to version 4, and the documentation refers to v5.

Here’s the documentation for version 4: https://developer.tomtom.com/maps-sdk-web/documentation

We recommend to use the newest version!

1 Like
#5

Thankyou, unintentional… Not sure how that happened actually. I downloaded the packages only this week. I’ll look to migrate to v5. Most frustrating!

#6

Feel free to continuing using v4 if you are happy with it, but we won’t be adding new features to it as currently v5 is our main focus.

v5 has advantages compared to v4!

  • Better performance
  • smaller and more modular (e.g the services library can be imported separately and can be used in node)
  • easier to use (we also improved the documentation)
  • Available via CDN (you don’t need to host the library yourself)
  • Available in npm (you can import it as you do with other npm modules)
#7

… if I were to use the library in conjunction with CGI generated JavaScript would there be an approach you’d recommend? The CDN sounds interesting…

#8

How are you currently including v4 in your webpage? if you include the SDK in the HEAD of your HTML document - before including your javascript - you should be able to use it without problems.

Something like this:

Screenshot%20from%202019-11-29%2015-05-57
Screenshot from 2019-11-29 15-05-57.png1093×224 21.5 KB

1 Like
#9

The CGI version isn’t currently working on V4, there is a server 500 error that I’ve not been able to track down yet. I only started this earlier in the week, gimme chance… :wink:

The solution you have here looks SO much better though. I was generating the equivalent HTML and JavaScript from the CGI, I had the HTML written by hand to find the right approach and basically I was recreating it from the CGI interface. This was starting to give me issues, almost certainly related to the multiple root definitions and CGI security criteria. Your suggestion here is MUCH nicer!

1 Like