Hi Everyone,
I’m trying to create an interactive map using this resource: Interactive Map of North Carolina [Clickable Counties / Cities]
The HTML code is around 70,000 characters because the map is SVG—it’s way too much for the HTML embed character limit. Any suggestions for how to do this?
hey @fmcausby
you might want to host the script externally and then just reference it where you need it to appear.
Similar issue here;
Thanks @AlexManyeki! So I’m able to host the scripts and CSS in my dropbox and call them. This may be a silly questions, but how would I call HTML that’s hosted externally on my dropbox in Webflow?
I would not suggest hosting on dropbox and such. Seriously impacts load times.
Try to host on cdnjs.com or jsdelivr. (google and see how to)
to use that script in your webflow project. You would just need to drop a html embed where you need it to appear and reference the script like this;
<script src="//cdnjs.com/path-to-your-script.js" type="text/javascript"></script>
Thats all.
Awesome, thanks for the tip. So my only remaining problem is that for these maps, I have to paste HTML into the page. The problem is the HTML includes some SVG code that’s super long (70,000 characters) so I’m not able to just paste it into a HTML embed in Webflow.
Is there a way to link to this HTML similar to the way I’m linking to JS and CSS? Looking at this W3 method for including HTML: How To Include HTML Am I on the right track?
Sure. For html, this will work. Let me know how it goes.
Hm. Still struggling. Here is my public site: https://preview.webflow.com/preview/forrests-sandbox?preview=f381ab4d3e21cbf4c8b8be67c8f2de07
I’ve put all the JS and CSS and one html file into dropbox for now (I’ll look at a better alternative for hosting/calling next).
I’ve called the JS and CSS in the head of the page.
I’ve used the W3 method to try and call the HTML snippet from dropbox.
And I’m not seeing anything. Probably an amateur mistake here…any ideas?
Yeah,
Its in the way you are calling your dropbox links;
replace all www.dropbox.com references with dl.dropboxusercontent.com. The former is a sharing link to the download page and not to the raw file itself;
For instance;
https://dl.dropboxusercontent.com/s/dri77wfcftmkyu4/map-interact.js is the correct reference to map interact.js
See more info here;
It works! Can’t thank you enough @AlexManyeki, much appreciated!
Great to know. Enjoy.
@AlexManyeki, you mentioned above to host the scripts on CDNJS or jsdelivr instead of dropbox. I have these scripts, as well as the HTML file and some video. Could I host these on my own website and call it from there? Any issues you see with that?
None at all. Do you plan to export the site or host with webflow?
I’m hosting this site with Webflow. The other website is hosted elsewhere and I have FTP access. I noticed Webflow just added hosting for documents which I’ve been hoping for. Maybe one day they’ll have a way to do this sort of thing without going outside Webflow.
Thanks again for all the help @AlexManyeki!
Very Welcome @fmcausby
@AlexManyeki, sorry to both you again with this. I’m trying to get this to work.
First of all, I’m trying to use a link from my own website for the HTML snippet (as mentioned above). For some reason I can get the map to show up on the published site when I pull the snippet from Dropbox, but not from my own site. The link to my own site works (if you open it in another window, you can see the map) and nothing else about the code has changed.
Secondly, the javascript and CSS aren’t working. The map should have dots and county rollovers but it’s not showing up. What is really strange is that occasionally it WILL work. I won’t change a thing and come to the page and it works. It’s just very unpredictable.
My public site is here, the HTML embed pulling the map is on the page called “Chapter 2” about halfway down. I currently have one embed pulling the snippet from dropbox, another one trying to pull it from my website.
Any ideas?
So strange, not the map isn’t loading at all, either from dropbox or my own site. I’m worried about how finicky this is, I want to make sure it’s more reliable on the final site. I’m wondering now if it’s just a speed thing. Perhaps it’s just loading really slowly.
Hey @fmcausby
the w3.includeHTML(); tag should be called in the footer and not within the script itself;
the embed code should only have;
<div w3-include-html="http://www.mcreative.net/client/zsr/code/map.html"></div>
The script that calls this html;
<script> w3.includeHTML(); </script>
should be included only once in the footer section of custom code (before </body>). This should work but let me know of the outcome.
Thanks Alex, I did that and the Dropbox version still works but the one to my website still isn’t working.
Right now I can pull the HTML snippet from Dropbox, but not from my site.
And I can’t pull the javascript from either. (Or maybe it’s just so slow it takes forever to show up? I am calling a lot of JS.)
Huh. I ran a speed test at Pingdom. (You’re right the dropbox content loaded very slowly.)
I noticed that the map.html I’m pulling from my site had an error.
From what I could see the JS from my site is loading with no trouble, I think?
It’s also strange that in the source for the published site the dropbox include shows up as all the code from the HTML file I’m pulling. The include from my site simply has the HTML embed code from dropbox. For some reason it’s not firing. I wonder if it has something to do with my link or with where my site other site is hosted.
Wondering if the following errors make sense to anyone out there?
I think this has to do with cross domain requests… I dont know much about this but the issue is easily resolved by using a secure CDN.
The hosted html will not load from some domains until those permissions are explicitly declared.
See here for some reading material;
https://stackoverflow.com/questions/17874730/how-to-make-cross-domain-request
