Country map display

cdevl3749 · September 6, 2024, 4:21pm

Good morning,

I’m testing some source code that I have and I don’t see why it doesn’t display the map?

https://codepen.io/aaashpnt-the-sans/pen/gONZovM

m_hutley · September 6, 2024, 4:36pm

because “cssMap” isnt a default javascript function, and you havent loaded the javascript file that presumably contains that function into Codepen? Or for that matter, what appears to be jQuery given the structure of that JS you do have in there.

cdevl3749 · September 6, 2024, 4:49pm

ah ok I found it on the internet here and I see that it works and not for me.
Should I add something?

https://codepen.io/JonasSkjodt/pen/XXpRob

m_hutley · September 6, 2024, 4:50pm

So if you go to that codepen, and click on the little cogwheel in the JS panel, you can see its loading two external scripts:
https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js (AKA Jquery 1.11, not really recommended but…)
http://cssmapsplugin.com/4/jquery.cssmap.js (The cssMap library)

cdevl3749 · September 6, 2024, 5:09pm

ok thank you and in my code I must indicate this or exactly? and in which src tag?

m_hutley · September 6, 2024, 5:11pm

If you’re doing it on codepen, do it the same way they did. If you’re doing it on a webpage, you’ll need to load them via <script> tags, pointing the src to the correct location for each.

cdevl3749 · September 6, 2024, 5:16pm

I tried like this at the end just before and it doesn’t work

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cssmapsplugin.com/4/jquery.cssmap.js "></script>

m_hutley · September 6, 2024, 5:22pm

is that before or after the other block of javascript that requires jquery?

cdevl3749 · September 6, 2024, 5:27pm

I indicated like this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
    <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="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>
        <script src="script.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="http://cssmapsplugin.com/4/jquery.cssmap.js "></script>
    </div>
</body>

</html>

rpg_digital · September 6, 2024, 5:30pm

If you are doing this in codepen, you should not be putting in html, and head tags

Your html should look like this

<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="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>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://cssmapsplugin.com/4/jquery.cssmap.js'></script>

Anything in the html portion of codepen is implicitly put inside of the body.

If you need to add code to your head you do that within settings

m_hutley · September 6, 2024, 5:34pm

cdevl3749:

<script src="script.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="http://cssmapsplugin.com/4/jquery.cssmap.js "></script>

put script.js last.

cdevl3749 · September 6, 2024, 5:36pm

it works now thank you very much

m_hutley · September 6, 2024, 5:38pm

gotta put the thing that provides the hammer and the nails before the thing that says “hammer the nails”

cdevl3749 · September 6, 2024, 6:27pm

locally it works but if I deploy it on the web I have the same problem.

m_hutley · September 6, 2024, 6:31pm

Can you show us the page on the web?

cdevl3749 · September 6, 2024, 7:03pm

https://cdevlmap.netlify.app/

m_hutley · September 6, 2024, 7:15pm

So either the cssmap js needs to be referred via an https address, or you’ll have to (if you trust it), download a local copy and put it on your site for referencing.

For clarity: The browser doesnt like a Secured site (Your site’s address is https://) referencing an unsecured (http://) javascript file. It is refusing to load the javascript for that reason.

cdevl3749 · September 7, 2024, 6:31pm

I am unable to retrieve the source code of the two links by copy and paste

m_hutley · September 7, 2024, 8:19pm

So when you point to that address in your browser, what happens?

cdevl3749 · September 8, 2024, 2:32pm

I have the source code which is showing the problem I am unable to copy it