Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Vue JS de böyle bir harita bulabilir miyim ?

koti42

https://prnt.sc/FC87yWCj_JVP

Tam olarak resimde ki gibi interaktif bir harita arıyorum ama bulamadım.

Kendim manuel yapmak istedim çok uzun zaman alıyor ve istediğim gibi de olmuyor

<template>
  <div class="map-container">
    <!-- Bölge Göstergeleri -->
    <div class="region-legend">
      <div v-for="region in regions"
           :key="region.id"
           class="legend-item">
        <div class="color-box" :style="{ backgroundColor: region.color }"></div>
        <span>{{ region.name }}</span>
      </div>
    </div>

    <!-- Harita -->
    <div class="turkey-map">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="90 20 100 60" 
      style="width: 100%; height: auto;"
      >
      <g>
        <path
          v-for="city in cities"
          :key="city.id"
          :d="city.path"
          :fill="getRegionColor(city.region)"
          stroke="#ffffff"
          stroke-width="0.2"
          @mouseover="handleMouseOver(city)"
          @mouseout="handleMouseOut"
          @click="handleClick(city)"
        />
      </g>
      </svg>
    </div>

    <!-- Hover Tooltip -->
    <div v-if="hoveredCity"
         class="city-tooltip"
         :style="tooltipStyle">
      <h3>{{ hoveredCity.name }}</h3>
      <p>{{ getRegionName(hoveredCity.region) }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TurkeyMap',
  data() {
    return {
      regions: [
        { id: 1, name: '1.Bölge', color: '#c0392b' },
        { id: 2, name: '2.Bölge', color: '#3498db' },
        { id: 3, name: '3.Bölge', color: '#2ecc71' },
        { id: 4, name: '4.Bölge', color: '#f1c40f' },
        { id: 5, name: '5.Bölge', color: '#9b59b6' },
        { id: 6, name: '6.Bölge', color: '#d35400' }
      ],
      cities: [
        {
          id: 34,
          name: 'İstanbul',
          region: 1,
          path: 'M149.44,48.53L152.64,49.45L154.48,49.46L159.07,50.97L162.60999999999999,51.74L163.57999999999998,51.18L166.23,52.19L168.42999999999998,52.559999999999995L170.29,52.35999999999999L172.98,53.419999999999995L174.29,53.209999999999994L176.91,53.35999999999999L176.91,53.35999999999999L177,55.959999999999994L175.86,57.38999999999999L174.63000000000002,59.89999999999999L173.00000000000003,60.44999999999999L170.33000000000004,59.34999999999999L168.82000000000005,59.51999999999999L167.95000000000005,60.45999999999999L167.12000000000003,63.08999999999999L166.47000000000003,63.33999999999999L162.59000000000003,62.33999999999999L160.41000000000003,62.48999999999999L159.45000000000002,62.929999999999986L158.53000000000003,63.73999999999999L157.48000000000002,66.23999999999998L155.39000000000001,67.55999999999997L154.67000000000002,68.76999999999997L154.16000000000003,68.78999999999996L153.24000000000004,70.71999999999997L152.70000000000005,70.69999999999997L152.44000000000005,71.68999999999997L152.44000000000005,71.68999999999997L151.41000000000005,70.96999999999997L150.96000000000006,71.32999999999997L150.46000000000006,71.12999999999997L149.18000000000006,71.40999999999997L149.06000000000006,71.72999999999996L148.85000000000005,71.57999999999996L148.71000000000006,71.21999999999996L149.71000000000006,70.67999999999995L149.12000000000006,69.80999999999995L149.74000000000007,70.13999999999994L150.25000000000006,69.62999999999994L150.08000000000007,69.05999999999995L148.94000000000008,69.01999999999994L149.0900000000001,68.73999999999994L148.7700000000001,68.20999999999994L148.0800000000001,67.86999999999993L147.6400000000001,68.16999999999993L144.1900000000001,66.47999999999993L142.7500000000001,64.33999999999993L140.1900000000001,62.74999999999993L139.9200000000001,63.01999999999993L139.5800000000001,62.02999999999993L139.0900000000001,62.28999999999993L138.4500000000001,59.93999999999993L140.3200000000001,58.45999999999993L140.4500000000001,57.10999999999993L140.9200000000001,56.55999999999993L140.9600000000001,55.47999999999993L142.1100000000001,54.69999999999993L141.9200000000001,53.74999999999993L141.1600000000001,53.28999999999993L141.4200000000001,52.78999999999993L141.28000000000011,52.089999999999925L141.7900000000001,51.77999999999992L141.8500000000001,51.32999999999992L142.8800000000001,51.03999999999992L143.1900000000001,50.10999999999992L145.09000000000012,48.82999999999992L146.3800000000001,49.02999999999992L147.2000000000001,48.75999999999992L147.1200000000001,48.45999999999992L148.7700000000001,48.269999999999925L149.44000000000008,48.52999999999992ZM104.11,29.76L104.52,29.990000000000002L104.32,30.19L104.52,30.720000000000002L105.97,32.06L105.96,32.34L106.41,32.410000000000004L108.07,33.870000000000005L117.30999999999999,38.86000000000001L120.16999999999999,40.10000000000001L122.53999999999999,41.57000000000001L124.52999999999999,42.24000000000001L125.17999999999999,42.02000000000001L125.25999999999999,42.35000000000001L129.37,44.45000000000001L136.21,47.040000000000006L139.20000000000002,47.64000000000001L139.66000000000003,47.61000000000001L139.87000000000003,47.02L140.78000000000003,47.09L141.27000000000004,47.470000000000006L141.52000000000004,47.25000000000001L142.89000000000004,48.040000000000006L143.03000000000003,48.300000000000004L142.66000000000003,49.07000000000001L142.87000000000003,49.510000000000005L142.09000000000003,50.17L141.29000000000002,51.510000000000005L139.84000000000003,52.540000000000006L141.23000000000002,54.31000000000001L140.42000000000002,55.82000000000001L140.52,56.61000000000001L140,56.870000000000005L140.1,57.42L139.53,58.4L138.05,59.07L137.70000000000002,59.58L137.59,60.8L135.56,61.07L135.06,61.76L134.54,61.78L134.09,62.25L131.99,62.54L131.26000000000002,63.5L130.3,63.42L128.36,62.2L127.46000000000001,62.68L125.75000000000001,62.58L124.48000000000002,63.15L122.52000000000002,63.28L121.49000000000002,62.620000000000005L121.71000000000002,60.67L121.17000000000002,60.2L120.24000000000001,60.160000000000004L119.46000000000001,61.17L119.24000000000001,61.96L116.13000000000001,59.79L114.15,58.839999999999996L111.13000000000001,57.949999999999996L107.55000000000001,57.69L106.46000000000001,56.849999999999994L105.95,56.849999999999994L105.51,57.23L103.76,57.089999999999996L102.24000000000001,57.459999999999994L101.85000000000001,57.809999999999995L99.89000000000001,58.01L96.78000000000002,59.78L96.78000000000002,59.78L95.88000000000001,57.81L96.14000000000001,57.18L95.81000000000002,56.78L95.95000000000002,55.65L96.22000000000001,55.44L96.04,54.94L97.78,51.43L97.58,50.15L97.77,48.99L100.16,44.92L100.89999999999999,41.61L101.78999999999999,34.84L103.32,29.270000000000003L103.32,29.270000000000003L104.11,29.76Z'
        }    ,
        {
          id: 35,
          name: 'İstanbul2',
          region: 1,
          path: 'M149.44,48.53L152.64,49.45L154.48,49.46L159.07,50.97L162.60999999999999,51.74L163.57999999999998,51.18L166.23,52.19L168.42999999999998,52.559999999999995L170.29,52.35999999999999L172.98,53.419999999999995L174.29,53.209999999999994L176.91,53.35999999999999L176.91,53.35999999999999L177,55.959999999999994L175.86,57.38999999999999L174.63000000000002,59.89999999999999L173.00000000000003,60.44999999999999L170.33000000000004,59.34999999999999L168.82000000000005,59.51999999999999L167.95000000000005,60.45999999999999L167.12000000000003,63.08999999999999L166.47000000000003,63.33999999999999L162.59000000000003,62.33999999999999L160.41000000000003,62.48999999999999L159.45000000000002,62.929999999999986L158.53000000000003,63.73999999999999L157.48000000000002,66.23999999999998L155.39000000000001,67.55999999999997L154.67000000000002,68.76999999999997L154.16000000000003,68.78999999999996L153.24000000000004,70.71999999999997L152.70000000000005,70.69999999999997L152.44000000000005,71.68999999999997L152.44000000000005,71.68999999999997L151.41000000000005,70.96999999999997L150.96000000000006,71.32999999999997L150.46000000000006,71.12999999999997L149.18000000000006,71.40999999999997L149.06000000000006,71.72999999999996L148.85000000000005,71.57999999999996L148.71000000000006,71.21999999999996L149.71000000000006,70.67999999999995L149.12000000000006,69.80999999999995L149.74000000000007,70.13999999999994L150.25000000000006,69.62999999999994L150.08000000000007,69.05999999999995L148.94000000000008,69.01999999999994L149.0900000000001,68.73999999999994L148.7700000000001,68.20999999999994L148.0800000000001,67.86999999999993L147.6400000000001,68.16999999999993L144.1900000000001,66.47999999999993L142.7500000000001,64.33999999999993L140.1900000000001,62.74999999999993L139.9200000000001,63.01999999999993L139.5800000000001,62.02999999999993L139.0900000000001,62.28999999999993L138.4500000000001,59.93999999999993L140.3200000000001,58.45999999999993L140.4500000000001,57.10999999999993L140.9200000000001,56.55999999999993L140.9600000000001,55.47999999999993L142.1100000000001,54.69999999999993L141.9200000000001,53.74999999999993L141.1600000000001,53.28999999999993L141.4200000000001,52.78999999999993L141.28000000000011,52.089999999999925L141.7900000000001,51.77999999999992L141.8500000000001,51.32999999999992L142.8800000000001,51.03999999999992L143.1900000000001,50.10999999999992L145.09000000000012,48.82999999999992L146.3800000000001,49.02999999999992L147.2000000000001,48.75999999999992L147.1200000000001,48.45999999999992L148.7700000000001,48.269999999999925L149.44000000000008,48.52999999999992ZM104.11,29.76L104.52,29.990000000000002L104.32,30.19L104.52,30.720000000000002L105.97,32.06L105.96,32.34L106.41,32.410000000000004L108.07,33.870000000000005L117.30999999999999,38.86000000000001L120.16999999999999,40.10000000000001L122.53999999999999,41.57000000000001L124.52999999999999,42.24000000000001L125.17999999999999,42.02000000000001L125.25999999999999,42.35000000000001L129.37,44.45000000000001L136.21,47.040000000000006L139.20000000000002,47.64000000000001L139.66000000000003,47.61000000000001L139.87000000000003,47.02L140.78000000000003,47.09L141.27000000000004,47.470000000000006L141.52000000000004,47.25000000000001L142.89000000000004,48.040000000000006L143.03000000000003,48.300000000000004L142.66000000000003,49.07000000000001L142.87000000000003,49.510000000000005L142.09000000000003,50.17L141.29000000000002,51.510000000000005L139.84000000000003,52.540000000000006L141.23000000000002,54.31000000000001L140.42000000000002,55.82000000000001L140.52,56.61000000000001L140,56.870000000000005L140.1,57.42L139.53,58.4L138.05,59.07L137.70000000000002,59.58L137.59,60.8L135.56,61.07L135.06,61.76L134.54,61.78L134.09,62.25L131.99,62.54L131.26000000000002,63.5L130.3,63.42L128.36,62.2L127.46000000000001,62.68L125.75000000000001,62.58L124.48000000000002,63.15L122.52000000000002,63.28L121.49000000000002,62.620000000000005L121.71000000000002,60.67L121.17000000000002,60.2L120.24000000000001,60.160000000000004L119.46000000000001,61.17L119.24000000000001,61.96L116.13000000000001,59.79L114.15,58.839999999999996L111.13000000000001,57.949999999999996L107.55000000000001,57.69L106.46000000000001,56.849999999999994L105.95,56.849999999999994L105.51,57.23L103.76,57.089999999999996L102.24000000000001,57.459999999999994L101.85000000000001,57.809999999999995L99.89000000000001,58.01L96.78000000000002,59.78L96.78000000000002,59.78L95.88000000000001,57.81L96.14000000000001,57.18L95.81000000000002,56.78L95.95000000000002,55.65L96.22000000000001,55.44L96.04,54.94L97.78,51.43L97.58,50.15L97.77,48.99L100.16,44.92L100.89999999999999,41.61L101.78999999999999,34.84L103.32,29.270000000000003L103.32,29.270000000000003L104.11,29.76Z'
        }  ,      
        {
          id: 36,
          name: 'İstanbul3',
          region: 1,
          path: 'M149.44,48.53L152.64,49.45L154.48,49.46L159.07,50.97L162.60999999999999,51.74L163.57999999999998,51.18L166.23,52.19L168.42999999999998,52.559999999999995L170.29,52.35999999999999L172.98,53.419999999999995L174.29,53.209999999999994L176.91,53.35999999999999L176.91,53.35999999999999L177,55.959999999999994L175.86,57.38999999999999L174.63000000000002,59.89999999999999L173.00000000000003,60.44999999999999L170.33000000000004,59.34999999999999L168.82000000000005,59.51999999999999L167.95000000000005,60.45999999999999L167.12000000000003,63.08999999999999L166.47000000000003,63.33999999999999L162.59000000000003,62.33999999999999L160.41000000000003,62.48999999999999L159.45000000000002,62.929999999999986L158.53000000000003,63.73999999999999L157.48000000000002,66.23999999999998L155.39000000000001,67.55999999999997L154.67000000000002,68.76999999999997L154.16000000000003,68.78999999999996L153.24000000000004,70.71999999999997L152.70000000000005,70.69999999999997L152.44000000000005,71.68999999999997L152.44000000000005,71.68999999999997L151.41000000000005,70.96999999999997L150.96000000000006,71.32999999999997L150.46000000000006,71.12999999999997L149.18000000000006,71.40999999999997L149.06000000000006,71.72999999999996L148.85000000000005,71.57999999999996L148.71000000000006,71.21999999999996L149.71000000000006,70.67999999999995L149.12000000000006,69.80999999999995L149.74000000000007,70.13999999999994L150.25000000000006,69.62999999999994L150.08000000000007,69.05999999999995L148.94000000000008,69.01999999999994L149.0900000000001,68.73999999999994L148.7700000000001,68.20999999999994L148.0800000000001,67.86999999999993L147.6400000000001,68.16999999999993L144.1900000000001,66.47999999999993L142.7500000000001,64.33999999999993L140.1900000000001,62.74999999999993L139.9200000000001,63.01999999999993L139.5800000000001,62.02999999999993L139.0900000000001,62.28999999999993L138.4500000000001,59.93999999999993L140.3200000000001,58.45999999999993L140.4500000000001,57.10999999999993L140.9200000000001,56.55999999999993L140.9600000000001,55.47999999999993L142.1100000000001,54.69999999999993L141.9200000000001,53.74999999999993L141.1600000000001,53.28999999999993L141.4200000000001,52.78999999999993L141.28000000000011,52.089999999999925L141.7900000000001,51.77999999999992L141.8500000000001,51.32999999999992L142.8800000000001,51.03999999999992L143.1900000000001,50.10999999999992L145.09000000000012,48.82999999999992L146.3800000000001,49.02999999999992L147.2000000000001,48.75999999999992L147.1200000000001,48.45999999999992L148.7700000000001,48.269999999999925L149.44000000000008,48.52999999999992ZM104.11,29.76L104.52,29.990000000000002L104.32,30.19L104.52,30.720000000000002L105.97,32.06L105.96,32.34L106.41,32.410000000000004L108.07,33.870000000000005L117.30999999999999,38.86000000000001L120.16999999999999,40.10000000000001L122.53999999999999,41.57000000000001L124.52999999999999,42.24000000000001L125.17999999999999,42.02000000000001L125.25999999999999,42.35000000000001L129.37,44.45000000000001L136.21,47.040000000000006L139.20000000000002,47.64000000000001L139.66000000000003,47.61000000000001L139.87000000000003,47.02L140.78000000000003,47.09L141.27000000000004,47.470000000000006L141.52000000000004,47.25000000000001L142.89000000000004,48.040000000000006L143.03000000000003,48.300000000000004L142.66000000000003,49.07000000000001L142.87000000000003,49.510000000000005L142.09000000000003,50.17L141.29000000000002,51.510000000000005L139.84000000000003,52.540000000000006L141.23000000000002,54.31000000000001L140.42000000000002,55.82000000000001L140.52,56.61000000000001L140,56.870000000000005L140.1,57.42L139.53,58.4L138.05,59.07L137.70000000000002,59.58L137.59,60.8L135.56,61.07L135.06,61.76L134.54,61.78L134.09,62.25L131.99,62.54L131.26000000000002,63.5L130.3,63.42L128.36,62.2L127.46000000000001,62.68L125.75000000000001,62.58L124.48000000000002,63.15L122.52000000000002,63.28L121.49000000000002,62.620000000000005L121.71000000000002,60.67L121.17000000000002,60.2L120.24000000000001,60.160000000000004L119.46000000000001,61.17L119.24000000000001,61.96L116.13000000000001,59.79L114.15,58.839999999999996L111.13000000000001,57.949999999999996L107.55000000000001,57.69L106.46000000000001,56.849999999999994L105.95,56.849999999999994L105.51,57.23L103.76,57.089999999999996L102.24000000000001,57.459999999999994L101.85000000000001,57.809999999999995L99.89000000000001,58.01L96.78000000000002,59.78L96.78000000000002,59.78L95.88000000000001,57.81L96.14000000000001,57.18L95.81000000000002,56.78L95.95000000000002,55.65L96.22000000000001,55.44L96.04,54.94L97.78,51.43L97.58,50.15L97.77,48.99L100.16,44.92L100.89999999999999,41.61L101.78999999999999,34.84L103.32,29.270000000000003L103.32,29.270000000000003L104.11,29.76Z'
        }
      ],
      hoveredCity: null,
      mousePosition: {
        x: 0,
        y: 0
      }
    }
  },
  computed: {
    tooltipStyle() {
      return {
        left: `${this.mousePosition.x + 10}px`,
        top: `${this.mousePosition.y + 10}px`
      }
    }
  },
  methods: {
    getRegionColor(regionId) {
      const region = this.regions.find(r => r.id === regionId)
      return region ? region.color : '#cccccc'
    },
    getRegionName(regionId) {
      const region = this.regions.find(r => r.id === regionId)
      return region ? region.name : ''
    },
    handleMouseOver(city) {
      this.hoveredCity = city
    },
    handleMouseOut() {
      this.hoveredCity = null
    },
    handleClick(city) {
      console.log('Selected city:', city)
      // Burada seçilen şehir için modal açılabilir
    },
    updateMousePosition(event) {
      this.mousePosition = {
        x: event.clientX,
        y: event.clientY
      }
    }
  },
  mounted() {
    window.addEventListener('mousemove', this.updateMousePosition)
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.updateMousePosition)
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

.region-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-box {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.turkey-map {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.city-tooltip {
  position: fixed;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
  pointer-events: none;
}

path {
  transition: opacity 0.3s;
  cursor: pointer;
}

path:hover {
  opacity: 0.8;
}
</style>

koti42

https://github.com/trombonist76/vue-turkey-map/blob/main/src/assets/data/cities.json Dostlar bu şekilde bir path dosyası buldum harita için bunu kullandım

Script kısmını paylaşayım umarım işinize yarar

<script>
import cityData from '../business/cities/cities.json'

export default {
  name: 'TurkeyMap',
  data() {
    return {
      cities: cityData,
      hoveredCity: null,
      selectedCity: null,
      hoveredRegion: null,
      selectedRegion: null,
      showRegionModal: false,
      mousePosition: { x: 0, y: 0 },
      regions: [
        { id: 1, name: '1.Bölge', color: '#c0392b' },
        { id: 2, name: '2.Bölge', color: '#5065a1' },
        { id: 3, name: '3.Bölge', color: '#95db00' },
        { id: 4, name: '4.Bölge', color: '#ddc41f' },
        { id: 5, name: '5.Bölge', color: '#603a60' },
        { id: 6, name: '6.Bölge', color: '#b25e40' }
      ],
      cityRegions: {
        16: 1, 26: 1, 34: 1, 35: 1, 41: 1, 48: 1, 59: 1, 7: 1, 6: 1,
        10: 2, 11: 2, 14: 2, 17: 2, 20: 2, 22: 2, 32: 2, 38: 2, 39: 2,
        42: 2, 45: 2, 54: 2, 77: 2, 78: 2, 9: 2,
        15: 3, 27: 3, 33: 3, 43: 3, 53: 3, 55: 3, 61: 3, 64: 3, 67: 3,
        70: 3, 71: 3, 81: 3, 1: 3,
        19: 4, 23: 4, 24: 4, 31: 4, 37: 4, 40: 4, 44: 4, 50: 4, 58: 4,
        68: 4, 74: 4, 8: 4, 5: 4, 3: 4,
        18: 5, 25: 5, 28: 5, 29: 5, 46: 5, 51: 5, 52: 5, 57: 5, 60: 5,
        62: 5, 66: 5, 69: 5, 79: 5, 80: 5,
        12: 6, 13: 6, 21: 6, 30: 6, 36: 6, 47: 6, 49: 6, 56: 6, 63: 6,
        65: 6, 72: 6, 73: 6, 75: 6, 76: 6, 4: 6, 2: 6
      }
    }
  },
  computed: {
    tooltipStyle() {
      return {
        left: `${this.mousePosition.x + 10}px`,
        top: `${this.mousePosition.y + 10}px`
      }
    }
  },
  methods: {
    getCityColor(city) {
      const region = this.getCityRegion(city)
      const regionData = this.regions.find(r => r.id === region)
      return regionData ? regionData.color : '#cccccc'
    },
    handleRegionHover(region) {
      this.hoveredRegion = region
    },
    handleRegionLeave() {
      this.hoveredRegion = null
    },
    handleRegionClick(region) {
      this.selectedRegion = region
      this.showRegionModal = true
    },
    closeModal() {
      this.showRegionModal = false
      this.selectedRegion = null
    },
    getRegionCities(regionId) {
      return this.cities.filter(city => this.cityRegions[city.plateNumber] === regionId)
    },
    getCityRegion(city) {
      return this.cityRegions[city.plateNumber] || 1
    },
    getRegionName(regionId) {
      const region = this.regions.find(r => r.id === regionId)
      return region ? region.name : ''
    },
    handleCityHover(city) {
      this.hoveredCity = city
    },
    handleCityLeave() {
      this.hoveredCity = null
    },
    handleCityClick(city) {
      this.selectedCity = city
    },
    updateMousePosition(event) {
      this.mousePosition = {
        x: event.clientX,
        y: event.clientY
      }
    }
  },
  mounted() {
    window.addEventListener('mousemove', this.updateMousePosition)
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.updateMousePosition)
  }
}
</script>