Find by Map
.svg-container {
width: 90%;
max-width: 1000px;
height: auto;
}
.svg-container svg {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.title {
font-size: 18px;
}
.legend-item {
font-size: 10px;
}
.instruction-text {
font-size: 10px;
}
}
.state {
fill: #d3d3d3;
stroke: #ffffff;
stroke-width: 1;
transition: fill 0.3s;
}
.state:hover {
fill: #ff9e44;
cursor: pointer;
}
.state.active {
fill: #4682b4;
}
text {
font-family: Arial, sans-serif;
font-size: 12px;
text-anchor: middle;
user-select: none;
pointer-events: none;
}
.title {
font-size: 24px;
font-weight: bold;
}
.legend {
fill: white;
stroke: #333;
stroke-width: 1;
}
.legend-item {
font-size: 12px;
}
a:hover .state {
fill: #ff9e44;
}
.instruction-box {
fill: #f0f8ff;
stroke: #333;
stroke-width: 1;
rx: 5;
}
.instruction-text {
font-size: 12px;
text-anchor: middle;
}
// Function to handle viewport adjustments
function adjustViewForMobile() {
var svg = document.querySelector("svg");
if (window.innerWidth <= 768) {
// On mobile, adjust the elements for better visibility
document.querySelectorAll(".mobile-hide").forEach(function(el) {
el.style.display = "none";
});
document.querySelectorAll(".mobile-adjust").forEach(function(el) {
el.setAttribute("transform", "scale(1.5) translate(-150, -50)");
});
} else {
// Reset for desktop
document.querySelectorAll(".mobile-hide").forEach(function(el) {
el.style.display = "inline";
});
document.querySelectorAll(".mobile-adjust").forEach(function(el) {
el.setAttribute("transform", "");
});
}
}
// Add event listener for resize
window.addEventListener("load", function() {
adjustViewForMobile();
window.addEventListener("resize", adjustViewForMobile);
});
Interactive Map with Direct Links
Jaipur
Jodhpur
Udaipur
Kota
Bikaner
Jaisalmer
WA
OR
CA
ID
NV
TX
Ajmer
© 2025 Plants of Rajasthan
Legend
No Data available
Plant Data available
How to Use
Click on any region to visit its link.
Rajasthan districts link to Plants of Rajasthan.
US states link to Wikipedia.
Special highlight for Kota plants!
Tap a district to visit
Kota highlighted in red
// Function to check if device is mobile
function isMobile() {
return window.matchMedia("(max-width: 768px)").matches;
}
// Show/hide mobile elements based on screen size
function updateMobileElements() {
var mobileElements = document.querySelectorAll(".mobile-only");
var desktopElements = document.querySelectorAll(".mobile-hide");
if (isMobile()) {
mobileElements.forEach(function(el) {
el.style.display = "inline";
});
desktopElements.forEach(function(el) {
el.style.display = "none";
});
} else {
mobileElements.forEach(function(el) {
el.style.display = "none";
});
desktopElements.forEach(function(el) {
el.style.display = "inline";
});
}
}
// Add event listeners for proper mobile handling
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
updateMobileElements();
window.addEventListener("resize", updateMobileElements);
});
}