Sign in to follow this  
HaighMob

Fusion Maps with Javascript

Recommended Posts

Is it possible to use only JS for the maps or will it always default to Flash?

Code as follows:

 

<html>
  <head>        
    <title>My First map using FusionMaps XT</title>     
    <script type="text/javascript" src="FusionCharts.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="FusionCharts.jqueryplugin.js"></script>
 
  </head>   
  <body>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!--         
       
      $(document).ready(function(){
          $("#mapContainer").insertFusionCharts({
               swfUrl: "FCMap_PapuaNewGuinea.swf",
               dataSource: "png_map.xml",
               dataFormat: "xmlurl",
               width: "750",
               height: "400",
               id: "myMapId"
         });

       });
      
    // -->     
    </script>      
  </body>
</html>
 

Share this post


Link to post
Share on other sites
Guest Sumedh

Hello,

 

FusionMaps can also be rendered in JavaScript mode.

 

FusionMaps XT allows to render maps in JavaScript variant as well.

 

To render JavaScript maps, all you need to do add necessary JavaScript libraries into your project folder along with map specific JavaScript file.

 

> FusionCharts.js

> FusionCharts.HC.js

> FusionCharts.HC.Maps.js

> jquery.min.js

> FusionCharts.HC.World.js (World map - map specific JavaScript file)

 

For more information, please refer the following link:

http://docs.fusioncharts.com/maps/Contents/?FirstMap/first_chart.html

Share this post


Link to post
Share on other sites

Hey,

 

JavaScript map are rendered by default when "type" property is used instead of "swfUrl"

$(document).ready(function(){
          $("#mapContainer").insertFusionCharts({
               type: "PapuaNewGuinea",
               dataSource: "png_map.xml",
               dataFormat: "xmlurl",
               width: "750",
               height: "400",
               id: "myMapId"
         });

Hope this helps.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this