{"id":725,"date":"2025-03-19T14:24:17","date_gmt":"2025-03-19T14:24:17","guid":{"rendered":"https:\/\/wpinteractiveglobes.com\/?post_type=documentation&#038;p=725"},"modified":"2025-03-19T14:24:17","modified_gmt":"2025-03-19T14:24:17","slug":"adding-custom-html-markers","status":"publish","type":"documentation","link":"https:\/\/wpinteractiveglobes.com\/documentation\/adding-custom-html-markers\/","title":{"rendered":"Adding custom HTML Markers"},"content":{"rendered":"\n<p>Using HTML custom markers opens a world of possibilities, since you can use your own code to create the marker you need. Below is an example of a custom HTML marker that displays the marker title, adds some background and a cool hover effect. <\/p>\n\n\n<div id=\"itt_globe_wrapper_713\" class=\"itt_globe_wrapper itt_globe_wrapper_pro\" style=\"\">\n<style>\n.itt_globe_713.itt_globe_tooltip {\nbackground:#FFFFFF;\ncolor:#000000;\npadding:8px 8px 8px 8px ;\nborder-radius: 20px;\nbox-shadow: ;\nfont-family: inherit;\ntext-align: initial;\nfont-size: inherit;\nborder: none;\n\n}<\/style>\n<div class=\"itt_globe_container\"><div class=\"itt_globe_aspect_ratio\" style=\"padding-top: 56%\" data-padding-top=\"56\" data-padding-top-mobile=\"0\">\n<div class=\"itt_globe_render itt_globe js-itt-globe-render\" id=\"itt_globe_713\" data-globe_id=\"713\" data-globe_meta=\"{&quot;globeImage&quot;:&quot;earth-day.jpg&quot;,&quot;globeColor&quot;:&quot;#064273&quot;,&quot;customImage&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;width&quot;:&quot;&quot;,&quot;height&quot;:&quot;&quot;,&quot;thumbnail&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;},&quot;showGraticules&quot;:&quot;&quot;,&quot;atmosphere&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;atmosphereColor&quot;:&quot;#87CEFA&quot;,&quot;atmosphereAltitude&quot;:&quot;0.15&quot;},&quot;altitudeOptions&quot;:{&quot;altitude&quot;:&quot;1.5&quot;,&quot;minAltitude&quot;:&quot;&quot;,&quot;maxAltitude&quot;:&quot;&quot;},&quot;centerCoordinates&quot;:{&quot;address&quot;:&quot;&quot;,&quot;latitude&quot;:&quot;34.22776595649174&quot;,&quot;longitude&quot;:&quot;3.699628297045109&quot;,&quot;zoom&quot;:&quot;2&quot;},&quot;interactions&quot;:{&quot;zoom&quot;:&quot;1&quot;,&quot;pan&quot;:&quot;1&quot;},&quot;animateIn&quot;:&quot;1&quot;,&quot;rotate&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;speed&quot;:&quot;1.5&quot;},&quot;backgroundColor&quot;:&quot;transparent&quot;,&quot;paddingTop&quot;:&quot;56&quot;,&quot;paddingTopMobile&quot;:&quot;&quot;,&quot;maxWidth&quot;:&quot;&quot;,&quot;points_info&quot;:&quot;&quot;,&quot;points&quot;:[],&quot;points_cpt&quot;:&quot;&quot;,&quot;pointDefaults&quot;:{&quot;action&quot;:&quot;none&quot;,&quot;type&quot;:&quot;cylinder&quot;,&quot;radius&quot;:&quot;20&quot;,&quot;altitude&quot;:&quot;1&quot;,&quot;color&quot;:&quot;#99d8c9&quot;,&quot;hover&quot;:&quot;#2ca25f&quot;,&quot;image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;width&quot;:&quot;&quot;,&quot;height&quot;:&quot;&quot;,&quot;thumbnail&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;title&quot;:&quot;&quot;,&quot;description&quot;:&quot;&quot;},&quot;animate&quot;:&quot;&quot;,&quot;imageOrientation&quot;:&quot;horizontal&quot;},&quot;pointsTooltipTemplate&quot;:&quot;&quot;,&quot;pointsDataSource&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;type&quot;:&quot;json&quot;,&quot;google_api_key&quot;:&quot;&quot;,&quot;google_sheet_id&quot;:&quot;&quot;,&quot;google_sheet_range&quot;:&quot;Sheet1&quot;,&quot;google_data_id&quot;:&quot;&quot;,&quot;google_data_latitude&quot;:&quot;&quot;,&quot;google_data_longitude&quot;:&quot;&quot;,&quot;json&quot;:&quot;&quot;,&quot;json_id&quot;:&quot;id&quot;,&quot;json_lat&quot;:&quot;latitude&quot;,&quot;json_lon&quot;:&quot;longitude&quot;,&quot;json_data_source&quot;:&quot;&quot;,&quot;cpt_meta_post_types&quot;:&quot;post&quot;,&quot;cpt_meta_use_acf&quot;:&quot;&quot;,&quot;cpt_meta_repeater&quot;:&quot;&quot;,&quot;cpt_meta_repeater_field&quot;:&quot;&quot;,&quot;cpt_meta_current&quot;:&quot;&quot;,&quot;cpt_meta_latitude&quot;:&quot;&quot;,&quot;cpt_meta_longitude&quot;:&quot;&quot;,&quot;cpt_meta_query&quot;:&quot;&quot;,&quot;action_content_template&quot;:&quot;&quot;},&quot;heatmapPoints&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;property&quot;:&quot;&quot;,&quot;minRadius&quot;:&quot;1&quot;,&quot;maxRadius&quot;:&quot;20&quot;,&quot;minAltitude&quot;:&quot;1&quot;,&quot;maxAltitude&quot;:&quot;10&quot;,&quot;useColorGradient&quot;:&quot;&quot;,&quot;startColor&quot;:&quot;#00FF00&quot;,&quot;endColor&quot;:&quot;#FF0000&quot;},&quot;labels_info&quot;:&quot;&quot;,&quot;labels&quot;:&quot;&quot;,&quot;labels_cpt&quot;:&quot;&quot;,&quot;labelDefaults&quot;:{&quot;action&quot;:&quot;none&quot;,&quot;altitude&quot;:&quot;1&quot;,&quot;size&quot;:&quot;20&quot;,&quot;color&quot;:&quot;#99d8c9&quot;,&quot;hover&quot;:&quot;#2ca25f&quot;,&quot;includeDot&quot;:&quot;1&quot;,&quot;radius&quot;:&quot;20&quot;,&quot;dotOrientation&quot;:&quot;bottom&quot;},&quot;labelFont&quot;:&quot;default&quot;,&quot;dotLabelsTooltipTemplate&quot;:&quot;&quot;,&quot;dotLabelsDataSource&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;type&quot;:&quot;json&quot;,&quot;google_api_key&quot;:&quot;&quot;,&quot;google_sheet_id&quot;:&quot;&quot;,&quot;google_sheet_range&quot;:&quot;Sheet1&quot;,&quot;google_data_id&quot;:&quot;&quot;,&quot;google_data_latitude&quot;:&quot;&quot;,&quot;google_data_longitude&quot;:&quot;&quot;,&quot;json&quot;:&quot;&quot;,&quot;json_id&quot;:&quot;id&quot;,&quot;json_lat&quot;:&quot;latitude&quot;,&quot;json_lon&quot;:&quot;longitude&quot;,&quot;json_data_source&quot;:&quot;&quot;,&quot;cpt_meta_post_types&quot;:&quot;post&quot;,&quot;cpt_meta_use_acf&quot;:&quot;&quot;,&quot;cpt_meta_repeater&quot;:&quot;&quot;,&quot;cpt_meta_repeater_field&quot;:&quot;&quot;,&quot;cpt_meta_current&quot;:&quot;&quot;,&quot;cpt_meta_latitude&quot;:&quot;&quot;,&quot;cpt_meta_longitude&quot;:&quot;&quot;,&quot;cpt_meta_query&quot;:&quot;&quot;,&quot;action_content_template&quot;:&quot;&quot;},&quot;heatmapDotLabels&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;controlType&quot;:[&quot;radius&quot;,&quot;altitude&quot;,&quot;labelSize&quot;],&quot;property&quot;:&quot;&quot;,&quot;minRadius&quot;:&quot;10&quot;,&quot;maxRadius&quot;:&quot;100&quot;,&quot;minAltitude&quot;:&quot;1000&quot;,&quot;maxAltitude&quot;:&quot;10000&quot;,&quot;minLabelSize&quot;:&quot;10&quot;,&quot;maxLabelSize&quot;:&quot;50&quot;,&quot;useColorGradient&quot;:&quot;&quot;,&quot;startColor&quot;:&quot;#00FF00&quot;,&quot;endColor&quot;:&quot;#FF0000&quot;},&quot;htmlInfo&quot;:&quot;&quot;,&quot;html_cpt&quot;:&quot;&quot;,&quot;htmlDefaults&quot;:{&quot;htmlTemplate&quot;:&quot;&lt;div class=\\&quot;itt_globe_html_marker pulsating_marker\\&quot;&gt;{title}&lt;\\\/div&gt;&quot;,&quot;action&quot;:&quot;none&quot;},&quot;regionInfo&quot;:&quot;&quot;,&quot;regionSource&quot;:&quot;disabled&quot;,&quot;regionCustomSourceURL&quot;:&quot;&quot;,&quot;regionInfo2&quot;:&quot;&quot;,&quot;regionCpt&quot;:&quot;&quot;,&quot;regionDefaults&quot;:{&quot;action&quot;:&quot;none&quot;,&quot;color&quot;:&quot;#99d8c9&quot;,&quot;hover&quot;:&quot;#2ca25f&quot;,&quot;inactive&quot;:&quot;#c9c9c9&quot;,&quot;strokeColor&quot;:&quot;#f0f0f0&quot;},&quot;onlyActiveRegions&quot;:&quot;&quot;,&quot;regionsTooltipTemplate&quot;:&quot;&quot;,&quot;regionCount&quot;:{&quot;enable&quot;:&quot;&quot;,&quot;template&quot;:&quot;{regionCount} Active Regions&quot;,&quot;position&quot;:&quot;top&quot;},&quot;regionsDataSource&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;type&quot;:&quot;categories&quot;,&quot;cpt_meta_post_types&quot;:&quot;post&quot;,&quot;cpt_meta_use_acf&quot;:&quot;&quot;,&quot;cpt_meta_repeater&quot;:&quot;&quot;,&quot;cpt_meta_repeater_field&quot;:&quot;&quot;,&quot;cpt_meta_current&quot;:&quot;&quot;,&quot;cpt_meta_relashionship&quot;:&quot;&quot;,&quot;cpt_meta_relashionship_field&quot;:&quot;&quot;,&quot;cpt_meta_id&quot;:&quot;&quot;,&quot;cpt_meta_query&quot;:&quot;&quot;,&quot;google_api_key&quot;:&quot;&quot;,&quot;google_sheet_id&quot;:&quot;&quot;,&quot;google_sheet_range&quot;:&quot;Sheet1&quot;,&quot;google_data_id&quot;:&quot;&quot;,&quot;json&quot;:&quot;&quot;,&quot;json_id&quot;:&quot;id&quot;,&quot;json_data_source&quot;:&quot;&quot;,&quot;categoriesIncludeEmpty&quot;:&quot;&quot;,&quot;tagsIncludeEmpty&quot;:&quot;&quot;,&quot;action_content_template&quot;:&quot;&quot;},&quot;heatmapRegions&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;type&quot;:&quot;gradient&quot;,&quot;minColor&quot;:&quot;#f5f5f5&quot;,&quot;maxColor&quot;:&quot;#333333&quot;,&quot;numberOfColours&quot;:&quot;0&quot;,&quot;noHover&quot;:&quot;&quot;,&quot;source&quot;:&quot;value&quot;},&quot;arcLines_cpt&quot;:&quot;&quot;,&quot;arcLineDefaults&quot;:{&quot;stroke&quot;:&quot;#99d8c9&quot;,&quot;dashLength&quot;:&quot;100&quot;,&quot;dashGap&quot;:&quot;100&quot;,&quot;strokeWidth&quot;:&quot;2&quot;,&quot;altitude&quot;:&quot;10&quot;,&quot;animate&quot;:&quot;0&quot;},&quot;autoLines&quot;:{&quot;enabled&quot;:&quot;&quot;},&quot;search&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;position&quot;:&quot;before&quot;,&quot;mobile_only&quot;:&quot;&quot;,&quot;choices&quot;:&quot;1&quot;,&quot;placeholder_text&quot;:&quot;Search...&quot;,&quot;no_matches_text&quot;:&quot;No matches found&quot;,&quot;select_text&quot;:&quot;Select&quot;,&quot;label_property&quot;:&quot;title&quot;,&quot;properties&quot;:&quot;&quot;},&quot;tooltip&quot;:{&quot;backgroundColor&quot;:&quot;#FFFFFF&quot;,&quot;fontFamily&quot;:&quot;inherit&quot;,&quot;font&quot;:{&quot;font-weight&quot;:&quot;&quot;,&quot;font-style&quot;:&quot;&quot;,&quot;subset&quot;:&quot;&quot;,&quot;text-align&quot;:&quot;&quot;,&quot;font-size&quot;:&quot;&quot;,&quot;color&quot;:&quot;#000000&quot;,&quot;type&quot;:&quot;google&quot;,&quot;unit&quot;:&quot;px&quot;},&quot;cornerRadius&quot;:&quot;20&quot;,&quot;border&quot;:{&quot;all&quot;:&quot;&quot;,&quot;style&quot;:&quot;solid&quot;,&quot;color&quot;:&quot;#1e73be&quot;},&quot;padding&quot;:{&quot;top&quot;:&quot;8&quot;,&quot;right&quot;:&quot;8&quot;,&quot;bottom&quot;:&quot;8&quot;,&quot;left&quot;:&quot;8&quot;,&quot;unit&quot;:&quot;px&quot;},&quot;maxWidth&quot;:&quot;&quot;},&quot;tooltipTemplate&quot;:&quot;&quot;,&quot;tooltipOnlyActive&quot;:&quot;1&quot;,&quot;layersInfo&quot;:&quot;&quot;,&quot;layer&quot;:&quot;&quot;,&quot;layerOrder&quot;:&quot;&quot;,&quot;liveFilter&quot;:{&quot;enabled&quot;:&quot;&quot;,&quot;type&quot;:&quot;menu&quot;,&quot;position&quot;:&quot;above&quot;,&quot;allLabel&quot;:&quot;All&quot;,&quot;default&quot;:&quot;701&quot;,&quot;keepBase&quot;:&quot;&quot;},&quot;id&quot;:713,&quot;dotLabels&quot;:[],&quot;enabled_click_actions&quot;:[&quot;default&quot;],&quot;objects&quot;:[],&quot;html&quot;:[{&quot;htmlTemplate&quot;:&quot;&lt;div class=\\&quot;itt_globe_html_marker\\&quot;&gt;{title}&lt;\\\/div&gt;&quot;,&quot;action&quot;:&quot;default&quot;,&quot;coordinates&quot;:{&quot;address&quot;:&quot;Rome, Roma Capitale, Lazio, Italy&quot;,&quot;latitude&quot;:&quot;41.8933203&quot;,&quot;longitude&quot;:&quot;12.4829321&quot;,&quot;zoom&quot;:&quot;2&quot;},&quot;content&quot;:&quot;Rome, Italy&quot;,&quot;useCustom&quot;:&quot;&quot;,&quot;id&quot;:717,&quot;title&quot;:&quot;Rome&quot;,&quot;globe_id&quot;:713,&quot;html&quot;:&quot;&lt;div class=\\&quot;itt_globe_html_marker pulsating_marker\\&quot;&gt;Rome&lt;\\\/div&gt;&quot;,&quot;type&quot;:&quot;html&quot;},{&quot;htmlTemplate&quot;:&quot;&lt;div class=\\&quot;itt_globe_html_marker\\&quot;&gt;{title}&lt;\\\/div&gt;&quot;,&quot;action&quot;:&quot;default&quot;,&quot;coordinates&quot;:{&quot;address&quot;:&quot;Porto, Portugal&quot;,&quot;latitude&quot;:&quot;41.1494512&quot;,&quot;longitude&quot;:&quot;-8.6107884&quot;,&quot;zoom&quot;:&quot;2&quot;},&quot;content&quot;:&quot;Porto, Portugal&quot;,&quot;useCustom&quot;:&quot;&quot;,&quot;id&quot;:716,&quot;title&quot;:&quot;Porto&quot;,&quot;globe_id&quot;:713,&quot;html&quot;:&quot;&lt;div class=\\&quot;itt_globe_html_marker pulsating_marker\\&quot;&gt;Porto&lt;\\\/div&gt;&quot;,&quot;type&quot;:&quot;html&quot;}],&quot;arcLines&quot;:[]}\"><\/div>\n<\/div><\/div>\n\n<\/div>\n\n\n\n<p>You can create a template, using placeholders, that will display as the markers. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/wpinteractiveglobes.com\/wp-content\/uploads\/2025\/03\/html_markers_final-1024x466.png\" alt=\"\" class=\"wp-image-728\" srcset=\"https:\/\/wpinteractiveglobes.com\/wp-content\/uploads\/2025\/03\/html_markers_final-1024x466.png 1024w, https:\/\/wpinteractiveglobes.com\/wp-content\/uploads\/2025\/03\/html_markers_final-300x137.png 300w, https:\/\/wpinteractiveglobes.com\/wp-content\/uploads\/2025\/03\/html_markers_final-768x350.png 768w, https:\/\/wpinteractiveglobes.com\/wp-content\/uploads\/2025\/03\/html_markers_final.png 1427w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In the example above we used the following template:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"itt_globe_html_marker pulsating_marker\">{title}&lt;\/div><\/code><\/pre>\n\n\n\n<p>This template uses the {title} placeholder and some custom css classes.<\/p>\n\n\n\n<p>We then added this custom css to our site:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Pulsating Marker *\/\n.pulsating_marker {\n  \n  background-color: orange;\n  border-radius: 50%;\n  position: relative;\n  box-shadow: 0 0 10px rgba(255, 165, 0, 0.8);\n  cursor: pointer;\n  overflow: visible;\n}\n\n.pulsating_marker::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  height: 100%;\n  background: orange;\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: none;\n}\n\n.pulsating_marker:hover::after {\n  animation: shockwave 1s ease-out infinite;\n}\n\n@keyframes shockwave {\n  0% {\n    width: 100%;\n    height: 100%;\n    opacity: 0.6;\n  }\n  100% {\n    width: 250%;\n    height: 250%;\n    opacity: 0;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>This is just an example of what you can do with custom HTML Markers. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Limitations<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>You won&#8217;t be able to use the automatic tooltip feature. You will need to implement your own tooltip solution if needed. <\/li>\n\n\n\n<li>Depending on how you add your custom css to your site, you might not see the real HTML style in the administration preview.<\/li>\n<\/ul>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false},"doctag":[14],"topic":[17],"class_list":["post-725","documentation","type-documentation","status-publish","hentry","doctag-markers","topic-markers"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpinteractiveglobes.com\/wp-json\/wp\/v2\/documentation\/725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpinteractiveglobes.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/wpinteractiveglobes.com\/wp-json\/wp\/v2\/types\/documentation"}],"wp:attachment":[{"href":"https:\/\/wpinteractiveglobes.com\/wp-json\/wp\/v2\/media?parent=725"}],"wp:term":[{"taxonomy":"doctag","embeddable":true,"href":"https:\/\/wpinteractiveglobes.com\/wp-json\/wp\/v2\/doctag?post=725"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/wpinteractiveglobes.com\/wp-json\/wp\/v2\/topic?post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}