CSS examples

Personalize your map to align with your brand and meet your specific requirements. mamap.io offers not only configuration settings in your dashboard. It's also flexible through CSS because of it being loaded on your website and not being integrated as an Iframe like many other tools.

1. Applying Custom CSS

Enhance the visual appeal of your map by applying custom CSS styles.

Steps:

1. Access Your Website's CSS:
   • Open your website's CSS file or access the custom CSS section in your website builder.
2. Target the Map Container:
   • Use the mamapio-<your-map-id> class to target the map.

   /* Example using tailwind to customize the searchbar and the popup */
   #mamapio-<your-map-id>{
     width: 100%;
     height: auto;
     border-radius: 20px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }
   
   .mamapio-<your-map-id> .leaflet-container{
   @apply rounded-md;
   }
   
   .mamapio-<your-map-id> .search-container{
   @apply !rounded-none;
   }
   
   .mamapio-<your-map-id> .leaflet-popup-content-wrapper{
   @apply bg-slate-500 !rounded-none;
   }