How to show the list of markers NEXT to the map?

[ayzaadmin]

Hi,

I want to list  my markers next to my map..

Is that possible?

[Chris]

Hi, not possible (yet) unless you want to modify the php code. If so, you can turn off the regular list and output it in mappress_api.php, in the display() function. I don’t have code to provide for this, but if you need coding help feel free to send an email with your own code and I’ll try to help.

[SynaVista]

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).

[Chris]

@Synavista, thanks for sharing your solution!  I have one thing to add: if you’re using the 2.38.x beta versions, you can modify the position of the POI list by doing this:

1) Find the file map_layout.php in the folder /pro/templates inside the MapPress directory.

2.  Copy map_layout.php to your theme directory or child theme directory.

3.  Edit the file

I don’t have an example layout yet with the list on the side but I thought I’d mention the layout file because it lets you avoid having the changes overwritten during upgrades.

In the latest betas, you can also place a mappress.css file in your theme directory (containing just the styles you want to override), and thus prevent having it overwritten as well.

It’s of course better to use a child theme, otherwise the theme itself will delete the directory when it’s upgraded.

Thanks again for sharing.

[Author]

Posts