Map question

[PhotoWebMax]

Hi All,

I manage a site for a group of medical professionals who do humanitarian alternative medicine clinics in remote poor areas across the world. They do basic medicine with an emphasis on acupuncture, etc. This is all volunteer effort, including me. 

I am thinking about switching the site over from MODx Evo to Processwire, probably heavily leaning on Kongondo's new blog module. 

One of the things we would like to have is a large footer that will present a map of the world. On this map there will be little graphic image icons of pushpins: to show where all the project mission clinics took place. Right now a team is working in the Amazon jungle in Peru. 

So, what I would to have is a system that will allow the site editors to be able to add a pushpin every time the team goes to a new location. I can do this easily with Photoshop: just add a new pushpin PNG graphic to the map (via PSD layers) and save the map (and representative pushpins) as a new version of the footer map image. This is sort of clunky procedure though...

My question is this: is there a cool PW way of using a PW Field that would update the map with new pushpins? The site owners are busy doctors with little time for coding or extra steps. I would like to make this as easy as possible. Maybe I could use some kind of dynamic code that would use the latitude and longitude of the new location and then generate a fresh pushpin from there? I really do not have the PW or PHP skills to do this.

This is a good cause and I would love to make this site more simple and effective for these folks...

Thanks!

Max

[adrian]

Well, you could use: http://modules.processwire.com/modules/fieldtype-map-marker/

but I wonder if the Google static maps API might be better if it is in the footer of every page:

https://developers.google.com/maps/documentation/staticmaps/?csw=1

There is a limit of 25000 hits per day, so if you'll be inside that, it's a decent option. The only catch with the static option is providing a GUI way for users to add markers.

There are other options out there too, but let us know if you think either of those will work.

[diogo]

The gui way could be the maps module by Ryan. Make a page per location, and then you can pull the coordinates from every page and add them all to the footer map with the maps api. There are some Jquery plugins that make it easier to work with the api.

Gmaps.js is a good option http://hpneo.github.io/gmaps/

[teppo]

There is a limit of 25000 hits per day, so if you'll be inside that, it's a decent option. The only catch with the static option is providing a GUI way for users to add markers.

Even if it's unlikely to become a problem here, judging from your use case, I'd like to point out that in addition to this general limit for displaying maps via maps API there are separate limits for things like using the geocoding API - in this case it's 2500 requests each day.

MapMarker module, by default, sends new requests to geocoding API each time you move a pin on a map or type in a new address and convert that to coordinates. If your site has a lot of content managers, this limit is surprisingly easy to hit

(For one site with a few hundred content managers managing a bunch of maps each I'm running a modified version of the module with an extra option for shutting all these requests down from field settings.. there are still quite a few benefits for the field type itself.)

[PhotoWebMax]

Thanks for the suggestions gentlemen.

I doubt the 2500 hit limit will ever be an issue. I will take a look at this soon. I need to have more conversations with the site owner to see how he would like to manage things. There is always the fallback option of using a graphics program & FTP to update the map each time...

[DaveP]

http://leafletjs.com/ is well worth a look - I have used it recently with PW, as have others - https://processwire.com/talk/topic/6073-wwf-species-tracker/#entry59374

[teppo]

http://leafletjs.com/ is well worth a look - I have used it recently with PW, as have others - https://processwire.com/talk/topic/6073-wwf-species-tracker/#entry59374

Sorry for taking this somewhat off-topic, but does this service host the actual maps (or map tiles, whatever is the correct terminology here) too, or do you take care of that somehow yourself? Their docs pointed to Mapbox, which seems to provide hosted maps.. probably

The reason I'm asking is that last time I checked, I got the impression that there are multiple JS libraries that make dealing with map tiles easy, but I'd still have to get/find/make and host those myself, and apparently each tile needs to be in multiple sizes to support zooming (which seemed kind of weird, since I'd imagine maps being vector images these days, but apparently not).

Anyway, the sheer amount of disk space and traffic quota required to host that kind of data seemed downright scary and for someone used to working with Google Maps the whole concept appeared to be very complicated..

[adrian]

Leaflet allows you host your own raster tiles, but I think you can also use svg if you want. Mapnik is a great python script for generating these raster tiles automatically from SHP files and adding colored data points from your database etc. I think so long as you restrict the area and zoom levels that leaflet is allowed to show, you can use this combination quite effectively, but it could definitely get out of hand if you're not careful. I would love to go vector with all my maps, but unfortunately I need to support governments and old versions of IE still, although I think we might be almost out of the woods on that one finally. The other advantage that map tiles has over vector is when you have hundreds/thousands of data points on a map - svg rendering speeds in browsers aren't there yet for these scenarios. Same goes for complex geographical shapes like rivers - raster tiles render so much quicker in this case as well.

Back to topic - I think for a map that is appearing on every page of a site I'd still go with something completely static - you could even cache the google static map to avoid any limit restrictions.

[teppo]

Thanks for the explanation, Adrian! I'm still seeing this as the complicated route, especially compared to tools like Google Maps or Bing Maps, but if I'll ever have to build a large, commercial service heavily relying on maps I'll be sure to check out other options more closely

Back to topic - I think for a map that is appearing on every page of a site I'd still go with something completely static - you could even cache the google static map to avoid any limit restrictions.

Regarding the part about caching, take a look at following StackOverflow question: "is it allowed to cache static google maps?" (short answer is "only for a limited time and specific purposes"). It's definitely doable, but if you want to abide by the license, you can't simply save the images and leave it at that ad infinitum.