Skip to content

Conversation

Copy link
Contributor

Copilot AI commented Dec 10, 2025

When a city is clicked, display a popup showing its county (ilçe) map. Feature is opt-in via prop and county data must be explicitly imported to avoid bundle bloat.

Changes

New Component

  • CountyMapPopup: Modal overlay with interactive county SVG, supports hover/click/tooltips, includes ARIA attributes and ESC key handling

New Props

  • showCountyMapOnClick: Enable county map feature (default: false)
  • countyData: Record of county data keyed by city ID
  • countyMapWrapper: Custom wrapper for popup styling
  • onCountyClick: Callback with county and city parameters

Data Structure

  • CountyType: { id, name, path }
  • CountyData: { cityId, cityName, counties }
  • Sample data for Istanbul, Ankara, Izmir exported separately at turkey-map-react/lib/data/counties

Usage

import TurkeyMap from 'turkey-map-react';
import { istanbulCounties } from 'turkey-map-react/lib/data/counties';

<TurkeyMap 
  showCountyMapOnClick={true}
  countyData={{ istanbul: istanbulCounties }}
  onCountyClick={(county, city) => {
    console.log(`Clicked ${county.name} in ${city.name}`);
  }}
/>

Note: Sample county data uses placeholder rectangular paths. Production use requires real geographic SVG data.

Original prompt

This section details on the original issue you should resolve

<issue_title>County Map When A City is Clicked </issue_title>
<issue_description>### Introduction

When a city is clicked on the map there is no default behavior as the version of "v2.0.3". For majority of use cases can cover county base actions.

When a city clicked, a county map of the city can be displayed on a popup. This behavior:

  • can be enabled by a prop which is not present by default.
  • can be customized via custom wrapper

County data (built-in or custom) has to be explicitly imported in order to reduce bundle size when not used.
Good example here: https://github.com/ogun/turkiye-svg-ilce-haritasi

Must Haves

  • Built-in county list has to be provided.

Introduced In

v3.0.0</issue_description>

Comments on the Issue (you are @copilot in this section)


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Copilot AI and others added 3 commits December 10, 2025 23:30
- Add CountyMapPopup component with full interactivity
- Add showCountyMapOnClick prop to enable county map display
- Add countyData prop for providing county information
- Add countyMapWrapper prop for custom popup styling
- Add onCountyClick callback for county interactions
- Include sample county data for Istanbul, Ankara, and Izmir
- Export county data separately for tree-shaking support
- Add comprehensive test coverage for new features
- Update README with county map usage examples

Co-authored-by: erdigokce <[email protected]>
- Improve accessibility with ARIA attributes and ESC key support
- Add consistent CountyType usage in API
- Document placeholder nature of sample county data
- Add test for ESC key functionality
- Add test for accessibility attributes

Co-authored-by: erdigokce <[email protected]>
Copilot AI changed the title [WIP] Add county map display when a city is clicked feat: add county map popup on city click Dec 10, 2025
Copilot AI requested a review from erdigokce December 10, 2025 23:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

County Map When A City is Clicked

2 participants