Update index.html

Add map legend
This commit is contained in:
Daniel LaForce 2024-08-07 16:00:31 -06:00
parent e77325c60d
commit 2634b29089
1 changed files with 25 additions and 2 deletions

View File

@ -35,8 +35,8 @@
padding: 20px; padding: 20px;
} }
iframe { iframe {
width: 960px; /* 800px + 20% */ width: 960px;
height: 660px; /* 550px + 20% */ height: 660px;
border: none; border: none;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1);
@ -71,6 +71,25 @@
text-decoration: none; text-decoration: none;
margin-left: 5px; margin-left: 5px;
} }
.legend {
text-align: left;
margin-bottom: 20px;
}
.legend div {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.legend div span {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
border: 1px solid #ccc;
}
.legend .green {
background-color: green;
}
</style> </style>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CC1B9CQ691"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-CC1B9CQ691"></script>
<script> <script>
@ -84,6 +103,10 @@
<div class="header"> <div class="header">
<h1>CSMS Claims and Neighbors</h1> <h1>CSMS Claims and Neighbors</h1>
</div> </div>
<div class="legend">
<h3>Legend:</h3>
<div><span class="green"></span> Our Claims</div>
</div>
<div class="map-container"> <div class="map-container">
<iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F"></iframe> <iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F"></iframe>
<iframe src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True"></iframe> <iframe src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True"></iframe>