{"id":975,"date":"2019-08-19T13:51:57","date_gmt":"2019-08-19T13:51:57","guid":{"rendered":"https:\/\/www.fla-shop.com\/blog\/?p=975"},"modified":"2022-05-24T20:43:25","modified_gmt":"2022-05-24T20:43:25","slug":"how-to-highlight-different-states","status":"publish","type":"post","link":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/","title":{"rendered":"How to highlight different states on the map for different pages"},"content":{"rendered":"\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Different solutions<\/h2>\n\n\n\n<p>We take the <a href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">USA map for WordPress<\/a> as an example. The site administrator wants to highlight different states on different pages of the site. For the United States, this maybe 50 pages for different states.<\/p>\n\n\n\n<p>There are several options for solving this problem, the latter is the simplest and fastest.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>create 50 static images<\/li><li>create 50 maps in a plugin with different settings<\/li><li>create one map and use the parameter in the shortcode<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Static images<\/h3>\n\n\n\n<p>The option with static images (JPG, PNG) will take a lot of time, so we reject it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Many maps with different settings<\/h3>\n\n\n\n<p>Our plugins have no restrictions &#8211; you can create any number of maps with different settings and insert them into different pages of the site. The shortcode for each map will be individual.<br>This is a working solution, but it may take too much time.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/08\/maps-dashboard.png\" alt=\"Maps dashboard\"\/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a single map, and using an additional parameter in the shortcode<\/h3>\n\n\n\n<p>For this option, it is enough to create only one map, and an additional parameter allows you to highlight the state. Parameters also called attributes, are used inside the square brackets along with the shortcode.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_md_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\r\n        <!-- start Fla-shop.com HTML5 Map -->\r\n        <div class='usaHtml5Mapbottom htmlMapResponsive' style='max-width:980px; width: 100%'><div id='usa-html5-map-map-container_0' class='usaHtml5MapContainer' data-map-variable='usahtml5map_map_0'><\/div><div style='clear:both; height: 20px;'><\/div>\r\n            <style>\r\n                #usa-html5-map-map-container_0 {\r\n                    \r\n                }\r\n                #usa-html5-map-map-container_0 .fm-tooltip-name {\r\n\t\t\t\tcolor: #000000;\n\t\t\t\tfont-size: 20px;\n\r\n}\r\n#usa-html5-map-map-container_0 .fm-tooltip-comment {\r\n\r\n}\r\n#usa-html5-map-map-container_0 .fm-tooltip-comment p {\r\n\r\n}\r\n                @media only screen and (max-width: 480px) {\r\n                    #usa-html5-map-map-container_0 {\r\n                        float: none;\r\n                        width: 100%;\r\n                    }\r\n                }\r\n            <\/style><script type=\"text\/javascript\">\r\n            jQuery(function(){\r\n                var hightlighted = null;\r\n                usahtml5map_map_0 = new FlaShopUSAMap(usahtml5map_map_cfg_0);\r\n                if (usahtml5map_map_0.mapConfig.map_data[\"st11\"]) {usahtml5map_map_0.mapConfig.map_data[\"st11\"].color = \"#eba60e\"; usahtml5map_map_0.mapConfig.map_data[\"st11\"].colorOver = \"#b04116\"; }\nelse if (usahtml5map_map_0.mapConfig.points[\"st11\"]) {usahtml5map_map_0.mapConfig.points[\"st11\"].color = \"#eba60e\"; usahtml5map_map_0.mapConfig.points[\"st11\"].colorOver = \"#b04116\"; }\n\r\n                usahtml5map_map_0.draw('usa-html5-map-map-container_0');\r\n                usahtml5map_map_0.on('mousein', function(ev, sid, map) {\r\n                    if (hightlighted && sid != hightlighted) {\r\n                        map.stateHighlightOut(hightlighted);\r\n                        hightlighted = null;\r\n                    }\r\n                });\r\n                \r\n                \r\n\r\n                var html5map_onclick = function(ev, sid, map) {\r\n                var cfg      = usahtml5map_map_cfg_0;\r\n                var link     = map.fetchStateAttr(sid, 'link');\r\n                var is_group = map.fetchStateAttr(sid, 'group');\r\n                var popup_id = map.fetchStateAttr(sid, 'popup-id');\r\n                var is_group_info = false;\r\n\r\n                if (typeof cfg.map_data[sid] !== 'undefined')\r\n                        jQuery('#usa-html5-map-selector_0').val(sid);\r\n                    else\r\n                        jQuery('#usa-html5-map-selector_0').val('');\r\n\r\n                if (is_group==undefined) {\r\n\r\n                    if (sid.substr(0,1)=='p') {\r\n                        popup_id = map.fetchPointAttr(sid, 'popup_id');\r\n                        link         = map.fetchPointAttr(sid, 'link');\r\n                    }\r\n\r\n                } else if (typeof cfg.groups[is_group]['ignore_link'] == 'undefined' || ! cfg.groups[is_group].ignore_link)  {\r\n                    link = cfg.groups[is_group].link;\r\n                    popup_id = cfg.groups[is_group]['popup_id'];\r\n                    is_group_info = true;\r\n                }\r\n                if (link=='#popup') {\r\n\r\n                    if (typeof SG_POPUP_DATA == \"object\") {\r\n                        if (popup_id in SG_POPUP_DATA) {\r\n\r\n                            SGPopup.prototype.showPopup(popup_id,false);\r\n\r\n                        } else {\r\n\r\n                            jQuery.ajax({\r\n                                type: 'POST',\r\n                                url: 'https:\/\/www.fla-shop.com\/blog\/' + 'index.php' + '?map_id=0' + '&usahtml5map_get_popup',\r\n                                data: {popup_id:popup_id},\r\n                            }).done(function(data) {\r\n                                jQuery('body').append(data);\r\n                                SGPopup.prototype.showPopup(popup_id,false);\r\n                            });\r\n\r\n                        }\r\n                    }\r\n                    else if (typeof SGPBPopup == \"function\") {\r\n                        var popup = SGPBPopup.createPopupObjById(popup_id);\r\n                        popup.prepareOpen();\r\n                        popup.open();\r\n                    }\r\n\r\n                    return false;\r\n                }\r\n                if (link == '#info') {\r\n                    var id = is_group_info ? is_group : (sid.substr(0,1)=='p' ? sid : map.fetchStateAttr(sid, 'id'));\r\n                    jQuery('#usa-html5-map-state-info_0').html('Loading...');\r\n                    jQuery.ajax({\r\n                        type: 'POST',\r\n                        url: (is_group_info ? 'https:\/\/www.fla-shop.com\/blog\/' + 'index.php' + '?map_id=0' + '&usahtml5map_get_group_info=' : 'https:\/\/www.fla-shop.com\/blog\/' + 'index.php' + '?map_id=0' + '&usahtml5map_get_state_info=') + id,\r\n                        success: function(data, textStatus, jqXHR){\r\n                            jQuery('#usa-html5-map-state-info_0').html(data);\r\n                            \r\n                        },\r\n                        dataType: 'text'\r\n                    });\r\n\r\n                    return false;\r\n                }\r\n\r\n                    if (ev===null && link!='') {\r\n                        if (!jQuery('.html5dummilink').length) {\r\n                            jQuery('body').append('<a href=\"#\" class=\"html5dummilink\" style=\"display:none\"><\/a>');\r\n                        }\r\n\r\n                        jQuery('.html5dummilink').attr('href',link).attr('target',(map.fetchStateAttr(sid, 'isNewWindow') ? '_blank' : '_self'))[0].click();\r\n\r\n                    }\r\n\r\n                };\r\n                usahtml5map_map_0.on('click',html5map_onclick);\r\n\r\n                \r\n\r\n            });\r\n            <\/script><div id='usa-html5-map-state-info_0' class='usaHtml5MapStateInfo'><\/div>\r\n            <\/div>\r\n            <div style='clear: both'><\/div>\r\n            <!-- end HTML5 Map -->\r\n    \n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">How to use this option?<\/h2>\n\n\n\n<p>By default, the shortcode for the map looks like this<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;usahtml5map id=\"0\"&#x200d;]<\/code><\/pre>\n\n\n\n<p>You can add a &#8220;select&#8221; attribute for example<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;usahtml5map id=\"0\" select=\"st11\"]<\/code><\/pre>\n\n\n\n<p>&#8220;st11&#8221; is an identifier of a state or country that determines that this state or country will be highlighted on a map. By default, this will be highlighted in red.<\/p>\n\n\n\n<p>If you want to use your own colors, then you can use any HEX colors, for example<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;usahtml5map id=\"0\" select=\"st11,#00ff00,#ff0000\"]<\/code><\/pre>\n\n\n\n<p>In the example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>st11 - state ID<br>#00ff00- default color<br>#ff0000- hover color<\/code><\/pre>\n\n\n\n<p>If you need to highlight several states at once, you can list the states&#8217; id separated by commas<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;usahtml5map id=\"0\" select=\"st11,st20,#00ff00,#ff0000\"]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">How to find out the state identifier?<\/h2>\n\n\n\n<p>On the tab &#8220;Detailed settings&#8221; you can find the ID for each state. The following screenshot shows where you can find it.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/08\/state-id.png\" alt=\"State ID\"\/><\/figure><\/div>\n\n\n\n<p>Also, you can export to CSV in the Tools tab and find the ID for all states at once.<br>We recommend using Open Office Calc to open CSV files.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/08\/csv.png\" alt=\"CSV with map settings\"\/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Feedback from our customer who uses this option<\/h2>\n\n\n\n<p>For the website the thefulcrum.eu we use the Europe map on the homepage and the same map on each country page. On the homepage, every country is white and has its own color on hover. (For example, Germany is green on hover). On each separate country page, we wanted the country in question to be highlighted in the relevant color (In the case of Germany: green) without having to make a separate map for each country.<br>By using the default shortcode for the map and adding the identifier for the country and the relevant HEX color on each separate country page this was very easy.<br>So by using this great option, it saved us a lot of work and we were able to easily create one beautiful map with its own unique character on lots of different pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In this post, we described in detail a simple solution for highlighting states in the US Map for WordPress plugin using a parameter in the shortcode.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"has-text-align-center\"><a class=\"greenbutton\" href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">Try U.S. map for WordPress for free<\/a><\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A detailed description of how to use the parameters in the shortcode to highlight the states.<br \/>\nA really useful feature, if you have separate pages for each state, and want to display a map of the United States, which highlights the particular state, information about which is published on the page. It also works for plugins with a world map, a map of Europe and others.<\/p>\n","protected":false},"author":1,"featured_media":1346,"comment_status":"open","ping_status":"open","sticky":false,"template":"post1.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-975","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to highlight different states on the map for WordPress<\/title>\n<meta name=\"description\" content=\"Undocumented plugin features. Using an parameter in a shortcode to highlight states in a US map. A working example using an attribute.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to highlight different states on the map for WordPress\" \/>\n<meta property=\"og:description\" content=\"Undocumented plugin features. Using an parameter in a shortcode to highlight states in a US map. A working example using an attribute.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/\" \/>\n<meta property=\"og:site_name\" content=\"Fla-Shop.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flashopcom\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-19T13:51:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-24T20:43:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/08\/3d-box-1200-630-facebook-ads2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flashop\" \/>\n<meta name=\"twitter:site\" content=\"@flashop\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\"},\"headline\":\"How to highlight different states on the map for different pages\",\"datePublished\":\"2019-08-19T13:51:57+00:00\",\"dateModified\":\"2022-05-24T20:43:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/\"},\"wordCount\":538,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/howto-highlight-1200-630-1.jpg\",\"articleSection\":[\"How-To\u2019s\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/\",\"name\":\"How to highlight different states on the map for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/howto-highlight-1200-630-1.jpg\",\"datePublished\":\"2019-08-19T13:51:57+00:00\",\"dateModified\":\"2022-05-24T20:43:25+00:00\",\"description\":\"Undocumented plugin features. Using an parameter in a shortcode to highlight states in a US map. A working example using an attribute.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/howto-highlight-1200-630-1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/howto-highlight-1200-630-1.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Example USA map with highlighted state\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/how-to-highlight-different-states\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to highlight different states on the map for different pages\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\",\"name\":\"Fla-Shop.com\",\"description\":\"Interactive Maps, HTML5, WordPress, Map Use-cases \u2013 Fla-shop.com blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\",\"name\":\"Fla-shop.com\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/fla-shop_twitter_logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/fla-shop_twitter_logo.jpg\",\"width\":128,\"height\":128,\"caption\":\"Fla-shop.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/flashopcom\\\/\",\"https:\\\/\\\/x.com\\\/flashop\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/flashopcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to highlight different states on the map for WordPress","description":"Undocumented plugin features. Using an parameter in a shortcode to highlight states in a US map. A working example using an attribute.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/","og_locale":"en_US","og_type":"article","og_title":"How to highlight different states on the map for WordPress","og_description":"Undocumented plugin features. Using an parameter in a shortcode to highlight states in a US map. A working example using an attribute.","og_url":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/","og_site_name":"Fla-Shop.com","article_publisher":"https:\/\/www.facebook.com\/flashopcom\/","article_published_time":"2019-08-19T13:51:57+00:00","article_modified_time":"2022-05-24T20:43:25+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/08\/3d-box-1200-630-facebook-ads2.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@flashop","twitter_site":"@flashop","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/#article","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/"},"author":{"name":"admin","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e"},"headline":"How to highlight different states on the map for different pages","datePublished":"2019-08-19T13:51:57+00:00","dateModified":"2022-05-24T20:43:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/"},"wordCount":538,"commentCount":0,"publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/08\/howto-highlight-1200-630-1.jpg","articleSection":["How-To\u2019s"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/","url":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/","name":"How to highlight different states on the map for WordPress","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/#primaryimage"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/08\/howto-highlight-1200-630-1.jpg","datePublished":"2019-08-19T13:51:57+00:00","dateModified":"2022-05-24T20:43:25+00:00","description":"Undocumented plugin features. Using an parameter in a shortcode to highlight states in a US map. A working example using an attribute.","breadcrumb":{"@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/#primaryimage","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/08\/howto-highlight-1200-630-1.jpg","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2019\/08\/howto-highlight-1200-630-1.jpg","width":1200,"height":630,"caption":"Example USA map with highlighted state"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fla-shop.com\/blog\/how-to-highlight-different-states\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.fla-shop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to highlight different states on the map for different pages"}]},{"@type":"WebSite","@id":"https:\/\/www.fla-shop.com\/blog\/#website","url":"https:\/\/www.fla-shop.com\/blog\/","name":"Fla-Shop.com","description":"Interactive Maps, HTML5, WordPress, Map Use-cases \u2013 Fla-shop.com blog","publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fla-shop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fla-shop.com\/blog\/#organization","name":"Fla-shop.com","url":"https:\/\/www.fla-shop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/06\/fla-shop_twitter_logo.jpg","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/06\/fla-shop_twitter_logo.jpg","width":128,"height":128,"caption":"Fla-shop.com"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flashopcom\/","https:\/\/x.com\/flashop","https:\/\/www.youtube.com\/user\/flashopcom"]},{"@type":"Person","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/comments?post=975"}],"version-history":[{"count":23,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/975\/revisions"}],"predecessor-version":[{"id":1597,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/975\/revisions\/1597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media\/1346"}],"wp:attachment":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media?parent=975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/categories?post=975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/tags?post=975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}