Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/f 30 implement map with selectable countries (#22)
* feat: setup geojson and implement selectable countries * feat: introduce mapbox as an example * feat: change hovering to mapbox components * feat: refactor and add roads * feat: adjust colors according to Figma * fix: code style changes --------- Co-authored-by: marinovl7 <[email protected]>
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,3 @@ | ||
| NEXT_PUBLIC_API_URL=https://api.hungermapdata.org/v2 | ||
| NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN= | ||
| NEXT_PUBLIC_CHATBOT_API_URL= |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import 'mapbox-gl/dist/mapbox-gl.css'; | ||
|
|
||
| import { LeafletContextInterface, useLeafletContext } from '@react-leaflet/core'; | ||
| import mapboxgl from 'mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax | ||
| import { useTheme } from 'next-themes'; | ||
| import React, { RefObject, useEffect, useRef } from 'react'; | ||
|
|
||
| import { MapProps } from '@/domain/props/MapProps'; | ||
| import { MapOperations } from '@/operations/map/MapOperations.ts'; | ||
|
|
||
| export default function VectorTileLayer({ countries, disputedAreas }: MapProps) { | ||
| const { theme } = useTheme(); | ||
| const context: LeafletContextInterface = useLeafletContext(); | ||
| const mapContainer: RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null); | ||
|
|
||
| mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN as string; | ||
|
|
||
| useEffect(() => { | ||
| const baseMap: mapboxgl.Map = MapOperations.createMapboxMap( | ||
| theme === 'dark', | ||
| { countries, disputedAreas }, | ||
| mapContainer | ||
| ); | ||
| MapOperations.setMapInteractionFunctionality(baseMap); | ||
| MapOperations.synchronizeLeafletMapbox(baseMap, mapContainer, context); | ||
|
|
||
| return () => { | ||
| baseMap.remove(); | ||
| context.map.off('move'); | ||
| }; | ||
| }, [context, theme]); | ||
|
|
||
| return <div ref={mapContainer} style={{ width: '100%', height: '100%', zIndex: 2 }} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export interface MapColorsType { | ||
| activeCountries: string; | ||
| inactiveCountries: string; | ||
| ocean: string; | ||
| outline: string; | ||
| roads: string; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| import { LeafletContextInterface } from '@react-leaflet/core'; | ||
| import { FeatureCollection } from 'geojson'; | ||
| import mapboxgl from 'mapbox-gl'; | ||
| import { RefObject } from 'react'; | ||
|
|
||
| import { CountryMapData } from '@/domain/entities/country/CountryMapData.ts'; | ||
| import { MapColorsType } from '@/domain/entities/map/MapColorsType.ts'; | ||
| import { MapProps } from '@/domain/props/MapProps'; | ||
| import { getColors } from '@/styles/MapColors.ts'; | ||
|
|
||
| export class MapOperations { | ||
| static createMapboxMap( | ||
| isDark: boolean, | ||
| { countries }: MapProps, | ||
| mapContainer: RefObject<HTMLDivElement> | ||
| ): mapboxgl.Map { | ||
| const mapColors: MapColorsType = getColors(isDark); | ||
|
|
||
| return new mapboxgl.Map({ | ||
| container: mapContainer.current as unknown as string | HTMLElement, | ||
| style: { | ||
| version: 8, | ||
| name: 'HungerMap LIVE', | ||
| metadata: '{metadata}', | ||
| sources: { | ||
| countries: { | ||
| type: 'geojson', | ||
| data: countries as FeatureCollection, | ||
| generateId: true, | ||
| }, | ||
| mapboxStreets: { | ||
| type: 'vector', | ||
| url: 'mapbox://mapbox.mapbox-streets-v8', | ||
| }, | ||
| }, | ||
| layers: [ | ||
| { | ||
| id: 'ocean', | ||
| type: 'background', | ||
| paint: { | ||
| 'background-color': mapColors.ocean, | ||
| }, | ||
| }, | ||
| { | ||
| id: 'country-fills', | ||
| type: 'fill', | ||
| source: 'countries', | ||
| layout: {}, | ||
| paint: { | ||
| 'fill-color': [ | ||
| 'case', | ||
| ['boolean', ['coalesce', ['get', 'interactive'], false]], | ||
| mapColors.activeCountries, | ||
| mapColors.inactiveCountries, | ||
| ], | ||
| 'fill-opacity': ['case', ['boolean', ['feature-state', 'hover'], false], 0.7, 1], | ||
| }, | ||
| }, | ||
| { | ||
| id: 'country-borders', | ||
| type: 'line', | ||
| source: 'countries', | ||
| layout: {}, | ||
| paint: { | ||
| 'line-color': mapColors.outline, | ||
| 'line-width': 0.7, | ||
| }, | ||
| }, | ||
|
|
||
| { | ||
| id: 'mapbox-roads', | ||
| type: 'line', | ||
| source: 'mapboxStreets', | ||
| 'source-layer': 'road', | ||
| filter: ['in', 'class', 'motorway', 'trunk'], | ||
| paint: { | ||
| 'line-color': mapColors.roads, | ||
| 'line-width': ['interpolate', ['exponential', 1.5], ['zoom'], 5, 0.5, 18, 10], | ||
| }, | ||
| minzoom: 5, | ||
| }, | ||
| ], | ||
| }, | ||
| interactive: false, | ||
| }); | ||
| } | ||
|
|
||
| static setMapInteractionFunctionality(baseMap: mapboxgl.Map): void { | ||
| let hoveredPolygonId: string | number | undefined; | ||
|
|
||
| baseMap.on('mousemove', 'country-fills', (e) => { | ||
| if (e.features && e.features.length > 0 && (e.features[0] as unknown as CountryMapData).properties.interactive) { | ||
| if (hoveredPolygonId) { | ||
| baseMap.setFeatureState({ source: 'countries', id: hoveredPolygonId }, { hover: false }); | ||
| } | ||
| hoveredPolygonId = e.features[0].id; | ||
| if (hoveredPolygonId) { | ||
| baseMap.setFeatureState({ source: 'countries', id: hoveredPolygonId }, { hover: true }); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| baseMap.on('mouseleave', 'country-fills', () => { | ||
| if (hoveredPolygonId) { | ||
| baseMap.setFeatureState({ source: 'countries', id: hoveredPolygonId }, { hover: false }); | ||
| } | ||
| hoveredPolygonId = undefined; | ||
| }); | ||
|
|
||
| let isDragging = false; | ||
| baseMap.on('mousedown', () => { | ||
| isDragging = false; | ||
| }); | ||
|
|
||
| baseMap.on('mousemove', () => { | ||
| isDragging = true; | ||
| }); | ||
|
|
||
| baseMap.on('mouseup', 'country-fills', (e) => { | ||
| if (!isDragging && e.features && (e.features[0] as unknown as CountryMapData).properties.interactive) { | ||
| alert(`You clicked on ${(e.features[0] as unknown as CountryMapData).properties.adm0_name}`); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| static synchronizeLeafletMapbox( | ||
| baseMap: mapboxgl.Map, | ||
| mapContainer: RefObject<HTMLDivElement>, | ||
| context: LeafletContextInterface | ||
| ): void { | ||
| baseMap.dragRotate.disable(); | ||
|
|
||
| const syncZoom = () => { | ||
| baseMap.setZoom(context.map.getZoom() - 1); | ||
| baseMap.setMaxZoom(context.map.getMaxZoom() - 1); | ||
| baseMap.setMinZoom(context.map.getMinZoom() - 1); | ||
| }; | ||
|
|
||
| const container = context.layerContainer || context.map; | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-expect-error | ||
| const leafletMap = container.getContainer(); | ||
| leafletMap.appendChild(mapContainer.current); | ||
|
|
||
| baseMap.setZoom(context.map.getZoom()); | ||
| baseMap.setMaxZoom(context.map.getMaxZoom() - 1); | ||
| baseMap.setMinZoom(context.map.getMinZoom() - 1); | ||
|
|
||
| const { lat, lng } = context.map.getCenter(); | ||
| baseMap.setCenter([lng, lat]); | ||
| baseMap.setZoom(context.map.getZoom() - 1); | ||
|
|
||
| context.map.on('move', () => { | ||
| const { lat: moveLat, lng: moveLng } = context.map.getCenter(); | ||
| baseMap.setCenter([moveLng, moveLat]); | ||
| syncZoom(); | ||
| }); | ||
|
|
||
| context.map.on('zoom', () => { | ||
| const { lat: zoomLat, lng: zoomLng } = context.map.getCenter(); | ||
| baseMap.setCenter([zoomLng, zoomLat]); | ||
| syncZoom(); | ||
| }); | ||
|
|
||
| context.map.on('movestart', () => { | ||
| const { lat: moveStartLat, lng: moveStartLng } = context.map.getCenter(); | ||
| baseMap.setCenter([moveStartLng, moveStartLat]); | ||
| syncZoom(); | ||
| }); | ||
|
|
||
| context.map.on('zoomstart', () => { | ||
| syncZoom(); | ||
| }); | ||
|
|
||
| context.map.on('moveend', () => { | ||
| const { lat: moveEndLat, lng: moveEndLng } = context.map.getCenter(); | ||
| baseMap.setCenter([moveEndLng, moveEndLat]); | ||
| syncZoom(); | ||
| }); | ||
|
|
||
| context.map.on('zoomend', () => { | ||
| const { lat: zoomEndLat, lng: zoomEndLng } = context.map.getCenter(); | ||
| baseMap.setCenter([zoomEndLng, zoomEndLat]); | ||
| syncZoom(); | ||
| }); | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { MapColorsType } from '@/domain/entities/map/MapColorsType.ts'; | ||
|
|
||
| export const getColors = (isDark: boolean): MapColorsType => ({ | ||
| activeCountries: isDark ? '#0e6397' : '#fefeff', | ||
| inactiveCountries: isDark ? '#5a819b' : '#e8e8e8', | ||
| ocean: isDark ? '#111111' : '#91cccb', | ||
| outline: isDark ? '#0e2a3a' : '#306f96', | ||
| roads: isDark ? '#404040' : '#808080', | ||
| }); |
Oops, something went wrong.