How do I add range colors to the marker map custom in the HERE maps app?

[MattZerfas]

I am looking for some help editing the markermapcustom html dashboard example in the HERE maps app. I would like to change a few things but I don't know how to edit JavaScript or SVG.

I would like to change a few things. If anyone could help me with any of it that would be great!

• First add color to the markers based on a range from the value for that location
• Remove the search bar
• Add a dropdown menu / submit button
  • Dropdown menu is populated by the search results from a search.
• When a marker is clicked have it show the data from a text column instead of showing the lat/long for that marker.

• If possible have the pop actually show a few lines of text from a text ,text1,text2 column on separate lines if those columns are populated.

  Example data:
  lat lng value text text1 text2
  1 -1 5.5 1234 abcd efgh
  2 -2 2 7890

Clicking on item one would show:

5.5
1234
abcd
efgh

clicking on item 2 would show:

2 
7890

Sorry I know this is a lot of info and a lengthy request. I would do it myself if I could. I plan to read though how it was done to learn from it.

[pietervi · Accepted solution]

Hi Matt,

I can only answer the HERE maps specific questions.
For the other ones you'll need to gain some more knowledge about splunk dashboarding & web development.
Or find someone who has a bit more experience with it 🙂

About customizing the markers. Let's start from the custom marker map.
First you need to define a function that creates the markers that will be used in your visualization.
This function uses an SVG image. To create one have a look at: http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html
Using JavaScript you can dynamically replace certain aspects of the SVG markup to tune the marker.
Then the SVG is used for creating a map icon and that icon is used for the map marker.

See the code below:

var svgMarkup='<svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><circle opacity="0.9" id="svg_1" r="12" cy="13" cx="13" stroke-width="2" stroke="#333333" fill="${FILL}"/><text xml:space="preserve" text-anchor="middle" id="svg_2" y="18.5" x="13" stroke-width="0" font-size="10pt" font-family="Roboto" stroke="#000000" fill="#000000">${TEXT}</text></svg>';
var markerf= function(data){
  var value=("value" in data) ? data.value : "";
  var svg=svgMarkup.replace('${TEXT}',value);
  if(value<=2){
    svg=svg.replace('${FILL}',"red");
  }else if(value<=4){
    svg=svg.replace('${FILL}',"yellow");
  }else {
    svg=svg.replace('${FILL}',"green");
  }
  var markerIcon = new H.map.Icon(svg,{anchor:{x:12,y:12}});
  return new H.map.Marker({lat:data.lat,lng:data.lng},{icon: markerIcon});
};          

You use this function as the marker provider when creating the HERE maps.
You'll also see the function used to create the info bubbles that show up when you click the markers.
The event is passed in as an argument to the function. You can use that to customize the info bubble.

See:

    var mymarkermap = new HereMarkerMap({

                    id: "markermap1",

                    managerid: "search1",

                    el: $("#search-map"),

                    height: "400px",

                    marker: markerf,

                    bubbleContentProvider: function(data){

                        bubble="

"
bubble+=("value" in data) ? data.value : ""
bubble+=("text" in data) ? data.text : ""
bubble+=("text1" in data) ? data.text1 : ""
bubble+=("text2" in data) ? data.text2 : ""
bubble+"

"
return bubble;
}
}).render();

That will give you the visualizations you requested.
Hopefully this can put you on the right track for finishing your other questions.