carmoreira
/ click.js
Created Apr 14, 2021
Interactive Geo Maps - Intercept regions click to run custom code
View click.js
| let mapID = 2755; | |
| iMaps.maps[mapID].series[0].mapPolygons.each(function(region){ | |
| region.events.on("hit", function(ev) { | |
| let data = ev.target.dataItem.dataContext; | |
| let region = data.id; | |
| // do whatever you want here | |
| }, this); | |
| }); |
View style.css
| /* Consider they are SVG shapes, so rules are limited */ | |
| /*home button*/ | |
| .imapsZoomControl path.imapsSprite { | |
| fill:#FFF !important; | |
| } | |
| /* buttons background*/ | |
| .imapsZoomControl path { | |
| fill:#6699cc !important; |
View guadeloupe.geojson
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
carmoreira
/ script.js
Created Mar 5, 2021
Create Button to clear content that displays after map is clicked - Interactive Geo Maps
View script.js
| // this assumes there's at least one element on the page with the class clear_map_info | |
| document.querySelectorAll('.clear_map_info').forEach( | |
| function(button) { | |
| button.addEventListener('click', function(event) { | |
| // If the clicked element doesn't have the right selector, bail | |
| if (!event.target.matches('.clear_map_info')) return; | |
| // Don't follow the link |
View click.js
| jQuery('li.quiz_unselected_answer').each(function(){ | |
| jQuery(this).on('click',function(){ | |
| jQuery(this).find('label').trigger('click'); | |
| }); | |
| }); |
View style.css
| .igm_content_right_1_3 { | |
| overflow-y:scroll; | |
| padding:15px; | |
| max-height:400px; | |
| border-bottom: 1px solid #f1f1f1; | |
| } | |
| .igm_content_right_1_3::-webkit-scrollbar { | |
| -webkit-appearance: none; | |
| width: 7px; | |
| } |
View style.css
| /* or only outline: none; */ | |
| g.imapsMapImage-group[style="cursor: pointer; outline: none;"] image { | |
| outline: 1px solid red; | |
| } |
carmoreira
/ gist:91222771e4eddd2336e4b38d70307a75
Created Feb 11, 2021
Get external JSON and populate map with it in PHP - Interactive Geo Maps
View gist:91222771e4eddd2336e4b38d70307a75
| add_filter( 'igm_add_meta', 'igm_custom_meta', 1 ); | |
| function igm_custom_meta( $meta ){ | |
| //fetch content from url - if possible improve code to cache results | |
| $url = 'https://myjsonurl'; | |
| $request = wp_remote_get( $url ); | |
| if ( ! is_wp_error( $request ) ) { | |
| $meta['iconMarkers'] = $request['body']; | |
| } |
carmoreira
/ data.json
Created Feb 11, 2021
Example of Data from Interactive Geo Maps - With Vector Icons
View data.json
| { | |
| "map":"worldLow", | |
| "mapURL":"https://www.amcharts.com/lib/4/geodata/worldLow.js", | |
| "usaWarning":"", | |
| "projection":"Miller", | |
| "albersUsaWarning":"", | |
| "description":"", | |
| "populateFromGeo":"", | |
| "populateFromGeoSingle":"", | |
| "grid":{ |
View gist:94838bf43cc99ce6a0f6c758d521f22e
| //advqEmailScreen | |
| //advqPadvisorDoneEvent | |
| jQuery(".advq_quiz_wrap").on("advqPadvisorDoneEvent", function() { | |
| //your tracking code. | |
| }); |
NewerOlder