4

I'm new to qQuery and have not done a whole lot in javascript.

I've a small jVectorMap with about 10 countries on it and I want to draw a small pie chart on top of each country.

I see that you can create markers, but I can't see how you would assign custom markers to a country.

I am happy just to draw directly on top of the jVectorMap using a SVG plugin, but I can't seem to get that to work.

E.g. using the "jQuery SVG" plugin, I've tried to draw a circle on top of the map. Here's the code:

<html>
<head>
  <link rel="stylesheet" href="jquery-jvectormap-1.1.1.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="jquery.svg.css" type="text/css" media="screen"/>
  <script src="jquery-1.8.0.min.js"></script>
  <script src="jquery-jvectormap-1.1.1.min.js"></script>
  <script src="jquery-jvectormap-north-west-europe.js"></script>
  <script src="jquery.svg.min.js"></script>
  <script>
    function drawCircle(svg) { 
      svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3}); 
    }
  </script>
</head>
<body>
  <div id="europe-map" style="width: 400px; height: 400px"></div>
  <script>
    $(function(){
      $('#europe-map').vectorMap({
        map: 'north-west-europe',
        focusOn: {
        x: 0.3,
        y: 0.4,
        scale: 1.25
    },
      });
    });

    $('#europe-map').svg({onLoad: drawCircle});
  </script>
</body>
</html>

And here's the result:

What appears in the browser (Firefox 17)

Effectively, a duplicate div is created for the jQuery SVG "canvas" and the world map is pushed down. Is it possible to reference the SVG drawing space used by jVectorMap to draw stuff on?

Perhaps there is a better way to do this using custom markers or something like that?

Many thanks, and apologies if this is a silly question.

3 Answers 3

3

You need to use CSS to pull the two layers over the top of one another. Create the following HTML:

<div id="mapContainer" style="position:relative">
    <div id="europe-map" style="position:absolute;top:0px;left:0px"></div>
    <div id="europe-map-overlay" style="position:absolute;top:0px;left:0px"></div>
</div>

Now, instead of applying

$('#europe-map').svg({onLoad: drawCircle});

use

$('#europe-map-overlay').svg({onLoad: drawCircle});

instead.

This will put the circle on top of the map. If you want to put the circle on specific latitude-longitude coordinates, use the Jvectormap latLngToPoint() method to make the covnersion.

2

if you want not svg marker, use a new layer (div over the svg layer in the map)

Get reference to the map

map = $("#world-map-gdp").vectorMap('get', 'mapObject');

and use the function map.latLngToPoint() to locate the point in the new layer.

var newMarkerP = map.latLngToPoint(lat,lng);
$('#marker1').css('top',newMarkerP.x);
$('#marker1').css('top',newMarkerP.y); 

You can relocate the markers if make zoom or drag, use the same function and apply css left, and css top.

May be you can play with the top and left of the new markers, but is a easy solution.

1
  • Thanks, I'll try this and see how I get on Mar 12, 2013 at 19:38
0

You can use the JVectorMap API, the method to draw is addCircle.

1
  • I want to add pie charts, so I need more functionality than addCircle. Thanks though Mar 12, 2013 at 19:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.