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

7
package.json
Unescape View File

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

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 { XMarkIcon } from "@heroicons/react/24/outline";
import {
ChevronUpIcon,
ChevronDownIcon,
ChevronUpIcon,
} 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";
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 toggleLayers = ["Подложка"]
@ -625,7 +623,6 @@ export default function Countries({ mapOptions, onMapOptionClick }) {
minZoom={mapstyle.minZoom}
maxZoom={mapstyle.maxZoom}
ref={mapRef}
mapboxAccessToken={MAPBOX_TOKEN}
interactiveLayerIds={["power_fact_mw"]}
onClick={handleClick}
onMouseEnter={handleMouseEnter}
@ -640,13 +637,6 @@ export default function Countries({ mapOptions, onMapOptionClick }) {
{popupInfo.country_russian_name}
</Popup>}
<ScaleControl />
<Source
id="basemap"
tileSize={512}
{...mapstyle.sources.basemap}
>
<Layer {...paintedLayers["Подложка"]} />
</Source>
<Source
id="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 { XMarkIcon } from "@heroicons/react/24/outline";
import {
ChevronUpIcon,
ChevronDownIcon,
FunnelIcon,
MinusIcon,
PlusIcon,
ChevronUpIcon
} 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";
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 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), [])
@ -1103,7 +1098,6 @@ export default function Points({ mapOptions, onMapOptionClick }) {
}}
minZoom={mapstyle.minZoom}
ref={mapRef}
mapboxAccessToken={MAPBOX_TOKEN}
interactiveLayerIds={["Объекты"]}
onClick={handleClick}
onMouseEnter={handleMouseEnter}
@ -1119,13 +1113,6 @@ export default function Points({ mapOptions, onMapOptionClick }) {
{popupInfo.region_name}
</Popup>}
<ScaleControl />
<Source
id="basemap"
tileSize={512}
{...mapstyle.sources.basemap}
>
<Layer {...paintedLayers["Подложка"]} />
</Source>
<Source
id="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 { XMarkIcon } from "@heroicons/react/24/outline";
import {
ChevronDownIcon,
ChevronUpIcon,
} 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";
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 toggleLayers = ["Подложка"]
@ -678,7 +676,6 @@ export default function Regions({ mapOptions, onMapOptionClick }) {
}}
minZoom={mapstyle.minZoom}
ref={mapRef}
mapboxAccessToken={MAPBOX_TOKEN}
interactiveLayerIds={["power_fact_mw", "Регионы"]}
onClick={handleClick}
onMouseEnter={handleMouseEnter}
@ -693,13 +690,6 @@ export default function Regions({ mapOptions, onMapOptionClick }) {
{popupInfo.region_name}
</Popup>}
<ScaleControl />
<Source
id="basemap"
tileSize={512}
{...mapstyle.sources.basemap}
>
<Layer {...paintedLayers["Подложка"]} />
</Source>
<Source
id="remap"
{...mapstyle.sources.remap}

12
src/countries.json
Unescape View File

@ -15,21 +15,9 @@
"type": "vector",
"url": "https://tiles.rreda.ru/capabilities/remap.json",
"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": [
{
"id": "Подложка",
"type": "raster",
"source": "basemap",
"paint": {}
},
{
"id": "Границы",
"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 'mapbox-gl/dist/mapbox-gl.css';
import Countries from './Countries';
import Points from './Points';
import Regions from './Regions';
import Countries from './Countries';
const initialMapOptions = [
{ name: "Объекты ВИЭ", current: true },

74
src/points.json
Unescape View File

@ -18,21 +18,9 @@
"type": "vector",
"url": "https://tiles.rreda.ru/capabilities/remap.json",
"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": [
{
"id": "Подложка",
"type": "raster",
"source": "basemap",
"paint": {}
},
{
"id": "Границы",
"type": "line",
@ -49,28 +37,46 @@
"source": "remap",
"source-layer": "points",
"paint": {
"circle-radius": [
"interpolate",
["linear"],
["get", "power_fact_parc_mw"],
0, 6,
200, 30
],
"circle-opacity": 0.7,
"circle-color": [
"match",
["get", "tech_name"],
"СЭС", "#ff7f00",
"ВЭС", "#1f78b4",
"мГЭС", "#6a3d9a",
"БиоЭС (биомасса)", "#33a02c",
"БиоЭС (биогаз)", "#cab2d6",
"БиоЭС (свалочный газ)", "#b15928",
"ПЭС", "#fb9a99",
"ГеоЭС", "#e31a1c",
"#000000"
]
"circle-radius": [
"interpolate",
[
"linear"
],
[
"get",
"power_fact_parc_mw"
],
0,
6,
200,
30
],
"circle-opacity": 0.7,
"circle-color": [
"match",
[
"get",
"tech_name"
],
"СЭС",
"#ff7f00",
"ВЭС",
"#1f78b4",
"мГЭС",
"#6a3d9a",
"БиоЭС (биомасса)",
"#33a02c",
"БиоЭС (биогаз)",
"#cab2d6",
"БиоЭС (свалочный газ)",
"#b15928",
"ПЭС",
"#fb9a99",
"ГеоЭС",
"#e31a1c",
"#000000"
]
}
}
}
]
}

68
src/regions.json
Unescape View File

@ -14,21 +14,9 @@
"type": "vector",
"url": "https://tiles.rreda.ru/capabilities/remap.json",
"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": [
{
"id": "Подложка",
"type": "raster",
"source": "basemap",
"paint": {}
},
{
"id": "Границы",
"type": "line",
@ -56,7 +44,13 @@
"source-layer": "regionsvalues",
"paint": {
"fill-opacity": [
"case", ["has", "power_fact_mw"], 1, 0
"case",
[
"has",
"power_fact_mw"
],
1,
0
],
"fill-color": [
"step",
@ -97,7 +91,13 @@
"source-layer": "regionsvalues",
"paint": {
"fill-opacity": [
"case", ["has", "power_plan_mw"], 1, 0
"case",
[
"has",
"power_plan_mw"
],
1,
0
],
"fill-color": [
"step",
@ -138,7 +138,13 @@
"source-layer": "regionsvalues",
"paint": {
"fill-opacity": [
"case", ["has", "power_opw_mw"], 1, 0
"case",
[
"has",
"power_opw_mw"
],
1,
0
],
"fill-color": [
"step",
@ -179,7 +185,13 @@
"source-layer": "regionsvalues",
"paint": {
"fill-opacity": [
"case", ["has", "capacity_additions_mw"], 1, 0
"case",
[
"has",
"capacity_additions_mw"
],
1,
0
],
"fill-color": [
"step",
@ -220,7 +232,13 @@
"source-layer": "regionsvalues",
"paint": {
"fill-opacity": [
"case", ["has", "generation_mwh"], 1, 0
"case",
[
"has",
"generation_mwh"
],
1,
0
],
"fill-color": [
"step",
@ -261,7 +279,13 @@
"source-layer": "regionsvalues",
"paint": {
"fill-opacity": [
"case", ["has", "res_share_generation"], 1, 0
"case",
[
"has",
"res_share_generation"
],
1,
0
],
"fill-color": [
"step",
@ -302,7 +326,13 @@
"source-layer": "regionsvalues",
"paint": {
"fill-opacity": [
"case", ["has", "res_share_power"], 1, 0
"case",
[
"has",
"res_share_power"
],
1,
0
],
"fill-color": [
"step",

Write Preview
Loading…
Cancel
Save