From 4ea0644db629bdda370d10b1b1f5b06f624d8ad9 Mon Sep 17 00:00:00 2001 From: analuizaff Date: Mon, 21 Jun 2021 19:30:34 -0300 Subject: [PATCH] adding new pin images --- .../floodZonesAssets/PinIntransitavel.html | 1 + .../floodZonesAssets/PinTransitavel.html | 1 + .../assets/pluviometer/PinPluviometroArt.html | 1 + src/app/assets/rain/PinChuvaForte.html | 1 + src/app/assets/rain/PinChuvaFraca.html | 1 + src/app/assets/rain/PinChuvaModerada.html | 1 + src/app/assets/rain/PinChuvaMuitoForte.html | 1 + src/app/assets/rain/PinNublado.html | 1 + src/app/assets/river/PinRioBaixo.html | 1 + src/app/assets/river/PinRioCheio.html | 1 + src/app/assets/river/PinRioExtravasado.html | 1 + src/app/assets/river/PinRioNormal.html | 1 + src/app/components/map/LeafLetMap.js | 9 ++++---- src/app/components/map/OpenStreetMap.js | 2 +- src/app/config/assets.js | 22 +++++++++---------- src/app/context/MapRefContext.js | 19 ++++++++++++++++ src/app/hooks/selectFromDB.js | 4 ++-- 17 files changed, 49 insertions(+), 19 deletions(-) create mode 100644 src/app/assets/floodZonesAssets/PinIntransitavel.html create mode 100644 src/app/assets/floodZonesAssets/PinTransitavel.html create mode 100644 src/app/assets/pluviometer/PinPluviometroArt.html create mode 100644 src/app/assets/rain/PinChuvaForte.html create mode 100644 src/app/assets/rain/PinChuvaFraca.html create mode 100644 src/app/assets/rain/PinChuvaModerada.html create mode 100644 src/app/assets/rain/PinChuvaMuitoForte.html create mode 100644 src/app/assets/rain/PinNublado.html create mode 100644 src/app/assets/river/PinRioBaixo.html create mode 100644 src/app/assets/river/PinRioCheio.html create mode 100644 src/app/assets/river/PinRioExtravasado.html create mode 100644 src/app/assets/river/PinRioNormal.html create mode 100644 src/app/context/MapRefContext.js diff --git a/src/app/assets/floodZonesAssets/PinIntransitavel.html b/src/app/assets/floodZonesAssets/PinIntransitavel.html new file mode 100644 index 0000000..9aa6425 --- /dev/null +++ b/src/app/assets/floodZonesAssets/PinIntransitavel.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/floodZonesAssets/PinTransitavel.html b/src/app/assets/floodZonesAssets/PinTransitavel.html new file mode 100644 index 0000000..105f1f0 --- /dev/null +++ b/src/app/assets/floodZonesAssets/PinTransitavel.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/pluviometer/PinPluviometroArt.html b/src/app/assets/pluviometer/PinPluviometroArt.html new file mode 100644 index 0000000..ebed5ff --- /dev/null +++ b/src/app/assets/pluviometer/PinPluviometroArt.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/rain/PinChuvaForte.html b/src/app/assets/rain/PinChuvaForte.html new file mode 100644 index 0000000..0eaa522 --- /dev/null +++ b/src/app/assets/rain/PinChuvaForte.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/rain/PinChuvaFraca.html b/src/app/assets/rain/PinChuvaFraca.html new file mode 100644 index 0000000..3a3257a --- /dev/null +++ b/src/app/assets/rain/PinChuvaFraca.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/rain/PinChuvaModerada.html b/src/app/assets/rain/PinChuvaModerada.html new file mode 100644 index 0000000..42ea69e --- /dev/null +++ b/src/app/assets/rain/PinChuvaModerada.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/rain/PinChuvaMuitoForte.html b/src/app/assets/rain/PinChuvaMuitoForte.html new file mode 100644 index 0000000..fc22f50 --- /dev/null +++ b/src/app/assets/rain/PinChuvaMuitoForte.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/rain/PinNublado.html b/src/app/assets/rain/PinNublado.html new file mode 100644 index 0000000..99719f4 --- /dev/null +++ b/src/app/assets/rain/PinNublado.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/river/PinRioBaixo.html b/src/app/assets/river/PinRioBaixo.html new file mode 100644 index 0000000..64a036a --- /dev/null +++ b/src/app/assets/river/PinRioBaixo.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/river/PinRioCheio.html b/src/app/assets/river/PinRioCheio.html new file mode 100644 index 0000000..fa4b1a7 --- /dev/null +++ b/src/app/assets/river/PinRioCheio.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/river/PinRioExtravasado.html b/src/app/assets/river/PinRioExtravasado.html new file mode 100644 index 0000000..2c5bb1d --- /dev/null +++ b/src/app/assets/river/PinRioExtravasado.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/river/PinRioNormal.html b/src/app/assets/river/PinRioNormal.html new file mode 100644 index 0000000..a9f53a4 --- /dev/null +++ b/src/app/assets/river/PinRioNormal.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index a305bc2..1c970e7 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/src/app/components/map/LeafLetMap.js @@ -58,11 +58,12 @@ function handleEvent(event) { } async function insertMarker(mapRef, ID, coordinate, icon) { - var iconSvg = ` `; + var iconSvg = icon; + if (typeof icon !== 'string' && !(icon instanceof String)) { + iconSvg = await loadLocalAsset(icon); + } - // if (typeof icon !== 'string' && !(icon instanceof String)) { - // iconSvg = await loadLocalAsset(icon); - // } + //console.log(String(iconSvg)); mapRef.injectJavaScript(` var customIcon = L.divIcon({ diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index 8575e58..4165843 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/src/app/components/map/OpenStreetMap.js @@ -52,7 +52,7 @@ export default function OpenStreetMap({ mapRef && notEmpy(markersList) && markersList.forEach((val, key) => { - insertMarker(mapRef, val.ID, val.coordinate, val.icon); + insertMarker(mapRef, val.ID, val.coordinate, val.image); }); loadHTMLFile() diff --git a/src/app/config/assets.js b/src/app/config/assets.js index 51df662..aaa5bea 100644 --- a/src/app/config/assets.js +++ b/src/app/config/assets.js @@ -35,12 +35,10 @@ export default { floodZones: { FloodZonesIcon: FloodZones, passable: require("../assets/floodZonesAssets/passable_icon.png"), - passable_pin: require("../assets/floodZonesAssets/PinTransitável.png"), passable_toggle: require("../assets/floodZonesAssets/Transitavel_c.png"), passable_2: require("../assets/floodZonesAssets/passable_2.png"), notPassable: require("../assets/floodZonesAssets/not_passable_icon.png"), - notPassable_pin: require("../assets/floodZonesAssets/PinIntransitável.png"), notPassable2: require("../assets/floodZonesAssets/notpassable_2_toggle.png"), notPassable_toggle: require("../assets/floodZonesAssets/Intransitavel_c.png"), }, @@ -48,50 +46,50 @@ export default { riverLevel: { RiverIcon: RiverIcon, - low_pin: require("../assets/river/PinRioBaixo.png"), + low_pin: require("../assets/river/PinRioBaixo.html"), low: require("../assets/river/rio_baixo.png"), Low: RiverLow, LowToggle: RiverLowToggle, - normal_pin: require("../assets/river/PinRioNormal.png"), + normal_pin: require("../assets/river/PinRioNormal.html"), normal: require("../assets/river/rio_normal.png"), Normal: RiverNormal, NormalToggle: RiverNormalToggle, - high_pin: require("../assets/river/PinRioCheio.png"), + high_pin: require("../assets/river/PinRioCheio.html"), high: require("../assets/river/rio_alto.png"), High: RiverHigh, HighToggle: RiverHighToggle, - flooding_pin: require("../assets/river/PinRioExtravasado.png"), + flooding_pin: require("../assets/river/PinRioExtravasado.html"), flooding: require("../assets/river/rio_transbordando.png"), Flooding: RiverFlood, FloodingToggle: RiverFloodToggle, }, rainLevel: { RainIcon: RainIcon, - rain_0_5_pin: require("../assets/rain/PinNublado.png"), + rain_0_5_pin: require("../assets/rain/PinNublado.html"), rain_0_5: require("../assets/rain/sem_chuva.png"), Rain_0_5: RainNot, Rain_0_5_Toggle: RainNotToggle, rain_1_5: require("../assets/rain/chuva_fraca.png"), - rain_1_5_pin: require("../assets/rain/PinChuvaFraca.png"), + rain_1_5_pin: require("../assets/rain/PinChuvaFraca.html"), Rain_1_5: RainLow, Rain_1_5_Toggle: RainLowToggle, rain_2_5: require("../assets/rain/chuva_logo.png"), - rain_2_5_pin: require("../assets/rain/PinChuvaModerada.png"), + rain_2_5_pin: require("../assets/rain/PinChuvaModerada.html"), Rain_2_5: RainMedium, Rain_2_5_Toggle: RainMediumToggle, rain_3_5: require("../assets/rain/chuva_forte.png"), - rain_3_5_pin: require("../assets/rain/PinChuvaForte.png"), + rain_3_5_pin: require("../assets/rain/PinChuvaForte.html"), Rain_3_5: RainHigh, Rain_3_5_Toggle: RainHighToggle, rain_4_5: require("../assets/rain/chuva_muito_forte.png"), - rain_4_5_pin: require("../assets/rain/PinChuvaMuitoForte.png"), + rain_4_5_pin: require("../assets/rain/PinChuvaMuitoForte.html"), Rain_4_5: RainVeryHigh, Rain_4_5_Toggle: RainVeryHighToggle, @@ -106,7 +104,7 @@ export default { Weather_5_clean, ], pluviometer: require("../assets/pluviometer/diario_pluviometrico.png"), - pluviometer_pin: require("../assets/pluviometer/PinPluviometroArt.png"), + pluviometer_pin: require("../assets/pluviometer/PinPluviometroArt.html"), officialPluviometer: require("../assets/pluviometer/pluviometroOficial.png"), officialPluviometer_pin: require("../assets/pluviometer/PinPluviometroOficial.png"), PluviometerIcon: Pluviometer, diff --git a/src/app/context/MapRefContext.js b/src/app/context/MapRefContext.js new file mode 100644 index 0000000..34fa73f --- /dev/null +++ b/src/app/context/MapRefContext.js @@ -0,0 +1,19 @@ +import React, { useState, createContext, useContext, useEffect } from "react" + +export const MapRefContext = createContext(); + +const MapRefProvider = ({ children }) => { + + //problema: as vzs renderiza antes de carregar a localização correta do usuário + const [mapRef, setMapRef] = useState(); + + return ( + + {children} + + ) +} +export default MapRefProvider; \ No newline at end of file diff --git a/src/app/hooks/selectFromDB.js b/src/app/hooks/selectFromDB.js index a51eb8f..6a208fd 100644 --- a/src/app/hooks/selectFromDB.js +++ b/src/app/hooks/selectFromDB.js @@ -27,8 +27,8 @@ const custom_assets_pin = { pluviometer: assets.pluviometer_pin, officialPluviometer: assets.officialPluviometer_pin, floodZones: { - passable: assets.floodZones.passable_pin, - not_passable: assets.floodZones.notPassable_pin, + passable: require("../assets/floodZonesAssets/PinTransitavel.html"), + not_passable: require("../assets/floodZonesAssets/PinIntransitavel.html"), }, riverLevel: ["low_pin", "normal_pin", "high_pin]", "flooding_pin"].map( (key) => {