An organization's map can be embedded into a website. To learn how to embed your map into a website, visit this help page: How to add a map from the Clean Water Hub to your website
If you are embedding your organization's map into a website, you may be interested in zooming in the map and centering it around your organization's data. This can be accomplished by adding some language to the map's embed code.
Let's look at the embed code for the Virginia Save Our Streams (VA SOS) organization on the Clean Water Hub as an example. This is the default embed code created by the Clean Water Hub:
<iframe src='https://www.cleanwaterhub.org/organization/74/map?height=600&zoom=3&lng=-98%2E58900742&lat=38%2E36264194' height='600' width='600'></iframe>
Adjusting the Zoom
To adjust how zoomed in the map is, we need to modify the component of the embed code that says "zoom=3" (in bold below).
<iframe src='https://www.cleanwaterhub.org/organization/74/map?height=600&zoom=3&lng=-98%2E58900742&lat=38%2E36264194' height='600' width='600'></iframe>
By default, the map is zoomed to level 3. To zoom in the map further, change zoom=3 to a higher number (e.g. zoom=5, zoom=6.5, zoom=7). Test out a few different zoom levels and see what works for your organization's map. You can use numbers containing decimal points.
Adjusting the Map's Center
To adjust the center point of the map, we need to modify the component of the embed code that specifies the latitude (lat) and longitude (lng) of the map's midpoint (in bold below):
<iframe src='https://www.cleanwaterhub.org/organization/74/map?height=600&zoom=3&lng=-98%2E58900742&lat=38%2E36264194' height='600' width='600'></iframe>
By default, the map is centered around the coordinates 38.36264194, -98.58900742. Note: "%2E" is the URL-encoded version of a period (.) When you are inputting coordinates to re-center the map, you can use a period (.) or you can use "%2E" - both will work.
To center your map around a different point, experiment with different coordinates for this midpoint. Remember that your coordinates must be in the decimal degrees format. This help page can guide you through obtaining coordinates in this format: How do I find my latitude and longitude?
An example:
Let's look at an example of how making adjustments to the embed code changes the way the VA SOS embedded map looks.
Before modifying the code, the embedded map looks like this:
After some experimenting, we find that adjusting the zoom to 6.5 (zoom=6.5) and the center point to the coordinates 37.999904, -78.797756 (lng=-78.797756&lat=37.999904) gives us a map that properly showcases our data:
Thus, the modified embed code for this zoomed and re-centered map would be the following:
<iframe src='https://www.cleanwaterhub.org/organization/74/map?height=600&zoom=6.5&lng=-78.797756&lat=37.999904' height='600' width='600'></iframe>


