Support for Supply Chain Interactive - WordPress Maps Plugin

Wpicode

Wpicode supports this item

Supported

This author's response time can be up to 1 business day.

Popular questions for this item

Can I change the card (tooltip) when you hover over a location?

Yes, when adding new item the title of the card (tooltip) is the Name field, and the text is the Description field.

How do I start?

First you need to add Name and Description of the supply chain. After this start adding your items (locations) according to a pre-defined order (supplier->manufacturer->retailer). When you add All items you need to adjust the map, just select the country or region you want. Then you can adjust the dots and create new lines.

How do I add a play button, instead of the automatic start of the animation?

A play button is created in the Shortcode. After you complete your supply chain, go in Supply Chains > Shortcodes and use the Shortcodes Generator. There you can see a play button dropdown. Select to show it.

Can I setup a map focused on my country with different provinces in different colors?

Yes Google Charts already has this functionality and S.C.I. use it to get distinct colors for each country, province or metro.

Is my country listed in the Supply Chain Interactive plugin?

All countries are listed with Google Charts and also regions, you can check them out right here.

How can I change the default Google boxes into circles and add a link to the boxes of the Classic Chart?

The Classic chart is generated through the Google Charts API. If you want you can edit the CSS style (supply-chain-interactive/css/sci_style.css line 395):

.sci-classic-container table td div.sci-classic-large{
  border-radius: 100px !important;
    height: 160px !important;
    min-width: 150px;
    padding: 5px;
}

You will also need to overwrite the default Google styles:

.google-visualization-orgchart-node, .google-visualization-orgchart-nodesel{
 border:none !important; background:none !important;
}

And for a link change line 117 from supply-chain-interactive/inc/views/classic.php to :

    $chartArray .= ' [{v:\''.$data->sci_id.'\', f:\'<div class="sci-bg-'.$theme.' sci-current-'.$theme.' hidden-xs hidden-sm sci-classic-large" onclick="window.location.assign(\''.$data->sci_link.'\')"><i class="fa fa-'.$data->sci_icon.'" /><h3 class="sci-current-'.$theme.'">'.$data->sci_name.'</h3>'.$desc.'</div><div class="hidden-md hidden-lg sci-class-item-mobile sci-bg-'.$theme.' sci-current-'.$theme.' ">'.$data->sci_name.'</div>\'}, \''.$chartOrder.'\', \''.$data->sci_name.'\'],';        

That’s it!

Can I add custom push pins to the Map layout?

Regarding custom push pin images, you can add theme to the supply-chain-interactive/css/sci_style.css style file on line 289, add the custom pin image link, and adjust the height,width and border-radius:

.sci-ball {
background: url('http://www.YourSite.com/wp-content/uploads/2015/02/CustomPinkImage.png') no-repeat center center !important;
    border-radius: 0px !important;
    height: 50px;
    position: absolute;
    width: 10px;
    z-index: 99;
}

Don’t forget the !important at the end of the style rules so that they override the current css. Also you may need to put the custom pins in the admin area (supply-chain-interactive/css/admin.css line 83):

    .ball{
            background: url('http://www.YourSite.com/wp-content/uploads/2015/02/CustomPinkImage.png') no-repeat center center !important;
    border-radius: 0px !important;
    height: 50px;
    width:10px;
    position:absolute;
    z-index:99;
    }

Awesome Plugin! I have a few pre-sale questions:

For the Maps

1. Can I change the pin image and line? – For the pin circle I would like to change it to a logo I have. – The line I would like to change to dotted lines to resemble a road.

2. I would to change the content that is displayed when I hover over a pin. – I want to show a image for each pin point on hover.

1. Yes you can change supply-chain-interactive/css/sci_style.css on line 280 to make the line into dots:
.sci-line {
    border-top: 2px dotted white;
    height: 0;
    position: absolute;
    width: 0;
}
(change white for dot color into whatever color you want) For the logo pin change line ~289:
.sci-ball {
background: url('http://www.YourSite.com/wp-content/uploads/2015/02/YOURLOGO.png') no-repeat center center !important;
    border-radius: 0px !important;
    height: 50px;
    position: absolute;
    width: 10px;
    z-index: 99;
}
2. In supply-chain-interactive/views/map.php change line 475-479 to:
<a href="'.$data->sci_link.'" class=" sci-current-'.$theme.'" target="'.$data->sci_target.'"><img src="'.$data->sci_path.'" border="0" /></a>

Show more

Contact the author

This author provides limited support for this item through this item's comments.

Item support includes:

  • Availability of the author to answer questions
  • Answering technical questions about item’s features
  • Assistance with reported bugs and issues
  • Help with included 3rd party assets

However, item support does not include:

  • Customization services
  • Installation services

View the item support policy

by
by
by
by
by
by