Rendering map plugin in html

[eliottenos]

I've downloaded files required for the map plugin that Im using and requiring it from index.html

Docs say I need to implement the below in order to call the map files. I've pu tin my index.html but is not rendering on localhost. Would it make sure to add it all to a handlebars file and then call it from view.js upon sign in success?

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cssmapsplugin.com/5/jquery.cssmap.min.js"></script>
    <script type="text/javascript">
$(document).ready(function(){

// CSSMap;
$("#map-europe").CSSMap({
  "size": 1450,
  "tooltips": "floating-top-center",
  "responsive": "auto",
  "multipleClick": {
    "enable": true,
    "searchUrl": "search.php",
    "searchLink": "Search",
    "searchLinkVar": "region",
    "separator": "+",
    "hideSearchLink": false,
    "clicksLimit": 0
  }
});
// END OF THE CSSMap;
<!-- CSSMap - Europe -->
<div id="map-europe">
 <ul class="europe">
  <li class="eu1"><a href="#albania">Albania</a></li>
  <li class="eu2"><a href="#andorra">Andorra</a></li>
  <li class="eu3"><a href="#austria">Austria</a></li>
  <li class="eu4"><a href="#belarus">Belarus</a></li>
  <li class="eu5"><a href="#belgium">Belgium</a></li>
  <li class="eu6"><a href="#bosnia-and-herzegovina">Bosnia and Herzegovina</a></li>
  <li class="eu7"><a href="#bulgaria">Bulgaria</a></li>
  <li class="eu8"><a href="#croatia">Croatia</a></li>
  <li class="eu9"><a href="#cyprus">Cyprus</a></li>
  <li class="eu10"><a href="#czech-republic">Czech Republic</a></li>
  <li class="eu11"><a href="#denmark">Denmark</a></li>
  <li class="eu12"><a href="#estonia">Estonia</a></li>
  <li class="eu13"><a href="#france">France</a></li>
  <li class="eu14"><a href="#finland">Finland</a></li>
  <li class="eu15"><a href="#georgia">Georgia</a></li>
  <li class="eu16"><a href="#germany">Germany</a></li>
  <li class="eu17"><a href="#greece">Greece</a></li>
  <li class="eu18"><a href="#hungary">Hungary</a></li>
  <li class="eu19"><a href="#iceland">Iceland</a></li>
  <li class="eu20"><a href="#ireland">Ireland</a></li>
  <li class="eu21"><a href="#san-marino">San Marino</a></li>
  <li class="eu22"><a href="#italy">Italy</a></li>
  <li class="eu23"><a href="#kosovo">Kosovo</a></li>
  <li class="eu24"><a href="#latvia">Latvia</a></li>
  <li class="eu25"><a href="#liechtenstein">Liechtenstein</a></li>
  <li class="eu26"><a href="#lithuania">Lithuania</a></li>
  <li class="eu27"><a href="#luxembourg">Luxembourg</a></li>
  <li class="eu28"><a href="#macedonia">Macedonia <abbr title="The Former Yugoslav Republic of Macedonia">(F.Y.R.O.M.)</abbr></a></li>
  <li class="eu29"><a href="#malta">Malta</a></li>
  <li class="eu30"><a href="#moldova">Moldova</a></li>
  <li class="eu31"><a href="#monaco">Monaco</a></li>
  <li class="eu32"><a href="#montenegro">Montenegro</a></li>
  <li class="eu33"><a href="#netherlands">Netherlands</a></li>
  <li class="eu34"><a href="#norway">Norway</a></li>
  <li class="eu35"><a href="#poland">Poland</a></li>
  <li class="eu36"><a href="#portugal">Portugal</a></li>
  <li class="eu37"><a href="#romania">Romania</a></li>
  <li class="eu38"><a href="#russian-federation">Russian Federation</a></li>
  <li class="eu39"><a href="#serbia">Serbia</a></li>
  <li class="eu40"><a href="#slovakia">Slovakia</a></li>
  <li class="eu41"><a href="#slovenia">Slovenia</a></li>
  <li class="eu42"><a href="#spain">Spain</a></li>
  <li class="eu43"><a href="#sweden">Sweden</a></li>
  <li class="eu44"><a href="#switzerland">Switzerland</a></li>
  <li class="eu45"><a href="#turkey">Turkey</a></li>
  <li class="eu46"><a href="#ukraine">Ukraine</a></li>
  <li class="eu47"><a href="#united-kingdom">United Kingdom</a></li>
<!--
  <li class="eu48"><a href="#england">England</a></li>
  <li class="eu49"><a href="#isle-of-man">Isle of Man</a></li>
  <li class="eu50"><a href="#northern-ireland">Northern Ireland</a></li>
  <li class="eu51"><a href="#scotland">Scotland</a></li>
  <li class="eu52"><a href="#wales">Wales</a></li>
-->
 </ul>
</div>
<!-- END OF THE CSSMap - Europe -->

});

[benjimelito]

The first thing I would mention is that you don't need to add a script tag for jQuery, the browser template does that for you. I would also mention that adding script tags is tricky with the browser template, is there another way you can add a map to your app?

[eliottenos]

this plugin seems to give me some good options for what I want it to do...how tricky @benjimelito?

[benjimelito]

You will need to add to the webpack file in the template, take a look at this if you'd like to give it a shot: https://webpack.github.io/docs/using-plugins.html

[eliottenos]

are you about for a real quick 1:1 to see if Im gonna continue with this or change course? @benjimelito

[benjimelito]

Sure, one sec and I'll come by

[eliottenos]

did you have any luck finding those previous issues re this plugin issue pal? @MicFin

[MicFin]

Yes https://github.com/ga-wdi-boston/capstone-project/issues/573

[eliottenos]

@MicFin the above issue was a plugin that can be npm installed whereas by plugin, CSSMap, doesnt look like it can be installed. I've downloaded files provided by it and saved to my repo but still not sure how to have webpack preloaded when the templates are loaded. As far as I can see there needs to a third party plugin running it but not sure how?

[cpearce31]

Can you link to the docs for that plugin?

[eliottenos]

@cpearce31 cssmapsplugin.com/5/demo/

[cpearce31]

Do you get any console errors related to calling .CSSMap()? That might indicate whether the plugin is loading correctly.

[eliottenos]

yeah, Im getting this error in console GET http://localhost:7165/assets/scripts/cssmap-europe/cssmap-europe.css Uncaught ReferenceError: jQuery is not defined at eval (eval at (jquery.cssmap.min.js:11), :1:34456) at jquery.cssmap.min.js:11

[eliottenos]

@cpearce31 Im not even going to attempt to decode that function that has been provided. It continues along the lines of this

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(k($)

[cpearce31]

It appears then that the .CSSMap() function is getting called before jQuery is included. Have you tried calling that function from somewhere other than a Githubissues.

Githubissues is a development platform for aggregating issues.