g
/
remap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove mapbox basemap

Browse Source
master
gman 1 week ago
parent a6eea9ca41
commit 215052fecb
9 changed files with 1390 additions and 765 deletions
Show Stats Download Patch File Download Diff File

1927
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
Unescape View File

@ -4,7 +4,7 @@
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite --mode production",
"build": "vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview"
}, },
@ -13,9 +13,10 @@
"@heroicons/react": "^2.0.13", "@heroicons/react": "^2.0.13",
"@tailwindcss/forms": "^0.5.3", "@tailwindcss/forms": "^0.5.3",
"mapbox-gl": "^2.11.1", "mapbox-gl": "^2.11.1",
"maplibre-gl": "^4.7.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-map-gl": "^7.0.20" "react-map-gl": "^7.1.9"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.26", "@types/react": "^18.0.26",

20
src/Countries.jsx
Unescape View File

@ -1,19 +1,17 @@
import { Fragment, useState, useRef } from "react";
import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react"; import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { import {
ChevronUpIcon,
ChevronDownIcon, ChevronDownIcon,
ChevronUpIcon,
} from "@heroicons/react/20/solid"; } from "@heroicons/react/20/solid";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { Fragment, useRef, useState } from "react";
import Map, { Layer, Source, Popup, ScaleControl } from "react-map-gl"; import 'maplibre-gl/dist/maplibre-gl.css';
import Map, { Layer, Popup, ScaleControl, Source } from "react-map-gl/maplibre";
import mapstyle from "./countries.json"; import mapstyle from "./countries.json";
mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url
const MAPBOX_TOKEN =
"pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2wzbHR0YW1sMXB0YjNkcXd5NWpqaWpybiJ9.jyLcIcB7NLbtZzGYIJZWWg";
const paintedLayers = mapstyle.layers.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {}) const paintedLayers = mapstyle.layers.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {})
const toggleLayers = ["Подложка"] const toggleLayers = ["Подложка"]
@ -625,7 +623,6 @@ export default function Countries({ mapOptions, onMapOptionClick }) {
minZoom={mapstyle.minZoom} minZoom={mapstyle.minZoom}
maxZoom={mapstyle.maxZoom} maxZoom={mapstyle.maxZoom}
ref={mapRef} ref={mapRef}
mapboxAccessToken={MAPBOX_TOKEN}
interactiveLayerIds={["power_fact_mw"]} interactiveLayerIds={["power_fact_mw"]}
onClick={handleClick} onClick={handleClick}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
@ -640,13 +637,6 @@ export default function Countries({ mapOptions, onMapOptionClick }) {
{popupInfo.country_russian_name} {popupInfo.country_russian_name}
</Popup>} </Popup>}
<ScaleControl /> <ScaleControl />
<Source
id="basemap"
tileSize={512}
{...mapstyle.sources.basemap}
>
<Layer {...paintedLayers["Подложка"]} />
</Source>
<Source <Source
id="remap" id="remap"
{...mapstyle.sources.remap} {...mapstyle.sources.remap}

23
src/Points.jsx
Unescape View File

@ -1,22 +1,17 @@
import { Fragment, useState, useRef } from "react";
import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react"; import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { import {
ChevronUpIcon,
ChevronDownIcon, ChevronDownIcon,
FunnelIcon, ChevronUpIcon
MinusIcon,
PlusIcon,
} from "@heroicons/react/20/solid"; } from "@heroicons/react/20/solid";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { Fragment, useRef, useState } from "react";
import Map, { Layer, Source, Popup, ScaleControl } from "react-map-gl"; import 'maplibre-gl/dist/maplibre-gl.css';
import Map, { Layer, Popup, ScaleControl, Source } from "react-map-gl/maplibre";
import mapstyle from "./points.json"; import mapstyle from "./points.json";
mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url
const MAPBOX_TOKEN =
"pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2wzbHR0YW1sMXB0YjNkcXd5NWpqaWpybiJ9.jyLcIcB7NLbtZzGYIJZWWg";
const paintedLayers = mapstyle.layers.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {}) const paintedLayers = mapstyle.layers.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {})
const pointsColors = mapstyle.layers.find(layer => layer.id == "Объекты").paint["circle-color"].slice(2, -1).reduce((acc, cur, i, source) => (i % 2 == 0 ? [...acc, { name: cur, color: source[i + 1] }] : acc), []) const pointsColors = mapstyle.layers.find(layer => layer.id == "Объекты").paint["circle-color"].slice(2, -1).reduce((acc, cur, i, source) => (i % 2 == 0 ? [...acc, { name: cur, color: source[i + 1] }] : acc), [])
const pointsSizes = mapstyle.layers.find(layer => layer.id == "Объекты").paint["circle-radius"].slice(3).reduce((acc, cur, i, source) => (i % 2 == 0 ? [...acc, { value: cur, size: source[i + 1] }] : acc), []) const pointsSizes = mapstyle.layers.find(layer => layer.id == "Объекты").paint["circle-radius"].slice(3).reduce((acc, cur, i, source) => (i % 2 == 0 ? [...acc, { value: cur, size: source[i + 1] }] : acc), [])
@ -1103,7 +1098,6 @@ export default function Points({ mapOptions, onMapOptionClick }) {
}} }}
minZoom={mapstyle.minZoom} minZoom={mapstyle.minZoom}
ref={mapRef} ref={mapRef}
mapboxAccessToken={MAPBOX_TOKEN}
interactiveLayerIds={["Объекты"]} interactiveLayerIds={["Объекты"]}
onClick={handleClick} onClick={handleClick}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
@ -1119,13 +1113,6 @@ export default function Points({ mapOptions, onMapOptionClick }) {
{popupInfo.region_name} {popupInfo.region_name}
</Popup>} </Popup>}
<ScaleControl /> <ScaleControl />
<Source
id="basemap"
tileSize={512}
{...mapstyle.sources.basemap}
>
<Layer {...paintedLayers["Подложка"]} />
</Source>
<Source <Source
id="remap" id="remap"
{...mapstyle.sources.remap} {...mapstyle.sources.remap}

18
src/Regions.jsx
Unescape View File

@ -1,19 +1,17 @@
import { Fragment, useState, useRef } from "react";
import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react"; import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { import {
ChevronDownIcon, ChevronDownIcon,
ChevronUpIcon, ChevronUpIcon,
} from "@heroicons/react/20/solid"; } from "@heroicons/react/20/solid";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { Fragment, useRef, useState } from "react";
import Map, { Layer, Source, Popup, ScaleControl } from "react-map-gl"; import 'maplibre-gl/dist/maplibre-gl.css';
import Map, { Layer, Popup, ScaleControl, Source } from "react-map-gl/maplibre";
import mapstyle from "./regions.json"; import mapstyle from "./regions.json";
mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url
const MAPBOX_TOKEN =
"pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2wzbHR0YW1sMXB0YjNkcXd5NWpqaWpybiJ9.jyLcIcB7NLbtZzGYIJZWWg";
const paintedLayers = mapstyle.layers.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {}) const paintedLayers = mapstyle.layers.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {})
const toggleLayers = ["Подложка"] const toggleLayers = ["Подложка"]
@ -678,7 +676,6 @@ export default function Regions({ mapOptions, onMapOptionClick }) {
}} }}
minZoom={mapstyle.minZoom} minZoom={mapstyle.minZoom}
ref={mapRef} ref={mapRef}
mapboxAccessToken={MAPBOX_TOKEN}
interactiveLayerIds={["power_fact_mw", "Регионы"]} interactiveLayerIds={["power_fact_mw", "Регионы"]}
onClick={handleClick} onClick={handleClick}
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
@ -693,13 +690,6 @@ export default function Regions({ mapOptions, onMapOptionClick }) {
{popupInfo.region_name} {popupInfo.region_name}
</Popup>} </Popup>}
<ScaleControl /> <ScaleControl />
<Source
id="basemap"
tileSize={512}
{...mapstyle.sources.basemap}
>
<Layer {...paintedLayers["Подложка"]} />
</Source>
<Source <Source
id="remap" id="remap"
{...mapstyle.sources.remap} {...mapstyle.sources.remap}

12
src/countries.json
Unescape View File

@ -15,21 +15,9 @@
"type": "vector", "type": "vector",
"url": "https://tiles.rreda.ru/capabilities/remap.json", "url": "https://tiles.rreda.ru/capabilities/remap.json",
"mapzoom": 1 "mapzoom": 1
},
"basemap": {
"type": "raster",
"tiles": [
"https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/512/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A"
]
} }
}, },
"layers": [ "layers": [
{
"id": "Подложка",
"type": "raster",
"source": "basemap",
"paint": {}
},
{ {
"id": "Границы", "id": "Границы",
"type": "line", "type": "line",

6
src/main.jsx
Unescape View File

@ -1,11 +1,9 @@
import React, { useState } from 'react' import { useState } from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import Countries from './Countries';
import 'mapbox-gl/dist/mapbox-gl.css';
import Points from './Points'; import Points from './Points';
import Regions from './Regions'; import Regions from './Regions';
import Countries from './Countries';
const initialMapOptions = [ const initialMapOptions = [
{ name: "Объекты ВИЭ", current: true }, { name: "Объекты ВИЭ", current: true },

74
src/points.json
Unescape View File

@ -18,21 +18,9 @@
"type": "vector", "type": "vector",
"url": "https://tiles.rreda.ru/capabilities/remap.json", "url": "https://tiles.rreda.ru/capabilities/remap.json",
"maxzoom": 1 "maxzoom": 1
},
"basemap": {
"type": "raster",
"tiles": [
"https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/512/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A"
]
} }
}, },
"layers": [ "layers": [
{
"id": "Подложка",
"type": "raster",
"source": "basemap",
"paint": {}
},
{ {
"id": "Границы", "id": "Границы",
"type": "line", "type": "line",
@ -49,28 +37,46 @@
"source": "remap", "source": "remap",
"source-layer": "points", "source-layer": "points",
"paint": { "paint": {
"circle-radius": [ "circle-radius": [
"interpolate", "interpolate",
["linear"], [
["get", "power_fact_parc_mw"], "linear"
0, 6, ],
200, 30 [
], "get",
"circle-opacity": 0.7, "power_fact_parc_mw"
"circle-color": [ ],
"match", 0,
["get", "tech_name"], 6,
"СЭС", "#ff7f00", 200,
"ВЭС", "#1f78b4", 30
"мГЭС", "#6a3d9a", ],
"БиоЭС (биомасса)", "#33a02c", "circle-opacity": 0.7,
"БиоЭС (биогаз)", "#cab2d6", "circle-color": [
"БиоЭС (свалочный газ)", "#b15928", "match",
"ПЭС", "#fb9a99", [
"ГеоЭС", "#e31a1c", "get",
"#000000" "tech_name"
] ],
"СЭС",
"#ff7f00",
"ВЭС",
"#1f78b4",
"мГЭС",
"#6a3d9a",
"БиоЭС (биомасса)",
"#33a02c",
"БиоЭС (биогаз)",
"#cab2d6",
"БиоЭС (свалочный газ)",
"#b15928",
"ПЭС",
"#fb9a99",
"ГеоЭС",
"#e31a1c",
"#000000"
]
} }
} }
] ]
} }

68
src/regions.json
Unescape View File

@ -14,21 +14,9 @@
"type": "vector", "type": "vector",
"url": "https://tiles.rreda.ru/capabilities/remap.json", "url": "https://tiles.rreda.ru/capabilities/remap.json",
"maxzoom": 1 "maxzoom": 1
},
"basemap": {
"type": "raster",
"tiles": [
"https://api.mapbox.com/styles/v1/ghermant/cl9vd1nji002n15s2xxj25f4m/tiles/512/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2pncDUwcnRmNDQ4ZjJ4czdjZXMzaHZpNyJ9.3rFyYRRtvLUngHm027HZ7A"
]
} }
}, },
"layers": [ "layers": [
{
"id": "Подложка",
"type": "raster",
"source": "basemap",
"paint": {}
},
{ {
"id": "Границы", "id": "Границы",
"type": "line", "type": "line",
@ -56,7 +44,13 @@
"source-layer": "regionsvalues", "source-layer": "regionsvalues",
"paint": { "paint": {
"fill-opacity": [ "fill-opacity": [
"case", ["has", "power_fact_mw"], 1, 0 "case",
[
"has",
"power_fact_mw"
],
1,
0
], ],
"fill-color": [ "fill-color": [
"step", "step",
@ -97,7 +91,13 @@
"source-layer": "regionsvalues", "source-layer": "regionsvalues",
"paint": { "paint": {
"fill-opacity": [ "fill-opacity": [
"case", ["has", "power_plan_mw"], 1, 0 "case",
[
"has",
"power_plan_mw"
],
1,
0
], ],
"fill-color": [ "fill-color": [
"step", "step",
@ -138,7 +138,13 @@
"source-layer": "regionsvalues", "source-layer": "regionsvalues",
"paint": { "paint": {
"fill-opacity": [ "fill-opacity": [
"case", ["has", "power_opw_mw"], 1, 0 "case",
[
"has",
"power_opw_mw"
],
1,
0
], ],
"fill-color": [ "fill-color": [
"step", "step",
@ -179,7 +185,13 @@
"source-layer": "regionsvalues", "source-layer": "regionsvalues",
"paint": { "paint": {
"fill-opacity": [ "fill-opacity": [
"case", ["has", "capacity_additions_mw"], 1, 0 "case",
[
"has",
"capacity_additions_mw"
],
1,
0
], ],
"fill-color": [ "fill-color": [
"step", "step",
@ -220,7 +232,13 @@
"source-layer": "regionsvalues", "source-layer": "regionsvalues",
"paint": { "paint": {
"fill-opacity": [ "fill-opacity": [
"case", ["has", "generation_mwh"], 1, 0 "case",
[
"has",
"generation_mwh"
],
1,
0
], ],
"fill-color": [ "fill-color": [
"step", "step",
@ -261,7 +279,13 @@
"source-layer": "regionsvalues", "source-layer": "regionsvalues",
"paint": { "paint": {
"fill-opacity": [ "fill-opacity": [
"case", ["has", "res_share_generation"], 1, 0 "case",
[
"has",
"res_share_generation"
],
1,
0
], ],
"fill-color": [ "fill-color": [
"step", "step",
@ -302,7 +326,13 @@
"source-layer": "regionsvalues", "source-layer": "regionsvalues",
"paint": { "paint": {
"fill-opacity": [ "fill-opacity": [
"case", ["has", "res_share_power"], 1, 0 "case",
[
"has",
"res_share_power"
],
1,
0
], ],
"fill-color": [ "fill-color": [
"step", "step",

Write Preview
Loading…
Cancel
Save