A JS Integrate With All Countriesn Provinces States SVG World Maps

SVG World Map JS is a JavaScript library to easily integrate one or more SVG world maps with all countries and second-level political subdivisions (countries, provinces, states).

Use this map and library as a standard template for a strategy game, as a data visualization choropleth map for scientific and statistical data, or as an interactive map for your article, paper, website, or app.

This is just a small library (with a large world map) for quick and easy viewing of data. If you need more advanced features for data visualization and SVGs, take a look at d3js.

svg world map generator, svg world map with country names, svg world map, world map svg animation, world map svg no borders

ATTENTION: This library is under development and is currently in an early public beta. Use it carefully!

How to make use of it:

1. Download and load the principle JavaScript file svg-world-map.js within the doc.

<script src="svg-world-map.js"></script>

2. Embed an SVG world map into your doc.

<object id="svg-world-map" data="world-states-provinces.svg" type="image/svg+xml"></object>
<!-- This also works: <embed id="svg-world-map" src="world-states-provinces.svg" />-->

3. Initialize the world map and completed it.

var mySVG = document.getElementById('svg-world-map'); 
    mySVG.addEventListener("load", function() {
      var myWorldMap = svgWorldMap(mySVG); 
})

4. Possible choices to config the world map.

var myWorldMap = svgWorldMap(mySVG,{
    // Base path 
    libPath: '../src/', // Point to library folder, e.g. (http[s]:)//myserver.com/map/src/
    // Basic options
    bigMap: true, // Set to 'false' to load small map without provinces
    showOcean: true, // Show or hide ocean layer
    showAntarctica: true, // Show or hide antarctic layer
    showLabels: true, // Show country labels
    showMicroLabels: false, // Show microstate labels
    showMicroStates: true, // Show microstates on map
    showInfoBox: false, // Show info box
    backgroundImage: '', // Background image path
    // Color options
    oceanColor: '#D8EBFF', 
    worldColor: '#FFFFFF', 
    labelFill: { out: '#666666',  over: '#333333',  click: '#000000' }, 
    //countryFill: { out: '#B9B9B9',  over: '#CCCCCC',  click: '#666666' }, // TODO: Currently this makes no sense for main country groups, until all country borders are existing in the SVG (a lot are missing, e.g. Japan, Greenland, Antarctica)
    countryStroke: { out: '#FFFFFF',  over: '#FFFFFF',  click: '#333333' }, 
    countryStrokeWidth: { out: '0.5',  over: '1',  click: '1' }, 
    provinceFill: { out: '#B9B9B9',  over: '#FFFFFF',  click: '#666666' }, 
    provinceStroke: { out: '#FFFFFF',  over: '#FFFFFF',  click: '#666666' }, 
    provinceStrokeWidth: { out: '0.1',  over: '0.5',  click: '0.5' }, 
    // Group options
    groupCountries: true, // Enable or disable country grouping
    groupBy: [ "region" ], // Sort countryData by this value(s) and return to countryGroups
    // Coordinates
    trackCoords: false, // Track map coords, default 'false' due to performance
    // Callback functions from the map to the outside, can have custom names
    mapOut: "mapOut", 
    mapOver: "mapOver", 
    mapClick: "mapClick", 
    mapCoords: "mapCoords", 
    mapDate: "mapDate", // (Custom) callback function for time control date return
    mapTable: "mapTable", // (Custom) callback function for HTML data parsing
    // Time controls
    timeControls: false, // Set to 'true' for time controls
    timePause: true, // Set to 'false' for time animation autostart
    timeLoop: false //  Set to 'true' for time animation loop
});

SVG World Map With All Countries, Provinces, And States, SVG World Map JS Plugin/Github, world svg free, world map svg outline