When you go to this page:
https://www.waukeenahcemetery.com/map/
…you will see the frontend of a WordPress map plugin (Mapplic). We are using plugin to create gravesites. These locations are set within admin of WordPress.
When you first arrive on page and view map, the white gravesite markers display nicely. But if you zoom out (using mouse wheel or zoom control button), the gravesites stay the same size. When map is zoomed out, this results in the gravesites being huge. When we create 400-500 gravesites, when zoomed out, the map will be all white (which is what we want to avoid).
We want to adjust the gravesites to remain in proportion to the green map background.
Fortunately, the plugin does have an api, which can be found here:
We were told by plugin authors that “positionchanged” can be used to control size of map elements.
Currently, we are using this css to control the size of the gravesites:
.mapplic-pin.my-new-pin {
background-image: none !important;
background-size: 20px 40px !important;
width: 40px !important;
height: 20px !important;
margin-top: -15px !important;
margin-left: -10px !important;
background-color: #FFFFFF !important;
}
And we are using this function (in functions.php) to register this custom css for plugin:/
/* Mapplic Custom Pins */
function mapplic_extend_pins($pins) {
// New pin types
$custom = array(‘my-new-pin’, ‘my-new-pin5’);
// Merging arrays
$pins = array_merge($pins, $custom);
return $pins;
}
add_filter(‘mapplic_pins’, ‘mapplic_extend_pins’);
We need a custom function created which uses the provided API to configure gravesites to remain in proportion to the green map background. Our idea was to set css (pixel width and height of gravesites, as seen above) to change depending on the percent the map is zoomed in or out. For example:
map at 80%
.mapplic-pin.my-new-pin {
background-image: none !important;
background-size: 3px 4px !important;
map at 50%
.mapplic-pin.my-new-pin {
background-image: none !important;
background-size: 10px 12px !important;
We can set the detailed css sizes as long as we have a custom function to work with.