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.
... View more