Google Maps Parque del Recuerdo

Descripción

Esta librería muestra la ubicación de una sepultura del Parque del Recuerdo, y muestra el camino para llegar a esta. Este puede ser para el Parque Padre Alberto Hurtado, Parque Cordillera o Parque Américo Vespucio.

Este proyecto se desarrolla sobre la Google Maps Javascript API, la cual requiere un API Key para su funcionamiento. La librería cuenta con el centro geométrico de cada sector de los 3 parques, lo que permite llegar a una posición aproximada en caso que no se cuente con las coordenadas geográficas la sepultura.

A continuación se muestra el setup del proyecto, información de las funciones exportadas con ejemplos y sus tipos. Cabe destacar que los ejemplos están pensados para cualquier framework web, como React o Angular, por lo que no se utiliza una sintaxis específica.

Setup

La librería se puede instalar desde NPM:

npm i --save parque-del-recuerdo-google-maps-integration

Al estar desarrollada sobre Google Maps JS PI, se requiere un API Key con permisos para utilizar esta aplicación. Esto se hace desde Google Maps Platform en la consola de Google Cloud. Se deben seguir los siguientes pasos:

1. Crear proyecto
2. Habilitar API Google Maps
3. Crear API Key
4. Restringir API Key

Funciones

initMap

Descripción

Función para inicializar un mapa de la API de Javascript de Google Maps, con un marcador en la sepultura de la persona consultada. Este inyecta el mapa en un contenedor provisto por el cliente.

El mapa utilizará todo el espacio disponible dentro del contenerdor.

Parámetros

| Propiedad | Descripción | Type | Opcional | |---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|--------|----------| | position | Latitud y longitud de la sepultura | LatLng | true | | apiKey | Llave de la API de google maps | string | false | | containerId | id del contenedor HTML en el que se incrustará el mapa. Se recomienda utilizar un <div> vacío | string | false | | parkCode | Código del parque, los valores esperados son: - PPH (Parque Padre Alberto Hurtado) - PCO (Parque Cordillera) - PAV (Parque Américo Vespucio) | ParkCode | false | | sectorCode | Código del sector del parque, utilizado en caso de que no existan coordenadas geograficas para la sepultura | string | false | | name | nombre en la sepultura | string | true |

Ejemplo

Inicialización del mapa para una sepultura en particular.

En la inicialización de la componente:

import { initMap } from 'parque-del-recuerdo-google-maps-integration';

const position = {
    latitude: -33.38743058,
    longitude: -70.63220296
};

const apiKey = 'placeholder';
const divId = 'google-maps';
const parkCode = 'PAV';
const sectorCode = 'C4';
const name = 'JOHN DOE';
const rut = '11.111.111-1';

initMap({position, apiKey, divId, parkCode, sectorCode, name, rut});

En el html:

<div style="width: 50vw; height:50vh;">
    <div style="width: 100%; height: 100%;" id="google-maps"></div>
</div>

El primer contenedor tiene el largo y ancho del mapa, el cual puede ser fijo o relativo. Es importante agregar el 100% en el height y width del div de google maps.

GenerateDeepLink

Descripción

Función que genera un deeplink de Google Maps con destino a la sepultura. Al ser abierto, redirige al usuario a Google Maps en un computador, y la aplicación de Google Maps en un dispositivo móvil. En ambos casos se indica la ruta más corta a la sepultura, a pie.

Parámetros

Los parámetros de la función son los siguientes:

| Propiedad | Descripcion | Type | Opcional | |---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|--------|----------| | destination | Latitud y longitud del destino | LatLng | false | | waypoints | Parámetro opcional. Lista de latitudes y longitudes por los cuales la ruta debe pasar. | LatLng[] | true | | parkCode | Código del parque, los valores esperados son: - PPH (Parque Padre Alberto Hurtado) - PCO (Parque Cordillera) - PAV (Parque Américo Vespucio) | ParkCode | false | | sectorCode | Código del sector del parque, utilizado en caso de que no existan coordenadas geograficas para la sepultura | string | false |

Ejemplo

Este ejemplo presenta un botón que, al apretarlo, redirige a Google Maps con una ruta a la sepultura.

En el componente, definir la siguiente función

import { generateDeepLink } from 'parque-del-recuerdo-google-maps-integration';

const handleOnClick = () => {
    const destination = {
        latitude: -33.38743058,
        longitude: -70.63220296
    }
    const parkCode = 'PAV';
    const sectorCode = 'C4';
    url = generateDeepLink({destination, parkCode, sectorCode})
    window.open(url, '_blank'); 
}

El el código HTML:

<button onclick="handleOnClick()">Open Link</button>

Al apretar el botón, se abrirá una página como la siguiente en Web:

O como la siguiente en un dispositivo móvil:

Tipos

Modelo:

type LatLng = {
    latitude: number;
    longitude: number;
};
type ParkCodes = 'PPH' | 'PAV' | 'PCO';
type SectorCenters = {
    [key: string]: LatLng;
};
type Park = {
    name: string;
    sectorsCenters: SectorCenters;
    bounds: LatLng[];
    origin: LatLng;
};

Funciones:

interface GenerateDeepLinkArgs {
    destination?: LatLng;
    waypoints?: LatLng[];
    parkCode: ParkCodes;
    sectorCode: string;
}
declare const generateDeepLink: ({ destination, waypoints, parkCode, sectorCode }: GenerateDeepLinkArgs) => string;

interface InitMapArgs {
    position?: LatLng;
    apiKey: string;
    divId: string;
    parkCode: ParkCodes;
    sectorCode: string;
    name: string;
}
export declare const initMap: (args: InitMapArgs) => Promise<void>;

License

See MIT License