Biblioteca de mapas del mundo SVG interactiva-svgMap. js
| Autor: | StephanWagner |
|---|---|
| Views Total: | 427 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 10, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
El svgMap. js le permite crear un interactivo, SVG Powered mapa del mundo en la página web, con soporte para la ventana de información que se puede utilizar para presentar cualquier dato cuando el usuario se desplaza sobre un país y región específica.
Funcionamiento
Cargue los archivos SVG-WorldMap. CSS y SVG-WorldMap. js requeridos en el documento.
<link href="/dist/svg-worldmap.css" rel="stylesheet"> <script src="/dist/svg-worldmap.js"></script>
Cree un elemento contenedor para colocar el mapa del mundo.
<div id="svgMapExample"></div>
Cree un nuevo objeto svgMap para representar un mapa del mundo dentro del contenedor.
new svgMap({
targetElementID: 'svgMapExample',
}); Para presentar los datos en el mapa del mundo, siguiendo estos pasos:
// GDP data
var svgMapDataGPD = {
data: {
gdp: {
name: 'GDP per capita',
format: '{0} USD',
thousandSeparator: ',',
thresholdMax: 50000,
thresholdMin: 1000
},
change: {
name: 'Change to year before',
format: '{0} %'
},
gdpAdjusted: {
name: 'Purchasing Power Parity',
format: '{0} USD',
thousandSeparator: ',',
thresholdMax: 50000,
thresholdMin: 1000
},
changeAdjusted: {
name: 'Change to year before',
format: '{0} %'
}
},
applyData: 'gdpAdjusted',
values: {
AF: {gdp: 587, change: 4.73, gdpAdjusted: 1958, changeAdjusted: 0.02},
// ...
}
} new svgMap({
targetElementID: 'svgMapExample',
data: svgMapDataGPD
}); Opciones predeterminadas para personalizar el mapa del mundo.
// The element to render the map in
targetElementID: '',
// Minimum and maximum zoom
minZoom: 1,
maxZoom: 10,
// Initial zoom
initialZoom: 1.06,
// Zoom sensitivity
zoomScaleSensitivity: 0.2,
// Zoom with mousewheel
mouseWheelZoomEnabled: true,
// Data colors
colorMax: '#CC0033',
colorMin: '#FFE5D9',
colorNoData: '#E2E2E2',
// Data thresholds
thresholdMax: null,
thresholdMin: null,
// The url to the flags, {0} will get replaced with lowercase coutry id
flagURL: 'https://cdn.jsdelivr.net/gh/hjnilsson/[email protected]/svg/{0}.svg'
