hello, im making a web page with sparkle and im trying to import a interactive svg map that is javascript, i dont know how to put it in my page.
the map was created with MapSVG
Hi @tomigambi ,
1st things 1st! - Welcome to the community, hope it will help you moving forward
using the Sparkle Website Builder app.
Would you be so kind and share code instead of the screenshots?
(or point us the source of the code)
sorry, here it is.
Add links to files into < head > </ head >
<link href="/mapsvg/css/mapsvg.css" rel="stylesheet">
<link href="/mapsvg/css/nanoscroller.css" rel="stylesheet">
<script src="/mapsvg/js/jquery.js"></script>
<script src="/mapsvg/js/jquery.mousewheel.min.js"></script>
<script src="/mapsvg/js/jquery.nanoscroller.min.js"></script>
<script src="/mapsvg/js/mapsvg.min.js"></script>
Add this code to the container where you want to show your map:
<div id="mapsvg"></div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#mapsvg").mapSvg({width: 500,height: 500,colors: {baseDefault: "#000000",background: "#183cbd",selected: 40,hover: 20,directory: "#fafafa",status: {},base: "#189616"},viewBox: [1.569,10.195,500,500],gauge: {on: false,labels: {low: "low",high: "high"},colors: {lowRGB: {r: 85,g: 0,b: 0,a: 1},highRGB: {r: 238,g: 0,b: 0,a: 1},low: "#550000",high: "#ee0000",diffRGB: {r: 153,g: 0,b: 0,a: 0}},min: 0,max: false},source: "/mapsvg/maps/user-uploads/Untitled%20(1).svg",title: "Untitled%20(1)",responsive: true});
});
</script>
I presume you’re referring to the jQuery plugin of MapSVG 
?
available for purchase at CodeCanyon
BTW
Have you checked the following Sparkle documentation:
• Developer Tools
• Advanced Editing
• Smart Fields - Code Snippet:
The Code Snippet Smart Field is used to insert generic Javascript or PHP code in a text field, its part of the developer tools.
1 Like