- Firstly; start with copy the /turkey-map folder to your project directory.
- Add Jquery library to your project if you don't have one.
- 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;
style="width: 1120px;"
Simply you can change the width or height value of your map.
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-map-color="#333333"
data-map-color can change the map color.
data-city="Iğdır"
If you want to show only one city use data-city attribute and write exact name of the city that you want to show.
data-zoom="true"
When you add this attribute to your element the map will zoom to city that you clicked. (It doesn't work with data-city mode)
- 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() {
console.log($(this).attr('id')) // Get city name
});
$('#turkey-map').on('click', '#turkey > g > g', function() {
console.log($(this).attr('id')) // Get district name
});
$('#turkey-map').on('click', '#turkey #Ankara', function() {
[your code]
});
$('#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">
<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; }