import React from 'react';
import './ControlsPanel.scss';

const ControlsPanel = ({ layersVisibility, toggleLayer, mapStyles, selectedStyle, changeMapStyle }) => {
  return (
    <div className="controls-panel">
      <h3>Управление Картой</h3>
      <div className="layer-controls">
        <h4>Слои</h4>
        {Object.keys(layersVisibility).map((layer) => (
          <label key={layer}>
            <input
              type="checkbox"
              checked={layersVisibility[layer]}
              onChange={() => toggleLayer(layer)}
            />
            {layer.charAt(0).toUpperCase() + layer.slice(1)}
          </label>
        ))}
      </div>
      <div className="style-controls">
        <h4>Тип карты</h4>
        <select value={selectedStyle} onChange={(e) => changeMapStyle(e.target.value)}>
          {mapStyles.map((style) => (
            <option key={style} value={style}>
              {style.charAt(0).toUpperCase() + style.slice(1)}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

export default ControlsPanel;




.controls-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    
    h3 {
      margin-bottom: 0.5rem;
    }
    
    .layer-controls, .style-controls {
      margin-bottom: 1rem;
      
      h4 {
        margin-bottom: 0.5rem;
      }
      
      label {
        display: block;
        margin-bottom: 0.25rem;
        cursor: pointer;
        
        input {
          margin-right: 0.5rem;
        }
      }
    }
    
    select {
      width: 100%;
      padding: 0.25rem;
      border-radius: 4px;
      border: 1px solid #ccc;
    }
  }





import React, { useState, useRef, useEffect } from 'react';
import { MapContainer, TileLayer, GeoJSON, LayersControl, useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import './KGMap.scss';
import ControlsPanel from './ControlsPanel';
import SearchBar from './SearchBar';

// Импорт GeoJSON данных
import citiesData from './data/cities.geojson';
import roadsData from './data/roads.geojson';
import waterbodiesData from './data/waterbodies.geojson';
import reliefData from './data/relief.geojson';
import 'leaflet-rotate';

const { BaseLayer, Overlay } = LayersControl;

// Компонент для обработки поиска
const SearchControl = ({ query }) => {
  const map = useMap();

  React.useEffect(() => {
    if (!query) return;

    // Ищем в слоях GeoJSON объекты с именем, совпадающим с запросом
    const searchLayer = (data) => {
      for (const feature of data.features) {
        if (feature.properties.name.toLowerCase() === query.toLowerCase()) {
          const coords = feature.geometry.coordinates;
          let lat, lng;

          if (feature.geometry.type === "Point") {
            [lng, lat] = coords;
          } else if (feature.geometry.type === "Polygon" || feature.geometry.type === "MultiPolygon") {
            [lng, lat] = coords[0][0];
          }

          map.setView([lat, lng], 12);
          L.circleMarker([lat, lng], {
            radius: 10,
            color: 'orange',
            fillColor: '#f03',
            fillOpacity: 0.5,
          }).addTo(map).bindPopup(`<strong>${feature.properties.name}</strong>`).openPopup();
        }
      }
    };

    searchLayer(citiesData);
    // Можно добавить поиск во всех слоях при необходимости
  }, [query, map]);

  return null;
};

const KGMap = () => {
  const [layersVisibility, setLayersVisibility] = useState({
    cities: true,
    roads: true,
    waterbodies: true,
    relief: true,
  });

  const mapRef = useRef(null);

  useEffect(() => {
    const mapInstance = mapRef.current;
    if (mapInstance) {
      L.control.rotate({
        position: 'topright',
        center: [41.2044, 74.7661],
      }).addTo(mapInstance);
    }
  }, []);

  const mapStyles = [
    'streets',
    'satellite',
    'light',
    'dark',
    'outdoors',
    'navigation-day',
    'navigation-night',
    'satellite-streets',
  ];

  const [selectedStyle, setSelectedStyle] = useState('streets');
  const [searchQuery, setSearchQuery] = useState('');

  const toggleLayer = (layer) => {
    setLayersVisibility((prev) => ({
      ...prev,
      [layer]: !prev[layer],
    }));
  };

  const changeMapStyle = (style) => {
    setSelectedStyle(style);
  };

  const handleSearch = (query) => {
    setSearchQuery(query);
  };

  const getBaseLayerUrl = (style) => {
    const styles = {
      streets: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      satellite: 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
      light: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      dark: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      outdoors: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      'navigation-day': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      'navigation-night': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      'satellite-streets': 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    };
    return styles[style] || styles['streets'];
  };

  const styleLayer = (color) => ({
    color: color,
    weight: 2,
    fillOpacity: 0.5,
  });

  const onEachFeature = (feature, layer) => {
    if (feature.properties && feature.properties.name) {
      layer.bindPopup(`<strong>${feature.properties.name}</strong>`);
    }
  };

  return (
    <div className="map-wrapper">
      <ControlsPanel
        layersVisibility={layersVisibility}
        toggleLayer={toggleLayer}
        mapStyles={mapStyles}
        selectedStyle={selectedStyle}
        changeMapStyle={changeMapStyle}
      />
      <SearchBar onSearch={handleSearch} />
      <MapContainer center={[41.2044, 74.7661]} zoom={7} scrollWheelZoom={true} className="custom-map">
        <TileLayer url={getBaseLayerUrl(selectedStyle)} attribution="&copy; OpenStreetMap contributors" />
        
        {layersVisibility.cities && (
          <GeoJSON data={citiesData} style={styleLayer('red')} onEachFeature={onEachFeature} />
        )}
        {layersVisibility.roads && (
          <GeoJSON data={roadsData} style={styleLayer('blue')} onEachFeature={onEachFeature} />
        )}
        {layersVisibility.waterbodies && (
          <GeoJSON data={waterbodiesData} style={styleLayer('cyan')} onEachFeature={onEachFeature} />
        )}
        {layersVisibility.relief && (
          <GeoJSON data={reliefData} style={styleLayer('green')} onEachFeature={onEachFeature} />
        )}

        {searchQuery && <SearchControl query={searchQuery} />}
      </MapContainer>
    </div>
  );
};

export default KGMap;





.map-wrapper {
    position: relative;
    height: 100vh;
  }
  
  .custom-map {
    height: 100%;
    width: 100%;
  }
  
  .leaflet-container {
    background: #f0f0f0;
  }



import React, { useState } from 'react';
import './SearchBar.scss';

const SearchBar = ({ onSearch }) => {
  const [query, setQuery] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(query);
  };

  return (
    <form className="search-bar" onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Поиск..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <button type="submit">🔍</button>
    </form>
  );
};

export default SearchBar;




@import '../styles/variables';

.search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
  
    input {
      flex: 1;
      padding: 0.5rem;
      border: 1px solid #ccc;
      border-radius: 4px 0 0 4px;
      font-size: 1rem;
    }
  
    button {
      padding: 0.5rem;
      border: none;
      background-color: $primary-color;
      color: #fff;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
      font-size: 1rem;
      transition: background-color 0.3s ease;
  
      &:hover {
        background-color: $primary-hover;
      }
    }
  }



cities.geojson:
{
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": { "name": "Бишкек" },
        "geometry": {
          "type": "Point",
          "coordinates": [74.5667, 42.8667]
        }
      },
      {
        "type": "Feature",
        "properties": { "name": "Ош" },
        "geometry": {
          "type": "Point",
          "coordinates": [72.0408, 40.5094]
        }
      }


      
    ]
  }


relief.geojson:
{
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": { "name": "Тянь-Шань" },
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [75.0, 43.0],
            [76.0, 44.0],
            [77.0, 45.0]
          ]
        }
      }
    ]
  }




roads.geojson:
{
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": { "name": "Астана-Бишкек" },
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [74.5667, 42.8667],
            [75.0, 43.0],
            [76.0, 43.5]
          ]
        }
      }
    ]
  }





waterbodies.geojson:
{
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "properties": { "name": "Иссык-Куль" },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [76.0, 42.0],
              [76.5, 42.0],
              [76.5, 42.5],
              [76.0, 42.5],
              [76.0, 42.0]
            ]
          ]
        }
      }
 
    ]
  }



хочу сделать максимально детализированную интерактивную карту Кыргызстана в котором можно просматривать накладывая разные слои и географические элементы выбирая из панели управления по одному или можно сразу все включить при желании также можешь добавить что то что еще больше улучшит это

Максимально детальная интерактивная карта Кыргызстана в которой должна быть детальная карта кыргызстана и панель управления где можно управлять выводом географических элементов (городов, других населенных пунктов, водоемов, дорог, рельефов и возможно чего то еще что я забыл можешь сам добавить) и Возможность выбора и переключения между различными типами карт (физическая, Административная) ,Интерактивное управление картой (увеличение/уменьшение масштаба, навигация, вращение, просмотр мелких деталей),Выбор и отображение отдельных областей Кыргызстана с возможностью просмотра подробной информации об областях (история, демографические данные, культурные и природные объекты).
Функционал фильтрации и поиска:
• Возможность поиска и отображения объектов по различным параметрам (по категориям, названию, географическим координатам).
• Выбор и отображение различных слоев данных (например, климатические зоны, транспортные сети, рельеф и т. д.).

напиши полные измененные и добавленные коды для всего что нужно я хочу создать карту без использования API а вручную кстати при этом это должны быть не просто картинки svg а что то правда уникальное и максимально интерактивное и профессиональное я хочу сделать карту как у mapbox то есть использовать те же технологии и так далее а также нужно понять каким образом они выводят страны то есть откуда берут информацию соответственно только я хочу создать карту только кыргызстана только одной страны,  учесть код который есть у меня сейчас и написать полные коды для всего что нужно для того чтобы добавить эту карту кыргызстана