Datamaps : Dynamically loading a map based on url parameter.

There are quite a number of data Visualisation tools in the market. Most of them are derived from the same source "D3.js". D3.js is "Data-Driven Documents". Derived from D3js is "Datamaps". It's a very good library for plotting quick maps. I have a problem statement wherein I want to plot different map based on the URL query.

If the URL query has "USA" in it, I need to plot a USA graph. If the URL has "world" or no map information, I need to plot "World map". After searching the Internet for information on how to achieve this, I finally wrote this piece of code which will achieve this.

Code:

Script imports. I am using Jade syntax for importing. As you can see here, I have both World map as well as the usa.js.

script(src="/javascripts/d3.v3.min.js")
script(src="/javascripts/topojson.v1.min.js")
script(src="/javascripts/d3-queue.v3.min.js")
script(src="/javascripts/datamaps-usa.js")
script(src="/javascripts/datamaps.world.mod.js")
script(src="/javascripts/datamaps-all.js")

This piece of code generally does not work. I am not able to both World map, as well as another map on the same page. There happens a conflict of the variable between both the maps.

Soi decided to Keep all the map based .js files in inside a folder. WhenEver I navigate to a page, I pick the right js and dynamically load it into the page.

Following a piece of code is used for initializing a map element.

var map = new Datamap({
    scope: 'world',
    element: document.getElementById('canvas'),
    projection: 'mercator',
    height:900,
    width:null,
    responsive: true,
    geographyConfig: {
        hideAntarctica: true,
        hideHawaiiAndAlaska : false,
        borderWidth: 1.5,
        borderOpacity: 0,
        borderColor: '#ffffff'
    }, .... [truncated]

The above code displays world map inside "canvas" element. This element will dynamically change when I am loading the USA. Need to set "Scope" as "USA". You can download more versions of country maps from this location. (https://github.com/markmarkoh/datamaps/tree/master/dist)

Below script keeps monitoring the URL and changes the script element based on the URL pattern.

Script:

script.
    if ((window.location.href).indexOf("country=USA") > 0) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/javascript/datamaps-usa.js";
    } else {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/javascript/datamaps-world.js";
    }

This script basically, checks if the pattern "country=usa" is found in the URL. if so, it loads datamaps-usa.js. Else, it loads default world map.