mapa-gcba - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/config/tile-layers/data.js

@@ -17,3 +17,3 @@ "use strict";
     params: {
-        center: [-34.657, -58.678],
+        center: [-34.606389, -58.435556],
         zoom: 12,
@@ -20,0 +20,0 @@ zoomControl: true,

dist/index.d.ts

@@ -1,1 +0,2 @@
-export {};
+import MapaInteractivo from "./models/MapaInteractivo";
+export default MapaInteractivo;

dist/index.js

@@ -7,15 +7,2 @@ "use strict";
 const MapaInteractivo_1 = __importDefault(require("./models/MapaInteractivo"));
-const options = {
-    params: {
-        center: [-34.657, -58.678],
-        zoom: 14,
-        zoomControl: true,
-        dragging: true,
-        scrollWheelZoom: true,
-        attributionControl: true,
-        doubleClickZoom: false,
-    },
-    showScaleControl: true,
-    showLoadingControl: true,
-};
-const map = new MapaInteractivo_1.default("map", options);
+exports.default = MapaInteractivo_1.default;

dist/models/MapaInteractivo.js

@@ -256,3 +256,3 @@ "use strict";
         const params = Object.assign({}, this.config.params, options);
-        this.map = leaflet_1.default.map(id, params).setView([-34.61, -58.38]);
+        this.map = leaflet_1.default.map(id, params).setView([-34.606389, -58.435556]);
         if (this.config.showScaleControl) {
@@ -259,0 +259,0 @@ leaflet_1.default.control

package.json

 {
   "name": "mapa-gcba",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Mapa Interactivo de la Ciudad de Buenos Aires",
@@ -12,3 +12,3 @@ "main": "index.js",
     "build:ts": "tsc --outDir dist",
-    "build:css": "cp -R src/assets dist",
+    "build:css": "cp -R source/assets dist",
     "build": "npm run build:ts && npm run build:css"
@@ -41,4 +41,4 @@ },
   "include": [
-    "src/**/*.ts"
+    "source/**/*.ts"
   ]
 }

README.md

@@ -23,5 +23,11 @@ # Mapa Interactivo
 
-El constructor del MapaInteractivo recibe un parámetro obligatorio, que representa el id del elemento HTML donde se insertará el mapa
+Importar la clase MapaInteractivo
 
 ```ts
+import "mapa-gcba/dist/index";
+```
+
+El constructor del MapaInteractivo recibe un parámetro obligatorio, que representa el id del elemento HTML donde se insertará el mapa.
+
+```ts
 const map = new MapaInteractivo("mapa");
@@ -32,3 +38,3 @@ ```
 
-Crear la etiqueta donde se insertará el mapa. Además se deberán agregar estilos (height y width) para poder ver el mapa.
+Crear la etiqueta donde se insertará el mapa (el valor de id debe coincidir con el parámetro obligatorio del paso anterior). Además, se deberán agregar los estilos de altura y ancho (height y width) para poder ver el mapa.
 
@@ -57,3 +63,3 @@ ```html
 | params             | object  | Ver sección params  |    Definir las caraceterísticas del mapa     |
-| reverseOptions     | object  | Ver sección reverse | Definir las opciones para el reversgeocoding |
+| reverseOptions     | object  | Ver sección reverse | Definir las opciones para el reversegeocoding |
 | language           | string  |         es          |           Definir idioma (es o en)           |
@@ -68,3 +74,3 @@ | texts              | object  |  Ver sección texts  |        Definir los mensajes a mostrar        |
 | :----------------- | :------: | :----------------: | :--------------------------------------: |
-| center             |  Array   | [-34.657, -58.678] |             Centro del mapa              |
+| center             |  Array   | [-34.606, -58.435] |             Centro del mapa              |
 | zoom               |  Number  |         12         |              Nivel de zoom               |
@@ -150,1 +156,115 @@ | zoomControl        | Boolean  |        true        |             Control de zoom              |
 Limpia los marcadores del Mapa
+
+## Ejemplos
+### Mapa Interactivo en Angular
+
+#### Creación del Proyecto
+Utilizar Angular CLI para crear un nuevo proyecto. Abrir una consola de comando y ejecutar:
+
+```bash
+ng new map-app
+```
+
+Seguir las instrucciones para configurar el proyecto. Una vez creado, navegar hacia la raiz del proyecto:
+```bash
+cd map-app
+```
+
+#### Instalación del Paquete
+Instalar el mapa-gcba:
+
+```bash
+npm install mapa-gcba
+```
+
+#### Importación e Instancia del MapaInteractivo
+En `src/app/app.component.ts` se deberá agregar las siguientes líneas de código:
+* Importar la clase MapaInteractivo y sus estilos:
+
+```ts
+import "mapa-gcba/dist/assets/css/main.css";
+import MapaInteractivo from "mapa-gcba/dist/index"
+```
+
+* Incializar e instanciar un objeto de la clase MapaInteractivo dentro del método ngAfterViewInit
+```ts
+ngAfterViewInit() {
+    this.map = new MapaInteractivo("mapa");
+  }
+```
+
+En `src/app/app.component.html` se deberá agregar el la etiqueta _div_ con su correspondiente id:
+```html
+<div style="text-align:center">
+  <h1> {{ title }} </h1>
+  <div id="mapa"></div>
+</div>
+```
+
+En `src/app/app.component.css` se deberá agregar estilos para visualizar el mapa:
+```css
+#mapa {
+    height: 500px;
+    width: 800px;
+    margin: 0 auto;
+}
+```
+
+### Mapa Interactivo en ReactJs
+
+#### Creación del Proyecto
+Crear un proyecto con CRA o Vite. Abrir una consola de comando y ejecutar:
+
+```bash
+npm create vite@latest map-app
+```
+
+Seguir las instrucciones para configurar el proyecto. Una vez creado, navegar hacia la raiz del proyecto:
+```bash
+cd map-app
+```
+
+#### Instalación del Paquete
+Instalar el mapa-gcba:
+
+```bash
+npm install mapa-gcba
+```
+#### Importación e Instancia del MapaInteractivo
+En `src/App.jsx` se deberá agregar las siguientes líneas de código:
+* Importar la clase MapaInteractivo y sus estilos:
+
+```js
+import "mapa-gcba/dist/assets/css/main.css";
+import MapaInteractivo from "mapa-gcba/dist/index"
+```
+
+* Incializar e instanciar un objeto de la clase MapaInteractivo dentro de un hook useEffect en un componente React (ejemplo App):
+```js
+  let mapaInicializado = false;
+  useEffect(() => {
+    if (!mapaInicializado) {
+      new MapaInteractivo("mapa"); 
+      mapaInicializado = true;
+    }
+  }, []);
+```
+
+En el _return_ del componente, se deberá agregar una etiqueta _div_ con su correspondiente id:
+```jsx
+return (
+    <>
+      <h1>Mapa Interactivo</h1>
+      <div id="mapa"></div>
+    </>
+  );
+```
+
+En `App.css` se deberá agregar estilos para visualizar el mapa:
+```css
+#mapa {
+    height: 500px;
+    width: 800px;
+    margin: 0 auto;
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

753580

increased by0.35%

Number of lines in readme file

265

increased by81.51%

Worsened metrics

Lines of code

1152

decreased by-1.03%

No dependency changes