Map Widget Appearance Settings.
You can easily change the look of the map container by wrapping our code in your own <div> and adding to its style. Here are some popular examples.
1. How to center the map
To center the map on the page (if its width is less than 100%), wrap our code in a div with the style display: flex; justify-content: center;.
To center the map on the page (if its width is less than 100%), wrap our code in a div with the style display: flex; justify-content: center;.
<div style="display: flex; justify-content: center; padding: 20px 0;"> <!-- our insertion code--> </div>
<div style="display: flex; justify-content: center; padding: 20px 0;"> <!-- The beginning of our insertion code--> <div id="divenumber-map" style="width: 800px; height: 400px;"></div> <script src="https://center.divenumber.com/public/map.js" ... ></script> <!-- The end of our code --> </div>
Example:
2. How to add a shadow and soft padding
This will add "volume" to the map and separate it from the background, which looks especially good on sites with textured or colored backgrounds.
This will add "volume" to the map and separate it from the background, which looks especially good on sites with textured or colored backgrounds.
<div style="padding: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);"> <!-- our insertion code--> </div>
<div style="padding: 20px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);"> <!-- The beginning of our insertion code--> <div id="divenumber-map" style="width: 800px; height: 400px;"></div> <script src="https://center.divenumber.com/public/map.js" ... ></script> <!-- The end of our code --> </div>
Example:
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); — creates a soft, blurred shadow. You can change these values.
- padding: 20px; — adds padding so that the shadow is clearly visible.
3. How to add a border
You can add a border of any color and thickness.
You can add a border of any color and thickness.
<div style="border: 2px solid #007bff; padding: 5px; border-radius: 20px;"> <!-- our insertion code--> </div>
<div style="border: 2px solid #007bff; padding: 5px; border-radius: 20px;"> <!-- The beginning of our insertion code--> <div id="divenumber-map" style="width: 800px; height: 400px;"></div> <script src="https://center.divenumber.com/public/map.js" ... ></script> <!-- The end of our code --> </div>
Example:
- border: 2px solid #007bff; — 2px thick, solid, blue border.
- Notice that we added border-radius to both the outer div and the map itself so that the rounding is perfect.
4. Combined example: Center, shadow and frame
You can easily combine these styles..
You can easily combine these styles..
<div style="display: flex; justify-content: center;"> <div style="padding: 10px; border: 1px solid #ddd; box-shadow: 0 5px 15px rgba(0,0,0,0.08); border-radius: 25px;"> <!-- our insertion code--> </div> </div>
<div style="display: flex; justify-content: center;"> <div style="padding: 10px; border: 1px solid #ddd; box-shadow: 0 5px 15px rgba(0,0,0,0.08); border-radius: 25px;"> <!-- The beginning of our insertion code--> <div id="divenumber-map" style="width: 800px; height: 400px;"></div> <script src="https://center.divenumber.com/public/map.js" ... ></script> <!-- The end of our code --> </div> </div>
Example:
Make the Map Mobile-Friendly
1. Completely remove rounding on mobile
Add this CSS to your website:
Add this CSS to your website:
<style>/* Overriding styles for mobile only */ @media (max-width: 480px) { #divenumber-map .leaflet-container { border-radius: 0 !important; } } </style>
Example:
2. Set a fixed radius for mobile
Add this CSS to your website:
Add this CSS to your website:
<style>@media (max-width: 480px) { #divenumber-map .leaflet-container { /*Setting a hard value, ignoring the CSS variable*/ border-radius: 10px !important; } } </style>
Example:
3. Change the "breakpoint"
Add this CSS to your website:
Add this CSS to your website:
<style> @media (max-width: 480px) { #divenumber-map .leaflet-container { border-radius: calc(var(--map-base-radius, 0) * 1px) !important; } } @media (max-width: 600px) { #divenumber-map .leaflet-container { border-radius: calc(var(--map-base-radius, 0) / 2 * 1px) !important; } } </style>
<style>/*First, we return the desktop style for our media query */ @media (max-width: 480px) { #divenumber-map .leaflet-container { border-radius: calc(var(--map-base-radius, 0) * 1px) !important; } } /* And then we set a new rule for600px */ @media (max-width: 600px) { #divenumber-map .leaflet-container { border-radius: calc(var(--map-base-radius, 0) / 2 * 1px) !important; } } </style>
Example:
Instal App
Now
Now
© 2025 Dive Number Ukraine Obukhiv city Myru 17 st. 213 fl.
