(Some cities deleted because of demo. When you purchased that all cities and districts will be opened.)
Turkey Districts Map v1.0
This is districts svg map of Turkey. You can simply change the background color, map color or tooltip data. You can add different colors to each district or city. This map is created with Sketch app by me (Bora Dan). Send a message to me for anything to learn about this map! I hope you enjoy.
- Firstly; start with copy the /turkey-map folder to your project directory.
- Add turkey-map css and javascript file paths in your <head> tag. Example;
<link rel="stylesheet" href="turkey-map/style/style.css">
<script src="turkey-map/js/main.js"></script>
- Now you are ready for show the map. Just add <div id="turkey-map"></div> in your html file that you want to show
- Turkey Districts Map allows properties more than one. Simply you can add html5 data attribute for these. The list of properties;
data-map="districts"
data-map attribute can get two values. 'districts' or 'city'. 'districts' shows districts name in tooltip. 'city' shows city name in tooltip.
data-bg-color="#fff5d0"
data-bg-color can change the background color for map background.
data-map-color="#333333"
data-map-color can change the map color.
- If you want to run your own javascript function when you clicked the city on the map you can add these jquery lines in your javascript file.
$('#turkey-map').on('click', '#turkey > g', function() {
[your code]
});
or
$('#turkey-map').on('click', '#turkey #Ankara', function() {
[your code]
});
or
$('#turkey-map').on('click', '#turkey #Ankara #Keçiören', function() {
[your code]
});
-
If you want add different colors on cities or districts, you must add that colors as <color> element in <div id="turkey-map"> div element. Example;
<div id="turkey-map" data-map="districts" data-bg-color="#FFF5D0">
<color id="Keçiören" data-color="color1"></color>
<color id="İstanbul" data-color="color2"></color>
<color id="İzmir" data-color="color3"></color>
</div>
Don't forget, before this, define your color classes in your .css file. Example;
.color1 { fill: #ed145a; }
.color2 { fill: #d7a35a; }