Home › Forums › MapPress Support › Redraw map POIs with AJAX or JS method
Tagged: add poi, ajax, category, remove poi
- This topic has 3 replies, 3 voices, and was last updated 9 years, 2 months ago by
ryderp.
-
AuthorPosts
-
July 17, 2012 at 3:13 pm #9933
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?
July 18, 2012 at 2:41 pm #9948After 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 callmapp0.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 intomapp0
.July 19, 2012 at 2:10 am #9958Hi, 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.
November 19, 2013 at 1:34 am #13786Chris,
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
-
AuthorPosts
- You must be logged in to reply to this topic.