Step by step to create a simple map and embed it into a web page

  • step 1: Create a web page

    • First of all we need a plain HTML page that contains a Flash object, and place it to some folder on your web site or local folder, Below we've done it, creating a test folder in (your installed folder)/firstExample with the following structure:
    /DN_World_Map.swf /* the Map displayed by a single swf file, can copy from "../maps/DN_World_Map"*/
    /js/mapone_swf.js /*to embed a map into a web page we’ll use swfobject JavaScript Integration Library. can copy from "../code/js"*/
    /DN_World_Map.xml /*the map accepts all data needed to show the map in a single XML File. The structure of this file will be explained later. can copy from "../maps/DN_World_Map"*/
    /DN_World_Map.html/* a page where map will be displayed; this page can be HTML, ASP, ASP.NET, CF, PHP, CGI, Perl (or any other scripting language capable to produce HTML output).*/
  • step 2: Setting map data and visual style

    • Open the DN_World_Map.xml with any text editor. Insert your data into it.
    Example, Set the "Asia" color to red("#FF0000"):
    <region_list>
    ...
    <region id="DN_AS" name="Asia" ... color="#FF0000" ... />
    ...
    </region_List>
    Set the "Asia" link URL to "http://www.flash-map-one.com":

    <region_list>
    ...
    <region id="DN_AS" name="Asia" ... link="http://www.flash-map-one.com" ... />
    ...
    </region_List>
    save the XML file. more about XML setting please chceck the "FAQ" and "Customization and XML" section.
  • step 3: HTML File structure

    • Here is the code you should paste in DN_World_Map.html (just open it in any text editor and copy-paste the code):

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>FlashMapOne First Sample</title>
    <script type="text/javascript" language="javascript" src="/js/mapone_swf.js"></script>
    </head>
    <body>
    <div id="flashcontent">
    <strong>You need to upgrade your Flash Player</strong>
    This is replaced by the Flash content.
    </div>

    <script type="text/javascript">
    // <![CDATA[

    var so = new SWFObject("DN_World_Map.swf", "sotester", "750", "400", "9", "#FFFFFF");
    so.addVariable("xmlvariable", "DN_World_Map.xml");
    so.write("flashcontent");

    // ]]>
    </script>
    </body>
    </html>

    the map will show in div "flashcontent", the code "var so = new SWFObject("DN_World_Map.swf", "sotester", "750", "400", "9", "#FFFFFF")" set the map is DN_World_Map.swf, width is 300, height is 400, backgound color is "#FFFFFF". the code "so.addVariable("xmlvariable", "DN_World_Map.xml"); " sets the xml file be "DN_World_Map.xml".
  • step 4: Final

    • Now we should launch our html page in a web browser, in our case we can use:
    (your installed folder)/firstExample/DN_World_Map.html
    If everything was done exactly as described above, you will see the following map:
    You can open this sample from here: Open the Simple Map Sample
    You can open folder with sample files from here: Open Folder With Sample