Show Regions code by default #84

Closed
juliocastrop opened this Issue Jul 31, 2013 · 10 comments

Comments

Projects
None yet
8 participants

Hi! first of all I want to congratulate you for this great job that you have done! It's a great project and I have a couple of questions that you probably could help me solving on implementing jqvmap:

  1. I need to show the region code for the US map by default, (not when mouseover), any idea of how to do it? The idea is to load the map and show each state code like CA, GA, NY, etc.. over each region..
  2. Also, I'm trying to get it work with a responsive design layout like Bootstrap, do you have any support for this? if yes have some example of how to do it?

I appreciate all help and support that you can provide me.

Thanks a lot!

I need to show the region code for the map by default

Me too. Tnx!

corgato commented Oct 18, 2013

Me too. Tnx! :)

scrooph commented Oct 19, 2013

u can add region code position in the map data. then add text for svg or div for vml, please notice the scale for vml

corgato commented Oct 19, 2013

Please can you detail your solution

scrooph commented Oct 23, 2013

1, i have tried to add the region code to the appropriate position, at first i try to calculate it from the data provided with the map data js, then finding which is not well when the region has many data points. so i suggest to add them by yourself, and the performance will be well. you can add them to the map data js, for example "name":"Russian Federation","namepos":"600,130" (the world map)
2, firefox chrome IE9 suppprt svg but IE8/7 support vml only
so if u want to gear the code, u will face this problem, according the method for implmenting jvmap svg use text mark but vml use div. Provided position, u can be easy to implement svg text. but it make u care about scale to implement vml, because div position is absolute ,which is not fixed to the map

ShaneG commented Jul 10, 2014

@juliocastrop Did you ever figure out how to make this map responsive with bootstrap?

I also want to do something like this -
Is there any way I can show two digit ISO country code to a all the states in US map, I've -
"enableZoom: false" option selected
I have a div with height and width - width: 800px; height: 500px;. Need urgent help.

you can use http://jvectormap.com/, an example here http://jvectormap.com/examples/region-labels/

      $(function(){
        var map = new jvm.Map({
          map: 'your-map',
          container: $('#map'),
          backgroundColor: '#fff',
          regionsSelectable: true,
          regionsSelectableOne: true,
          regionStyle: {
            initial: {
              fill: '#DBDBDB',
              "fill-opacity": 1,
              stroke: 'black',
              "stroke-width": 0.5,
              "stroke-opacity": 1,
            },
            hover: {
              fill: '#E6165C',
              cursor: 'pointer'
            },
            selected: {
              fill: '#E6165C'
            }
          },
          series: {
            regions: [{
              values: {
                'NL': '#A8A8A8',
                'SW': '#A8A8A8',
                'AT': '#A8A8A8'
              },
              attribute: 'fill'
            }]
          },
          regionLabelStyle: {
            initial: {
              'font-weight': 'normal',
              'text-align': 'right',
              fill: 'white'
            },
            hover: {
              fill: 'white'
            }
          },
          labels: {
            regions: {
              render: function(code){
                var doShow = ['NL', 'SW', 'AT'];
                var Countries = ['NL', 'Schweiz', 'Österreich']

                var index = doShow.indexOf(code);
                if ( index> -1) {
                  return Countries[index];
                }
              }
            }
          },
          onRegionClick: function (event, code) {
            alert(code);
          }
        });

@manifestinteractive manifestinteractive added a commit that referenced this issue Dec 6, 2015

@manifestinteractive manifestinteractive Adds support for Feature Request #84 but adding a `showLabels` config…
… option. There is also a new labels.html file in the examples directory to show you how to tweek any labels not quite rendering correctly. Unit test to verify labels were added correctly have also been completed.
ceec508

This feature request is now ready for testing in https://github.com/manifestinteractive/jqvmap/tree/issue-84

This new branch adds support for Feature Request #84 but adding a showLabels config option. There is also a new labels.html file in the examples directory to show you how to tweak any labels not quite rendering correctly. Unit test to verify labels were added correctly have also been completed.

I will merge it into master in a few days if no one tests it, but wanted to give those in this ticket the ability to give it a go before hand.

There is now a PR for this at #185

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment