Jump to content

Need a Google Maps Expert

ryan

By ryan,
in Jobs

 Share

Recommended Posts

ryan Hero Member

ryan

Posted
Posted

I'm looking for a Google Maps expert to work with on a maps project that would be built in ProcessWire. Most likely we'd use FieldtypeMapMarker. The coordinate data set currently consistents of a few hundred entries, though would grow over time. Each item in the data set has various meta data that we would just store with ProcessWire fields. I've built several of these types of things before, except that this one technically goes further with Google Maps than I know about.

Some examples of needed functionality:

  • When the user zooms out, large groups of markers need to condense to some other representation, like a single marker with a number in it (or similar).
  • We would need a sidebar of categories and subcategories. The user can click any one of them to enable/disable the relevant markers in the map. 
  • The map would need to have a full screen option (like with a YouTube video).
  • The map must be mobile friendly for those on cell phones, etc. 

If you have this type of expertise with Google Maps, please PM me. This would of course be paid work. I will share the full scope of the project with anyone interested and I would be looking to get an estimate from you. This project would move quickly and need to launch within a month from now. 

Link to comment
Share on other sites
Soma Hero Member

Soma

Posted
Posted

There was request for a project to do something exactly like yours. It even had to be accessible wac2 aa+. I said its not possible as the mobile version of gmaps is only as app available and not for gmap api. Maye I'm wrong but the budget wasnt there to make everything possible as it even had to be responsive. I also dont have the expertise to do it in a reasonable time.

Link to comment
Share on other sites
  • 1 month later...
ryan Hero Member

ryan

Posted
  • Author
Posted

Big thanks to Mats for the alltpaoland.com example and his clustering updates to my RCDMap class. With these available, I was able to learn enough (and admittedly copy enough!) to make the map project come together: http://www.synbioproject.org/library/inventories/map/ ... my code is a little messy, but it all works for the deadline, and I can go clean it up later. :) Beyond Google Maps, tools used here are jQuery Mobile, ProcessWire 2.3, ImportPagesCSV module, and ProcessWire Form Builder (for the add/edit map submissions). Thanks again Mats! I don't think I could have made much progress without your alltpaoland site as an example/guide. 

  • Like 5
Link to comment
Share on other sites
SiNNuT Hero Member

SiNNuT

Posted
Posted

Does the map only work on mobile? Because unless i'm missing something obvious; i don't see a map on the page you linked to? Only a categories bar on the left and a really big white canvas to the right.

I only had a really quick look but noticed that the pagination on the http://www.synbioproject.org/topics/ page does not work, or at least, /topics/page2/ seems to show exactly the same content.

Link to comment
Share on other sites
ryan Hero Member

ryan

Posted
  • Author
Posted
Does the map only work on mobile? Because unless i'm missing something obvious; i don't see a map on the page you linked to? Only a categories bar on the left and a really big white canvas to the right.

Based on the time of your post, I'm guessing you might have hit it when I was pushing updates (at exactly 6 am yesterday). I managed to break it for about 5-10 minutes before realizing it. Let me know if it still doesn't work for you. 

If you want I can send you the source code

@nico I'd love to have a look. I need to setup something similar (outlining a route on a gmap) for another project. 

Link to comment
Share on other sites
  • 6 months later...
Peter Jr. Member

Peter

Posted
Posted

Hello

I really like what Ryan did on this project: http://www.synbioproject.org/sbmap/

I´m trying to make a map that shows projects around the world, but I cannot get my head around the way Ryan pulls data to populate the 'google.maps.InfoWindow'

From Ryan's modified 'RCDMap.js':

addMarker: function(title, url, lat, lng, cat, subcat, page_id, icon) {
		var latLng = new google.maps.LatLng(lat, lng); 
		var marker = new google.maps.Marker({ 
			position: latLng, 
			map: RCDMap.map,
			rcdID: page_id,
			rcdURL: url,
			icon: icon,
			shadow: '/sbmap/site/templates/styles/images/map_icon_shadow.png'
		});

...

google.maps.event.addListener(marker, 'click', function(e) {
	if(RCDMap.infoWindow) RCDMap.infoWindow.close();
	$.get('/sbmap/marker/' + marker.rcdID + '/', {}, function(data) {
	RCDMap.infoWindow = new google.maps.InfoWindow({ content: data });
	RCDMap.infoWindow.open(RCDMap.map, marker); 
	}); 
});

From the source: (He is using page_id, which is also 'url'(?)

RCDMap.addMarker('Adam Arkin Lab', '3210', 37.8735034, -122.2675594, 2718, 3337, 3210, icons[2718]);

When clicking on the markers, I want to show a short description of  every project, client, project leader, project members, start date, end date etc.

I want to pull this info from the existing project pages.

What is the best way to accomplish this?

Regards,

Peter

Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted

Hi Peter,

Something like this would work:

foreach($page->children as $location){
    echo "\n\t\tRCDMap.addMarker('{$location->title}', {$location->geo_address->lat}, {$location->geo_address->lng});";
}

I haven't filled in all the elements for the marker, but hopefully that should give you the idea. Note that the geo_address comes from using the PW map marker fieldtype module.

Link to comment
Share on other sites
Peter Jr. Member

Peter

Posted
Posted

Thanks Adrian,

That part I have already managed. I have also got  the clustering working (thanks Mats and Ryan)

Here's my working 'map.php':

echo "\n\n<div id='map'></div>";
$js = "<script type='text/javascript'>";
$js .= "RCDMap.options.zoom = 4;";
$js .= "RCDMap.options.mapTypeId = google.maps.MapTypeId.TERRAIN;";
$js .= "RCDMap.init('map', 0, 0);";

foreach($page->children as $items) {
  $js .= "\nRCDMap.addMarker('{$items->title}', '{$items->url}',{$items->map->lat}, {$items->map->lng});";
}

$js .= "RCDMap.fitToMarkers();";
$js .= "</script>";
echo $js;

My question is how can I pull data from my project-pages to populate the 'google.maps.InfoWindow'.

Ryan's code from 'RCDMap.js':

$.get('/sbmap/marker/' + marker.rcdID + '/', {}, function(data) {

Ryan is using the 'rcdID' ('url'/'page_id'), in the example below '3210', to identify and pull data to show in the 'google.maps.InfoWindow'.

RCDMap.addMarker('Adam Arkin Lab', '3210', 37.8735034, -122.2675594, 2718, 3337, 3210, icons[2718]);

Ryan's code:

$.get('/sbmap/marker/' + marker.rcdID + '/', {}, function(data) {

get this:

http://www.synbioproject.org/sbmap/marker/3210/

I am wondering how I can pull the right project info (based on id?) when clicking a marker.

-Peter

Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted

Are right - sorry I didn't read your initial post properly.

I am still not quite sure where you are exactly having the trouble. Is it figuring out how to generate a URL like:

http://www.synbioproject.org/sbmap/marker/3210/ in PW, or how to populate it's output with the correct content, or how to set the marker.rcID to the right value?

Tell us more an we'll get you sorted :)

Link to comment
Share on other sites
Peter Jr. Member

Peter

Posted
Posted

I'm having trouble understanding if http://www.synbioproject.org/sbmap/marker/3210/ leads to an actual page in PW or if it's just a URL that generates the code on the fly... makes sense?

In other words, in Ryan's code, is /marker/ part of the PW page hierarchy with children '3210' etc.?

I know, newbie questions :-)

Based on the Skyscrapers Profile (_init.php/_out.php), I have a the following in my /includes/functions.php:

function findProjects($selector) {

	$selector = "template=project, limit=20, sort=-date";
	$projects = wire('pages')->find($selector); 

	return $projects; 
}

function renderProjectList(PageArray $projects) {

	if (wire('user')->language->title == 'no'){

 	if(!count($projects)) return "<div style='clear:both; padding-top:.1em;'><p>Ingen prosjekter ble funnet</p><p>Her vil du snart finne en oversikt over pågående og kommende Vista-prosjekter.</p></div>";
 	}else{
	
	if(!count($projects)) return "<div style='clear:both; padding-top:.1em;'><p>No projects found</p><p>Here you will soon find a list of ongoing and forthcoming Vista Projects.</p></div>";	
 	}
 	
	$pagerLinks = $showHeader ? $projects->renderPager(array(
	'numPageLinks' => 2,
	'separatorItemLabel' => "...",
    'nextItemLabel' => "»",
    'previousItemLabel' => "«",
    'listMarkup' => "<ul class='MarkupPagerNav'>{out}</ul>",
    'itemMarkup' => "<li class='{class}'>{out}</li>",
    'linkMarkup' => "<a href='{url}'><span>{out}</span></a>"      
)) : '';
 	
	$out = 	$pagerLinks . "\n<table class='list_publications'>";
	$out .= "\n\t<tbody>";

	foreach($projects as $project) {
		$out .= renderProjectItem($project, $showCategory);
	}	
	$out .= "\n\t</tbody>" . 
		"\n</table>" . $pagerLinks;

	return $out; 
}

I also have a function: renderProjectItem(Page $project)

The above functions are for my template: list-all-projects.php:

$selector = '';
$headline = $page->title;
$content = $page->body;
$content .= renderProjectList(findProjects($selector));

In my template for a single project; project.php, I have the following:

function renderProjectBody($page) {

	$out = 	"\n<div id='bodycopy'>" . 
		"\n\t<br />{$page->body}";
		$out .= "\n<ul class='page_list'>"; 

	$out .= "\n</ul>" . 
		"\n</div>";

	return $out;
}

function renderProjectData($page) {

	if (wire('user')->language->title == 'no'){
	$searchUrl = wire('config')->urls->root . "no/search/";
	}else{
	$searchUrl = wire('config')->urls->root . "en/search/";	
	}
	
	if (wire('user')->language->title == 'no'){	

	if (strtotime(date('Y-m-d')) >= strtotime($page->date) && $page->end_date == ''){
		$status = "Pågående";
	}else if (strtotime(date('Y-m-d')) < strtotime($page->date) && $page->end_date == ''){
    	$status = "Planlagt";
     }else if($page->end_date != ''){
	    $status = "Ferdig";
    }
    }else{
	 if (strtotime(date('Y-m-d')) >= strtotime($page->date) && $page->end_date == ''){
		$status = "Ongoing";
	}else if (strtotime(date('Y-m-d')) < strtotime($page->date) && $page->end_date == ''){
    	$status = "Planned";
    }else if($page->end_date != ''){
	    $status = "Finished";
    }
    }
    
	$running = '';
	$leader = '';
	$authors = '';
	
	if (wire('user')->language->title == 'no'){
		$download = 'Last ned';
	}else{
		$download = 'Download';
	}
	
	$lang = wire('user')->language;
	$label = 'label';
	if (wire('user')->language->title != 'no'){
	$label = "label{$lang}";
	}
	foreach($page->authors as $a) {
		$authors .= "\n\t<li><a href='{$a->url}'>{$a->title}</a></li>";
	}
	foreach($page->leader as $a) {
	
		$leader .= "\n\t<li><a href='{$a->url}'>{$a->title}</a></li>";
	}
	$out =	"\n<table class='publication_data'>" . 
		"\n\t<tbody>";
		
		$out .= "\n\t<tr><th>Status</th><td><span>$status</span></td></tr>";

		if (wire('user')->language->title == 'no'){
		$out .= "\n\t<tr><th>Startdato</th><td>$page->date</td></tr>";
		}else{
		$out .= "\n\t<tr><th>Start Date</th><td>$page->date</td></tr>";
		}
		
		if ($page->end_date == 0){
		
		if (wire('user')->language->title == 'no'){
				$out .= "\n\t<tr><th>Estimert sluttdato</th><td>" . ($page->estimated_end ? "\n$page->estimated_end" : $running) . "</td></tr>";
				}else{
				$out .= "\n\t<tr><th>Estimated finish date</th><td>" . ($page->estimated_end ? "\n$page->estimated_end" : $running) . "</td></tr>";
				}
		}else{
		
			if (wire('user')->language->title == 'no'){
				$out .= "\n\t<tr><th>Sluttdato</th><td>" . ($page->end_date ? "\n$page->end_date" : $running) . "</td></tr>";
				}else{
				$out .= "\n\t<tr><th>Finished date</th><td>" . ($page->end_date ? "\n$page->end_date" : $running) . "</td></tr>";
				}
		}
		if($page->client){
		$out .= "\n\t<tr><th>". ($page->fields->get('client')->$label) ."</th><td>" . ($page->client ? "\n$page->client" : $na) . "</td></tr>";
		}
		
		$out .= "\n\t<tr><th>". ($page->fields->get('leader')->$label) ."</th><td>" . ($leader ? "\n<ul>$leader</ul>" : $na) . "</td></tr>";
		
		if (wire('user')->language->title == 'no'){
			$out .= "\n\t<tr><th>Prosjektmedlemmer</th><td>" . ($authors ? "\n<ul>$authors</ul>" : $na) . "</td></tr>";
		}else{
			$out .= "\n\t<tr><th>Project Members</th><td>" . ($authors ? "\n<ul>$authors</ul>" : $na) . "</td></tr>";	
		}
	if($page->files->first){
	
		if (wire('user')->language->title == 'no'){
		$out .= "\n\t<tr><th>Rapport</th><td><a href='{$page->files->first()->url}'>" . $download . "</a> ({$page->files->first()->ext} | {$page->files->first()->filesizeStr})</td></tr>";
		}else{
		$out .= "\n\t<tr><th>Report</th><td><a href='{$page->files->first()->url}'>" . $download . "</a> ({$page->files->first()->ext} | {$page->files->first()->filesizeStr})</td></tr>";
		}
		}
		
		$out .="\n\t</tbody>".
		"\n</table>";

	return $out; 
}

$browserTitle = $page->title . ", " . $page->parent->title . " Project";
$content = renderProjectData($page) . renderProjectBody($page);

So, I would appreciate some help to understand have I can pull som of that data to use in the 'google.maps.InfoWindow', by id or other means...

Regards,

Peter

Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted

Peter,

I am not sure if http://www.synbioproject.org/sbmap/marker/3210/ is an actual PW page or not, but there is certainly no reason that you couldn't use a PW page to generate the code on that page.

There are so many ways you could go about this - really up to you and how you have the content structured.

You could set up a parent marker page and marker.php template and allow URL segments and use the ID in the segment as the variable to grab the content from other parts of your page tree. Would that approach work well for you, or do you already have the content that you want in the InfoWindow already set up in child pages?

It is possible that Ryan is using URL segments in a sbmap.php template file with the first segment to determine markers and the second to get the ID of item and use those to generate a selector to get the content from somewhere else in the page tree.

  • Like 1
Link to comment
Share on other sites
Peter Jr. Member

Peter

Posted
Posted

Thanks Adrian,

I will start a crash course in URL segments :-)

Maybe a silly question, but have can I set up a template file in PW (using the prepend/append approach from the Skyscraper Profile) that does not get "wrapped" by _init.php/_out.php ?

-Peter

Link to comment
Share on other sites
adrian Hero Member

adrian

Posted
Posted

Well you can modify the _init.php and _out.php files to have a conditional check. Something like on the first line of each:

if(!$useWrappers) return;

Then in your template file do:

$useWrappers = false; 

Or something along those lines - whatever fits best with your workflow.

  • Like 1
Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...