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!
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.
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="
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="