Reply To: How to show the list of markers NEXT to the map?

Home Forums MapPress Support How to show the list of markers NEXT to the map? Reply To: How to show the list of markers NEXT to the map?

#9969
SynaVista
Participant

We needed the same functionality for a project we are working on. While it may be a bit of a hack, I did come up with a solution. Unfortunately, I did have to modify one line of code in the mappress_api.php file, so keep that in mind if you ever update the plugin (as it will be overwritten).

I tried to do as much of this with CSS as possible, which is why this may seem a bit ugly. Again, merely temporary until this functionality is integrated into the plugin.

First off, my map settings (for the specific map) are set to a width of 650px and a height of 500px (I’m working in a total page width of about 960px).

Then I added this code to my CSS file:

/* MapPress Pro Plugin
—————————————- */
.mapp-container {
width: 100% !important;
}
.mapp-container .mapp-canvas-panel {
float: right;
width: 650px !important;
overflow: hidden !important;
}
.mapp-container .mapp-poi-list {
width: 300px; !important;
}

In the CSS, I’m forcing the mappress container to be a width of 100% of the page, but I want the map container to only be 650px, floated right, and the POI list to just be 300px. You should be able to change these values to your needs, but make sure the mapp-canvas-panel width here matches what you’ve set on the post/page for your map.

I had to change line 446 in the mappress_api.php file. I changed it from:

$poi_list_style = “width:$width;max-height:$height; “;

to

$poi_list_style = “max-height:$height; “;

Essentially, I needed to stop the plugin from automatically setting the POI list to be 100% of the page width, allowing it to float in to the left of the map.

Lastly, on the MapPress Admin page in the Dashboard, I do have my map alignment set to “right’.

Hopefully this helps you get closer to what you want, if you haven’t figured it out already! It does appear to be functioning in the latest versions of Safari, Firefox and Chrome on the Mac, and IE7, IE8 and IE9 on the PC (from what I’ve been able to check).