Redraw map POIs with AJAX or JS method

[boxcarpress]

I’m trying to change the POIs shown without reloading the page. My first thought was to replace the map’s HTML via an AJAX call, but when I do this the newly inserted map doesn’t render. It just shows the “loading” image. So…I’m working with the latest  2.38.4 pro version. When I scratched under the surface to figure out what was going on, I noticed JS mapp0.Map object has methods for adding and removing POIs. It would be much nicer to work with the existing rendered map and simply feed it JSON or other data from the server to change the POIs. Is there documentation for these JS methods of the mapp0 object? Do you have any guidance on the best way to replace the POIs?

[boxcarpress]

After some more investigation, this seems to work in 2.38.4:

// find the index of the next POI item in mapp0
var poiIndex = mapp0.getPois().length;
// build the POI in JSON serverside along these lines
var mypoiJSON = {
address: "3819 Beecher St. NW",
body: "Dischord Records",
correctedAddress: null,
html: "<div class="mapp-iw"><div class="mapp-title">Dischord Records</div><div>3819 Beecher St. NW Washington, DC 20007-1802</div><div style="clear: both;"></div><div class="mapp-links"><a onclick="mapp0.getPoi(poiIndex).zoomIn(); return false;" href="#">Zoom</a></div></div>",
iconid: null,
point: {lat:38.921939,lng:-77.075191},
poly: null,
title: "3819 Beecher St. NW",
type: null,
viewport: null
}
// create a POI object and insert into mapp0
var mypoi = new mapp.Poi();
mypoi.fromJSON( mypoiJSON );
mapp0.addPoi( mypoi );
So I believe I’ll be set. I can call mapp0.removePois() to clear all the existing POIs. Then I  will receive similarly formatted JSON for each POI in an array from the server, iterate over the array, and insert them individually into mapp0.

[Chris]

Hi, I was going to suggest that as well.  I made those functions available in case someone needed them, but I’ve never added documentation about how to use them.

I’m not sure if it will help your application, but the next release will also support a ‘query’ function.  That way you can a query to the server and have it return the POIs that match, without having to populate the POIs manually.

[ryderp]

Chris,

I’m trying to do something similar. I’m using the latest pro version and a shortcode similar to

[mashup query="cat=all"]

Is there any way I can reload the POIs based on a different category without reloading the page. i.e. When a checkbox “Green” is checked then the query changes to the equivalent of

[mashup query="cat=green"]

I guess I’m looking for a call such as mapp0.setQuery()

Fantastic plugin BTW… would be lost without it (no pun intended!)

Cheers, Paul

[Author]

Posts