NOTICE: is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum

Ive created a world map using JVectorMap and am wanting to open a box using Shadowbox.js displaying various information about each highlighted country - In this example it's specifically MENA countries.

The map works and the pop-up works but my div

is not displaying at all, I am getting an error: "It may have been moved, edited or deleted."

Heres my code:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="shadowbox.css">
  <link rel="stylesheet" href="jquery-jvectormap-2.0.5.css">

  <script src="" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

  <script src="jquery-jvectormap-2.0.5.min.js"></script>
  <script src="jquery-jvectormap-world-mill-en.js"></script>
  <script src="shadowbox.js"></script>
  <script type="text/javascript">
    language: 'en',
    players: ['iframe','html']

  <div id="world-map" style="width: 600px; height: 400px"></div>
  <script type="text/javascript">


      var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'];

        map: 'world_mill_en',
        zoomMax: 20,
        backgroundColor: '#505050',
        regionStyle: {
          initial: {
            fill: '#F6F5F4'
          hover: {
            fill: '#F6F5F4',
            "fill-opacity": 1
          selected: {
            fill: '#7B8B9B'
          selectedHover: {
            cursor: 'pointer',
            fill: '#002142'
        selectedRegions: ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'], onRegionClick: function (event, code) {
          if($.inArray(code,codes) > -1) {
              content:    '<div>TEST</div>',
              title:      "MENA",
              player:     "iframe",
              height:     400,
              width:      640


Further down the line Id like to have a different message for each code but for now I'd just like to get this working.

Any help appreciated.

asked 10 Nov '22, 07:23

veerablog's gravatar image

accept rate: 0%


How is this related to OpenStreetMap?

(10 Nov '22, 14:36) scai ♦

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here



Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text]( "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:


question asked: 10 Nov '22, 07:23

question was seen: 834 times

last updated: 10 Nov '22, 14:36

NOTICE: is no longer in use from 1st March 2024. Please use the OpenStreetMap Community Forum