Creación de su primer mapa en JavaScript

A+ A-

Supongamos que usted es dueño de un negocio y sus oficinas están ubicadas en 10 estados de la India diferentes. Ahora desea mostrar esta información en su sitio web, entonces este artículo es para ti, donde voy a cubrir el proceso de creación de un mapa interactivo utilizando FusionCharts base de la biblioteca JavaScript gráficos y es paquete de mapas.

En primer lugar, hay dos formas de mostrar los datos en su sitio web:

  • Una lista con todas las direcciones o
  • Un mapa interactivo?

Si usted es un estudiante visual como la mayoría de la gente, se va con la segunda opción - un mapa interactivo.

Y si usted desea aprender cómo hacer un mapa interactivo, usted está en el lugar correcto.

Para que sea más fácil de entender He dividido esta introducción tutorial en cuatro pasos:

  • Paso 1: Estructuración de datos
  • Paso 2: Inclusión de archivos de JavaScript FusionCharts
  • Paso 3: Creación de contenedores de elementos para la carta
  • Paso 4: Representación del Mapa

Paso 1: Estructuración de Datos

Vamos a trazar un mapa de la India que representan el número de ordenadores con conexión a internet por estado para el año 2013. A continuación se muestra los datos tabulares de los mismos:

Estado Número de ordenadores
Jammu y Cachemira 58438
Himachal Pradesh 41344
Punjab 292.124
y así…

FusionCharts entiende datos XML y JSON y nos van a utilizar JSON para este tutorial.

Como no tenemos los datos de ahora, vamos a formar la matriz de datos en JSON para nuestro mapa. Matriz de datos de mapas consiste en un objeto para cada estado / entidad que incluye una única id y value para ese estado. Este id actúa como identificador para el Estado y su valor correspondiente.

Aquí es cómo vamos a formar datos de nuestro mapa:

 "Datos": [
{ "Id": "015", "valor": "58438"},
    { "Id": "014", "valor": "41344"},
    { "Id": "028", "valor": "292124"},
    // Más datos de los mapas ...
] 

Paso 2: La inclusión de FusionCharts archivos JavaScript

Esta es la primera cosa que cada desarrollador web tiene que hacer antes de programación real de arranques web-app - incluyendo las dependencias para el proyecto.

En este paso vamos a incluir archivos de JavaScript proporcionadas por FusionCharts utilizando <script> etiquetas en la sección de la cabeza de nuestra página web.

Estaremos incluyendo estos tres archivos:

  • FusionCharts archivo JavaScript básico
  • archivo de mapas núcleo FusionCharts
  • Mapa archivo de definición de la India

Y así es como lo hacemos:

 <Head>
    <script type = "text / javascript" src = "location / of / FusionCharts. js"> </ script>
    <script type = "text / javascript" src = "location / of / FusionCharts. maps.js"> </ script>
    <script type = "text / javascript" src = "location / of / FusionCharts. india.js"> </ script>
</ Head> 

fusioncharts.js y fusioncharts.maps.js están obligados a trazar cualquier mapa, mientras que fusioncharts.india.js se requiere para trazar un mapa de la India.

Para trazar un mapa para cualquier otro país o estado que tendrá que incluir el archivo JavaScript para ese país o estado en particular que están disponibles bajo paquete de mapas definición proporcionada por FusionCharts.

Paso 3: Creación de contenedores de elementos para la carta

Nuestra mapa ocupará su posición en la página web dentro de una etiqueta HTML <div> elemento. Aquí es cómo lo hacemos:

 <Div id = "indio-mapa"> Sólo un segundo! </ Div> 

id de cada mapa o un gráfico en una página web debe ser único.

Paso 4: Representación del Mapa

Ahora que todas las cosas que necesitamos para hacer el mapa están en su lugar, vamos a utilizar finalmente ejemplo FusionCharts para crear un objeto de nuestra tabla.

A continuación se muestra la sintaxis para el mismo:

 FusionCharts.ready ejemplo (function () {// // FusionCharts
    var = mapObj nuevos FusionCharts ({// objeto de mapa
        // Definición de mapa
    });
}); 

Ahora vamos a implementar la sintaxis de arriba para crear el objeto de nuestro mapa y usar render() método para representar el gráfico.

 FusionCharts.ready (function () {
  var = mapOfIndia nuevos FusionCharts ({
    Tipo: "mapas / India",
    renderAt: "indio-mapa", // div contenedor para nuestro plano
    altura: "650",
    anchura: "100%",
    dataFormat: "json",
    fuente de datos: {
      "gráfico": {
        "Leyenda": "Número de ordenadores con acceso a Internet en la India",
        "SubCaption": "Censo 2011",
        "CaptionFontSize": "25",
        // otras configuraciones de gráficos
      },

      "gama de colores": {
        "MINVALUE": "300",
        "Startlabel": "Bajo",
        "ENDLABEL": "Alto",
        "Código": "# efedf5",
        "Degradado": "1",
        "Color": [{
          "Maxvalue": "220000",
          "DisplayValue": "medio.",
          "Código": "#bcbddc"
        }, {
          "Maxvalue": "1400000",
          "Código": "# 756bb1"
        }]
      },

      "Datos": [{
          "Id": "015",
          "Valor": "58438"
        }, {
          "Id": "014",
          "Valor": "41344"
        }, {
          "Id": "028",
          "Valor": "292124"
        },
        // Más datos
      ]
    }
  }).hacer(); // Genera método 
}); 

Si ha seguido todos los pasos descritos anteriormente, usted debe tener un gran mapa en busca de la India con usted como la de abajo -

Screen Shot 02/03/2016 al 11/09/52 AM

Próximos pasos

mapa básico es bueno para representar los datos, pero hay muchas cosas que se pueden hacer usando mapas y gráficos. Estoy discutiendo algunos de ellos a continuación:

  • Personalización del diseño: FusionCharts proporciona toneladas de atributos para personalizar el aspecto del mapa y feel.Here son algunos de los atributos que se utiliza para mejorar el mapa de arriba
    • captionFontSize: (int) Se utiliza para cambiar el tamaño de fuente del subtítulo.
    • BASEFONT: (cadena) Se utiliza para cambiar el estilo de fuente través de la tabla. Usted no se limitan únicamente a utilizar las fuentes del sistema, pero también puede optar por cualquier familia de fuente que desee. Todo lo que tiene que hacer es incluir en HTML y se lo utiliza este atributo.
  • La adición de marcadores: FusionCharts ofrece una característica impresionante en los mapas de añadir marcadores que se pueden utilizar para representar lugares como ciudades, centros comerciales y lugares de interés.
  • Avanzar al siguiente nivel: FusionCharts le permite llevar su experiencia a saber los datos al siguiente nivel mediante la adición de características impresionantes como drill-down, anotaciones y eventos en tu mapa o carta.