Create Map Network
Last updated
Last updated
After Import Demo data, You will see demo like here
Step 1: Go to Plugins >> Image Map Pro >> Add New
Step 2: Import Data. Find demo data in theme/install-resource/demo-import/Image-Map-Pro/ folder
You can find code bellow:
{"id":6310,"editor":{"selected_shape":"oval-3203","tool":"oval","shapeCounter":{"ovals":3}},"general":{"name":"Network","shortcode":"Network","width":1291,"height":633,"naturalWidth":1291,"naturalHeight":633,"center_image_map":1},"image":{"url":"http://ovapt.com/transflash/wp/wp-content/uploads/2021/12/our-network.png"},"tooltips":{"constrain_tooltips":0,"fullscreen_tooltips":"none"},"spots":[{"id":"oval-586","title":"Oval 1","type":"oval","x":24.516,"y":38.23,"width":2.31,"height":5.002,"x_image_background":24.516,"y_image_background":38.23,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-831881","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"New York, United states"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-9608","title":"Oval 2","type":"oval","x":18.087,"y":40.442,"width":2.31,"height":5.002,"x_image_background":18.087,"y_image_background":40.442,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-546011","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Texas , United states"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-3803","title":"Oval 3","type":"oval","x":21.185,"y":32.069,"width":2.31,"height":5.002,"x_image_background":21.185,"y_image_background":32.069,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-440691","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Michigan , United states"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-1922","title":"Oval 4","type":"oval","x":12.045,"y":22.274,"width":2.31,"height":5.002,"x_image_background":12.045,"y_image_background":22.274,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-105011","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Wrigey , Canada"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-6691","title":"Oval 5","type":"oval","x":34.431,"y":8.846,"width":2.31,"height":5.002,"x_image_background":34.431,"y_image_background":8.846,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-887091","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Greendland"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-596","title":"Oval 6","type":"oval","x":52.479,"y":54.976,"width":2.31,"height":5.002,"x_image_background":52.479,"y_image_background":54.976,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-167771","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Khartoum , Sudan"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-566","title":"Oval 7","type":"oval","x":29.938,"y":69.194,"width":2.31,"height":5.002,"x_image_background":29.938,"y_image_background":69.194,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-360221","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Rioduorado , Brazil"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-5374","title":"Oval 8","type":"oval","x":81.217,"y":24.96,"width":2.31,"height":5.002,"x_image_background":81.217,"y_image_background":24.96,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-290061","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Beijing , China"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-1081","title":"Oval 9","type":"oval","x":74.246,"y":50.71,"width":2.31,"height":5.002,"x_image_background":74.246,"y_image_background":50.71,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-785461","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Mandalay , Myanmar"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-3747","title":"Oval 10","type":"oval","x":82.611,"y":75.986,"width":2.31,"height":5.002,"x_image_background":82.611,"y_image_background":75.986,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-502561","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Yulara , Australia"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-4429","title":"Oval 11","type":"oval","x":72.077,"y":37.914,"width":2.31,"height":5.002,"x_image_background":72.077,"y_image_background":37.914,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-903851","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Qinghai , China"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-2025","title":"Oval 12","type":"oval","x":65.725,"y":35.702,"width":2.31,"height":5.002,"x_image_background":65.725,"y_image_background":35.702,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-477171","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Bishkek , Kyzgyzstan"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-1159","title":"Oval 13","type":"oval","x":66.422,"y":23.696,"width":2.31,"height":5.002,"x_image_background":66.422,"y_image_background":23.696,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-528331","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Vakhovsk , Russia"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}},{"id":"oval-3203","title":"Oval 14","type":"oval","x":57.437,"y":28.119,"width":2.31,"height":5.002,"x_image_background":57.437,"y_image_background":28.119,"width_image_background":2.31,"height_image_background":5.002,"default_style":{"opacity":0,"background_color":"#47bf6f","background_opacity":0.33},"mouseover_style":{"background_color":"#47bf6f","background_opacity":0.19},"tooltip_style":{"border_radius":2,"padding":7,"background_color":"#ffffff","width":103,"auto_width":0},"tooltip_content":{"squares_settings":{"containers":[{"id":"sq-container-969351","settings":{"elements":[{"settings":{"name":"Paragraph","iconClass":"fa fa-paragraph"},"options":{"heading":{"text":"My Shape"},"text":{"text":"Voronezh , Russia"},"layout":{"box_model":{"padding":{"top":0,"bottom":6,"left":0,"right":0}}},"font":{"font_family":"raleway","font_weight":"500","text_color":"#000000"}}}]}}]}}}]}Step 3: Edit Map
Step 3.1: Choose a Map to edit
Step 3.2: Change Image
Step 3.3: Create and edit content
