Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
 User Map with XThreads?
RateU Offline
Administrator
*******
Posts: 2,350
Joined: Mar 2010
Post: #11
RE: User Map with XThreads?
@Shemo and RocketFoot: I'm really really sorry. Please don't misunderstand me Frown I've said this so many times. I'm still learning. I'm not a coder. I hope you can understand me.

About the Usermap, you can try to modify this:

Requirement: XThreads
Last Update: 2 November 2012

Change Logs: 27 December 2011

We will try to use Marker Clusterer Plus to cluster our marker.
Download markerclusterer_packed.js from here. Upload it to our /jscripts/ dir/folder.

Forum Settings

Create or edit a forum with these settings:
  • Template Prefix:

    Code:
    <if $mybb->input['view'] == 'blah' then>umapm_<else>umap_</if>

    Replace the blah with something else. It's like a "password" to access the default threadlist layout. We need the default threadlist layout to manage threads in our Usermap forum.

  • Enable XThreads' Inline Forum Search: Yes
  • Settings Overrides:
    • Setting: Output template start/end comments?
    • Value: 0

    Code:
    tplhtmlcomments=0

  • Hide Forum: Yes
    We need to put the forum URL directly in our template. Example: in our header template.
  • Allow Blank Post Message: Yes
  • Custom WOL Text:
    • Forum Display: Viewing <a href="{1}">{2}</a>
    • New Thread: Marking a new Marker
    • New Reply: Commenting on <a href="{1}">{2}</a> Marker
    • Show Thread: Viewing <a href="{1}">{2}</a> Marker

Custom Thread Fields

There is no a fix settings for whatever custom thread fields needed for our Usermap. The only requirement for this is the Geo Location custom thread fields, which holds the geographic location that needed by Google Maps to place a marker on it.

But, because we use XThreads here, personally, I don't want to stop at there only Biggrin (you know that XThreads has a bunch of features and very very flexible). So, we will create two additional custom thread fields as an example, one custom thread field for text (description), and the other one is for image. In this example, we will try to use the click event provided by Google Maps, and put the XThreads contents (the text and the image) in the popup produced by the event handler. Do not create those additional custom thread fields if we don't want it.

Create a Custom Thread Fields with these settings:
AdminCP -> Configuration -> Custom Thread Fields
  1. File for Image (Optional):
    Skip this if we don't want any image displayed in the marker's popup, or if we don't want to use the click event.
    • Title: Image
    • Key: umap_img
    • Description: The thumbnail of this image will be displayed as tooltip. Max Size: 200KB
      Modify it as our needs. Related to the Maximum File Size setting.
    • Applicable Forums: 'select our Usermap forum'
    • Input Field Type: File
    • Valid File Extensions: jpg|gif|png|jpeg
    • Maximum File Size: 204800
      Modify it as our needs. Related to the Description setting.
    • Editable by / Required Field?: Everyone
      This is not a required custom thread field. Modify it as our needs. For example, we can set which usergroup(s) are allowed to attach image in their marker on the Usermap.
    • Display Order: 1
    • Only Accept Image Files: Yes
    • Image Thumbnail Generation: 120x90
      Modify it as our needs. This is the thumbnail dimension of the image that will be displayed in the marker's popup.
    • Display Format:

      HTML Code
      <a href=\"{URL}\"><img src=\"{URL}/thumb120x90\" alt=\"{FILENAME}\" /></a>

      Modify it as our needs. The 120x90 part is related to the Image Thumbnail Generation setting.

  2. Textbox for Short Description (Optional):
    Skip this if we don't want any additional text displayed in the marker's popup, or if we don't want to use the click event.
    • Title: Description
    • Key: umap_desc
    • Description: This description will be displayed in your pin as tooltip
      Modify it as our needs.
    • Applicable Forums: 'select our Usermap forum'
    • Input Field Type: Textbox
    • Editable by / Required Field?: Everyone
      This is not a required custom thread fields. Modify it as our needs.
    • Display Order: 2
  3. Textbox for Geo Location (Required):
    This custom thread field will hold the geographic location that needed by Google Maps to place a marker on it. So, this is a required field. We will try to use the Geocoder service provided by Google Maps and a simple javascript to "auto fill" this custom thread field (in newthread and editpost page).
    • Title: Geo Location
    • Key: umap_geol
    • Description: If you don't know what's your geo location, please use the geo locator on the left.
      Modify it as our needs.
    • Applicable Forums: 'select our Usermap forum'
    • Input Field Type: Textbox
    • Editable by / Required Field?: Everyone (required)
    • Display Order: 3
      Because we need to put other custom thread fields contents into this field's Display Format (in this example), we need to assign the last Display Order for this field (bigger than other custom thread fields' Display Order).
    • Display Format:

      Code:
      <if THIS_SCRIPT != 'forumdisplay.php' then>{VALUE}</if><setvar umap_title>$thread['uid'] ? '<div class=\"gmap_if\"><strong><a href=\"'.get_profile_link($thread['uid']).'\">'.htmlspecialchars_uni($thread['username']).'</a>, <a href=\"'.$threadurl.'\">'.htmlspecialchars_uni($thread['subject']).'</a></strong></div><div class=\"smalltext\"><em>Pinned: '.$thread['threaddate'].', '.$thread['threadtime'].'</em></div>' : '<div><strong>'.htmlspecialchars_uni($mybb->user['username']).', '.htmlspecialchars_uni($mybb->input['subject']).'</strong></div><div class=\"smalltext\"><em>Pinned: '.my_date($mybb->settings['dateformat'], TIME_NOW).', '.my_date($mybb->settings['timeformat'], TIME_NOW).'</em></div>'</setvar><setvar map_msg>'<div><div class=\"float_left\" style=\"margin: 5px;\">'.$GLOBALS['threadfields']['umap_img']['value'].'</div>'.$tplvars['umap_title'].'<br />'.$GLOBALS['threadfields']['umap_desc'].'</div>'</setvar><setvar mymarker>$mybb->user['uid'] ? '<a href="'.$forumurl_q.'filterxt_uid='.intval($mybb->user['uid']).'">Where is my marker?</a>' : ''</setvar><if THIS_SCRIPT == 'forumdisplay.php' then>[{VALUE$1},"<func htmlspecialchars_uni>{$thread['username']}: {$thread['subject']}</func>","{$GLOBALS['tplvars']['map_msg']}","{$threadurl}"],</if>

      Modify it as our needs.

    • Text Mask Filter: Custom (regex)

      Code:
      ^\(((-?)([0-9]*)(?:\.(\d*)), (-?)([0-9]*)(?:\.(\d*)))\)$

      Well, I'm totally zero with regex Oops So, modify it as our needs. Basically, this field should accept format like: (x coordinate, y coordinate). Each coordinate may have a negative or positive value, and may have decimal value. Surround them with a bracket, and separate them with a comma.



Global Templates

Create new templates in Global Template.
Admin CP -> Templates & Style -> Templates -> Global Templates:
  1. A blank umap_forumdisplay_threads_sep template.
  2. umapm_multipage_page

    HTML Code
    <a href="{$page_url}&amp;view={$mybb->input['view']}" class="pagination_page">{$i}</a>

    This template is used for the pagination of the default layout. Maybe we need to add the other multipage template, like multipage_end, multipage_nextpage, multipage_page_link_current, multipage_prevpage and multipage_start.

  3. umap_editpost_first

    HTML Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    <html>
    <head>
    <title>{$mybb->settings['bbname']} - {$lang->edit_post}</title>
    {$headerinclude}
    <script type="text/javascript" src="jscripts/post.js?ver=1400"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var geocoder, map, map2;
    function initialize() {
    	geocoder = new google.maps.Geocoder();
    	
    	var myLatlng2 = new google.maps.LatLng{$GLOBALS['threadfields']['umap_geol']};
    	var myOptions2 = {
    		zoom: 4,
    		center: myLatlng2,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	}
    	map2 = new google.maps.Map(document.getElementById('map_geol'), myOptions2);
    	var marker2 = new google.maps.Marker({
    		position: myLatlng2, 
    		map: map2,
    		title:"{$thread['subject']}"
    	});
    
    	var myLatlng = new google.maps.LatLng{$GLOBALS['threadfields']['umap_geol']};
    	var myOptions = {
    		zoom: 4,
    		center: myLatlng,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	}
    	map = new google.maps.Map(document.getElementById('map_postbit'), myOptions);
    	var marker = new google.maps.Marker({
    		position: myLatlng, 
    		map: map,
    		title:"{$thread['subject']}"
    	});
    	var message = "{$GLOBALS['tplvars']['map_msg']}";
    	var infowindow = new google.maps.InfoWindow({
    		content: message,
    		size: new google.maps.Size(50,50)
    	});
    	google.maps.event.addListener(marker, 'click', function() {
    		infowindow.open(map,marker);
    	});
    }
    
    function codeAddress() {
    	var address = document.getElementById('address').value;
    	geocoder.geocode({'address': address}, function(results, status) {
    		if (status == google.maps.GeocoderStatus.OK) {
    			var mylocation = results[0].geometry.location;
    			map2.setCenter(mylocation);
    			var marker3 = new google.maps.Marker({
    				map: map2,
    				position: mylocation
    			});
    			document.getElementsByName("xthreads_umap_geol")[0].value = mylocation;
    		} else {
    			alert("Geocode was not successful for the following reason: " + status);
    		}
    	});
    }
    </script>
    </head>
    <body onload="initialize()">
    {$header}
    {$preview}
    {$post_errors}
    {$attacherror}
    <br />
    <form action="editpost.php?pid={$pid}&amp;processed=1" method="post" enctype="multipart/form-data" name="input">
    <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-bottom: none;">
    	<tr>
    		<td class="thead" colspan="2"><strong>{$lang->edit_post}</strong></td>
    	</tr>
    	{$loginbox}
    </table>
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: none; border-bottom: none;">
    	<tr>
    		<td class="trow2" style="width: 50%; vertical-align: top;">
    			<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    				<tr>
    					<td class="trow2" colspan="2" style="text-align: center;">
    						<div id="map_geol" style="width:400px; height:200px;margin: auto auto;"></div>
    						<br />
    						<input id="address" type="textbox" value="">
    						<input type="button" value="Get My Geo Location" onclick="codeAddress()">
    					</td>
    				</tr>
    			</table>
    		</td>
    		<td class="trow2" style="vertical-align: top;">
    			<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    				<tr>
    					<td class="trow2" style="width: 20%; white-space:nowrap;"><strong>{$lang->subject}</strong></td>
    					<td class="trow2" style="white-space:nowrap;">{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /></td>
    				</tr>
    				{$extra_threadfields}
    			</table>
    		</td>
    	</tr>
    </table>
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: none;">
    {$posticons}
    <tr>
    <td class="trow2" valign="top" style="width: 20%;"><strong>{$lang->your_message}:</strong><br /><div style="text-align: center;">{$smilieinserter}</div></td>
    <td class="trow2">
    <textarea name="message" id="message" rows="20" cols="70" tabindex="3">{$message}</textarea>
    {$codebuttons}
    </td>
    </tr>
    <tr>
    <td class="trow1" valign="top"><strong>{$lang->post_options}</strong></td>
    <td class="trow1"><span class="smalltext">
    <label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" tabindex="6"{$postoptionschecked['signature']} /> {$lang->options_sig}</label>
    {$disablesmilies}</span>
    </td>
    </tr>
    {$subscriptionmethod}
    {$pollbox}
    </table>
    {$attachbox}
    <br />
    <div align="center"><input type="submit" class="button" name="submit" value="{$lang->update_post}" tabindex="3" accesskey="s" />  <input type="submit" class="button" name="previewpost" value="{$lang->preview_post}" tabindex="4" /></div>
    <input type="hidden" name="action" value="do_editpost" />
    <input type="hidden" name="posthash" value="{$posthash}" />
    <input type="hidden" name="attachmentaid" value="" />
    <input type="hidden" name="attachmentact" value="" />
    </form>
    <br />
    <form action="editpost.php" method="post" name="editpost">
    <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    <tr>
    <td class="thead" colspan="3"><strong>{$lang->delete_post}</strong></td>
    </tr>
    <tr>
    <td class="trow1" style="white-space: nowrap"><input type="checkbox" class="checkbox" name="delete" value="1" tabindex="9" /> <strong>{$lang->delete_q}</strong></td>
    <td class="trow1" width="100%">{$lang->delete_1}<br /><span class="smalltext">{$lang->delete_2}</span></td>
    <td class="trow1"><input type="submit" class="button" name="submit" value="{$lang->delete_now}" tabindex="10" /></td>
    </tr>
    </table>
    <input type="hidden" name="action" value="deletepost" />
    <input type="hidden" name="pid" value="{$pid}" />
    </form>
    {$footer}
    </body>
    </html>

  4. umap_forumdisplay

    Code:
    {$threadslist}

    We move all contents of this template to threadlist template, because we need to modify the header tag and put {$threads} variable in it. So, do not add subforum inside our Usermap forum.

  5. umap_forumdisplay_thread

    Code:
    {$GLOBALS['threadfields']['umap_geol']}

    Because MyBB repeat this template in forumdisplay, we will use it for displaying the markers. With this way, we can put XThreads contents into the popup produced by the Google Maps click event handler. We put this template inside the header tag.

  6. umap_forumdisplay_threadlist

    HTML Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    <html>
    <head>
    <title>{$mybb->settings['bbname']} - {$foruminfo['name']} </title>
    {$headerinclude}
    {$rssdiscovery}
    <script type="text/javascript">
    <!--
    	lang.no_new_posts = "{$lang->no_new_posts}";
    	lang.click_mark_read = "{$lang->click_mark_read}";
    // -->
    </script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/markerclusterer_packed.js"></script>
    <script type="text/javascript">
    var gmarkers = [];
    var map = null;
    var infowindow = new google.maps.InfoWindow();
    var myLatlng = new google.maps.LatLng(0,0);
    function createMarker(latlng,name,html,url) {
    	var contentString = html;
    	var marker = new google.maps.Marker({
    		position: latlng,
    		map: map,
    		title: name
    	});
    	marker.myname = name;
    	gmarkers.push(marker);
    	
    	google.maps.event.addListener(marker, "click", function() {
    		window.location = url;
    	});
    
    	google.maps.event.addListener(marker, "rightclick", function() {
    		infowindow.setContent(contentString); 
    		infowindow.open(map,marker);
    	});
    }
    
    function initialize() {
    	var myOptions = {
    		zoom: 2,
    		center: myLatlng,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	}
    	map = new google.maps.Map(document.getElementById('map_threadlist'), myOptions);
    	google.maps.event.addListener(map, 'click', function() {
    		infowindow.close();
    	});
    	var markers = [{$threads}];
    	var mcOptions = {gridSize: 50, maxZoom: 15, title: 'Click to view all pins inside this cluster'};
    	for (i = 0; i < markers.length; i++) {
    		var point = new google.maps.LatLng(markers[i][0],markers[i][1]);
    		var name = markers[i][2];
    		var html = markers[i][3];
    		var url = markers[i][4];
    		var marker = createMarker(point,name,html,url);
    	}	
    	var mc = new MarkerClusterer(map, gmarkers, mcOptions);
    }
    </script>
    </head>
    <body onload="initialize()">
    {$header}
    {$moderatedby}
    {$usersbrowsing}
    {$rules}
    <br class="clear" />
    <div class="float_left">
    	{$multipage}
    </div>
    <div class="float_right">
    	{$newthread}
    </div>
    <br class="clear" />
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    	<tr>
    		<td class="thead">
    			<div class="float_right"><strong>{$tplvars['mymarker']}</strong></div>
    			<strong>{$foruminfo['name']}</strong>
    		</td>
    	</tr>
    	<tr>
    		<td class="trow1">
    			<div id="map_threadlist" style="width:100%; height:500px"></div>
    		</td>
    	</tr>
    </table>
    <div class="float_left">
    	{$multipage}
    </div>
    <div class="float_right" style="margin-top: 4px;">
    	{$newthread}
    </div>
    <br style="clear: both;" />
    <br />
    
    <div class="float_right" style="text-align: right;">
    	{$inlinemod}
    	{$searchforum}
    	{$forumjump}
    </div>
    <br style="clear: both" />
    <div class="smalltext" style="text-align: center;">
    {$foruminfo['name']}<br />
    Powered By <a href="http://mybbhacks.zingaburga.com/showthread.php?tid=288">XThreads</a> &ndash; <a href="http://mybbhacks.zingaburga.com">MyBB Hacks</a>
    </div>
    {$inline_edit_js}
    {$footer}
    </body>
    </html>

  7. umap_newthread

    HTML Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    <html>
    <head>
    <title>{$lang->newthread_in}</title>
    {$headerinclude}
    <script type="text/javascript" src="jscripts/post.js?ver=1400"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var geocoder, map, map2;
    function initialize() {
    	geocoder = new google.maps.Geocoder();
    	var geont = "{$GLOBALS['threadfields']['umap_geol']}";
    	var myLatlng2 =  new google.maps.LatLng{$GLOBALS['threadfields']['umap_geol']};
    	if(geont == ""){
    		myLatlng2 =  new google.maps.LatLng(0,0);
    	}
    	var myOptions2 = {
    		zoom: 4,
    		center: myLatlng2,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	}
    	map2 = new google.maps.Map(document.getElementById('map_geol'), myOptions2);
    	var marker2 = new google.maps.Marker({
    		position: myLatlng2, 
    		map: map2,
    		title:"{$thread['subject']}"
    	});
    	var myLatlng = new google.maps.LatLng{$GLOBALS['threadfields']['umap_geol']};
    	var myOptions = {
    		zoom: 4,
    		center: myLatlng,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	}
    	map = new google.maps.Map(document.getElementById('map_postbit'), myOptions);
    	var marker = new google.maps.Marker({
    		position: myLatlng, 
    		map: map,
    		title:"{$thread['subject']}"
    	});
    	var message = "{$GLOBALS['tplvars']['map_msg']}";
    	var infowindow = new google.maps.InfoWindow({
    		content: message,
    		size: new google.maps.Size(50,50)
    	});
    	google.maps.event.addListener(marker, 'click', function() {
    		infowindow.open(map,marker);
    	});
    }
    
    function codeAddress() {
    	var address = document.getElementById('address').value;
    	geocoder.geocode({'address': address}, function(results, status) {
    		if (status == google.maps.GeocoderStatus.OK) {
    			var mylocation = results[0].geometry.location;
    			map2.setCenter(mylocation);
    			var marker3 = new google.maps.Marker({
    				map: map2,
    				position: mylocation
    			});
    			document.getElementsByName("xthreads_umap_geol")[0].value = mylocation;
    		} else {
    			alert("Geocode was not successful for the following reason: " + status);
    		}
    	});
    }
    </script>
    </head>
    <body onload="initialize()">
    {$header}
    {$preview}
    {$thread_errors}
    {$attacherror}
    <form action="newthread.php?fid={$fid}&amp;processed=1" method="post" enctype="multipart/form-data" name="input">
    <input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-bottom: none;">
    	<tr>
    		<td class="thead" colspan="2"><strong>{$lang->post_new_thread}</strong></td>
    	</tr>
    	{$loginbox}
    </table>
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: none; border-bottom: none;">
    	<tr>
    		<td class="trow2" style="width: 50%; vertical-align: top;">
    			<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    				<tr>
    					<td class="trow2" colspan="2" style="text-align: center;">
    						<div id="map_geol" style="width:400px; height:200px;margin: auto auto;"></div>
    						<br />
    						<input id="address" type="textbox" value="">
    						<input type="button" value="Get My Geo Location" onclick="codeAddress()">
    					</td>
    				</tr>
    			</table>
    		</td>
    		<td class="trow2" style="vertical-align: top;">
    			<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    				<tr>
    					<td class="trow2" style="width: 20%; white-space:nowrap;"><strong>{$lang->thread_subject}</strong></td>
    					<td class="trow2" style="white-space:nowrap;">{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" />
    					</td>
    				</tr>
    				{$extra_threadfields}
    			</table>
    		</td>
    	</tr>
    </table>
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top: none;">
    {$posticons}
    <tr>
    <td class="trow2" valign="top" style="width: 20%;"><strong>{$lang->your_message}</strong>{$smilieinserter}</td>
    <td class="trow2">
    <textarea name="message" id="message" rows="20" cols="70" tabindex="2">{$message}</textarea>
    {$codebuttons}
    {$multiquote_external}
    </td>
    </tr>
    <tr>
    <td class="trow1" valign="top"><strong>{$lang->post_options}</strong></td>
    <td class="trow1"><span class="smalltext">
    <label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" tabindex="7"{$postoptionschecked['signature']} /> {$lang->options_sig}</label>
    {$disablesmilies}</span></td>
    </tr>
    {$modoptions}
    {$subscriptionmethod}
    {$pollbox}
    {$captcha}
    </table>
    {$attachbox}
    <br />
    <div style="text-align:center"><input type="submit" class="button" name="submit" value="{$lang->post_thread}" tabindex="4" accesskey="s" />  <input type="submit" class="button" name="previewpost" value="{$lang->preview_post}" tabindex="5" />{$savedraftbutton}</div>
    <input type="hidden" name="action" value="do_newthread" />
    <input type="hidden" name="posthash" value="{$posthash}" />
    <input type="hidden" name="attachmentaid" value="" />
    <input type="hidden" name="attachmentact" value="" />
    <input type="hidden" name="quoted_ids" value="{$quoted_ids}" />
    <input type="hidden" name="tid" value="{$tid}" />
    {$editdraftpid}
    </form>
    {$forumrules}
    {$footer}
    </body>
    </html>

  8. umap_postbit_first and/or umap_postbit_first_classic (Optional)
    Skip this template if we don't want to display user's map on the postbit and preview page.
    Basically, we need to put this code in these templates for displaying the user's map:

    HTML Code
    <div id="map_postbit" style="width:100%;height:300px;margin: auto auto;"></div>

    So, copy and paste the entire our postbit/classic template into the new templates, and insert the code above.
    Example for the umap_postbit_first template:

    HTML Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    {$ignore_bit}
    <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}">
    	<tbody>
    		<tr>
    			<td class="tcat">
    				<div class="float_left smalltext">
    					{$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span>
    				</div>
    				{$post['posturl']}
    			</td>
    		</tr>
    
    		<tr>
    			<td class="trow1 {$unapproved_shade}">
    				<table cellspacing="0" cellpadding="0" border="0" style="width: 100%;">
    					<tr>
    						<td class="post_avatar" width="1" style="{$post['avatar_padding']}">
    							{$post['useravatar']}
    						</td>
    						<td class="post_author">
    							<strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br />
    							<span class="smalltext">
    								{$post['usertitle']}<br />
    								{$post['userstars']}
    								{$post['groupimage']}
    							</span>
    						</td>
    						<td class="smalltext post_author_info" width="165">
    							{$post['user_details']}
    						</td>
    					</tr>
    				</table>
    			</td>
    		</tr>
    
    		<tr>
    			<td class="trow2 post_content {$unapproved_shade}">
    				<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span>
    
    				<div class="post_body" id="pid_{$post['pid']}">
    					{$post['message']}
    					<div id="map_postbit" style="width:100%;height:300px;margin: auto auto;"></div>
    				</div>
    				{$post['attachments']}
    				{$post['signature']}
    
    				<div class="post_meta" id="post_meta_{$post['pid']}">
    				{$post['iplogged']}
    				</div>
    			</td>
    		</tr>
    
    		<tr>
    			<td class="trow1 post_buttons {$unapproved_shade}">
    				<div class="author_buttons float_left">
    					{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
    				</div>
    				<div class="post_management_buttons float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
    				</div>
    			</td>
    		</tr>
    	</tbody>
    </table>

  9. umap_showthread (Optional)
    Skip this template if we don't want to display user's map on the showthread/postbit page.

    HTML Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    <html>
    <head>
    <title>{$thread['subject']}</title>
    {$headerinclude}
    <script type="text/javascript">
    <!--
    	var quickdelete_confirm = "{$lang->quickdelete_confirm}";
    // -->
    </script>
    <script type="text/javascript" src="jscripts/thread.js?ver=1603"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    var geocoder, map;
    function initialize() {
    	geocoder = new google.maps.Geocoder();
    	var myLatlng = new google.maps.LatLng{$GLOBALS['threadfields']['umap_geol']};
    	var myOptions = {
    		zoom: 4,
    		center: myLatlng,
    		mapTypeId: google.maps.MapTypeId.ROADMAP
    	}
    	map = new google.maps.Map(document.getElementById('map_postbit'), myOptions);
    	var marker = new google.maps.Marker({
    		position: myLatlng, 
    		map: map,
    		title:"{$thread['subject']}"
    	});
    	var message = "{$GLOBALS['tplvars']['map_msg']}";
    	var infowindow = new google.maps.InfoWindow({
    		content: message,
    		size: new google.maps.Size(50,50)
    	});
    	google.maps.event.addListener(marker, 'click', function() {
    		infowindow.open(map,marker);
    	});
    }
    </script>
    </head>
    <body onload="initialize()">
    	{$header}
    	{$pollbox}
    	<div class="float_left">
    		{$multipage}
    
    	</div>
    	<div class="float_right">
    		{$newreply}
    	</div>
    	{$ratethread}
    	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; border-bottom-width: 0;">
    		<tr>
    			<td class="thead" colspan="2">
    				<div style="float: right;">
    					<span class="smalltext"><strong><a href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->threaded}</a> | <a href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->linear}</a></strong></span>
    				</div>
    				<div>
    					<strong>{$thread['threadprefix']}{$thread['subject']}</strong>
    				</div>
    			</td>
    		</tr>
    		{$classic_header}
    	</table>
    	<div id="posts">
    		{$first_post}{$posts}
    	</div>
    	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top-width: 0;">
    		<tr>
    			<td colspan="2" class="tfoot">
    				{$search_thread}
    				<div>
    					<strong>&laquo; <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> &raquo;</strong>
    				</div>
    			</td>
    		</tr>
    	</table>
    	<div class="float_left">
    		{$multipage}
    	</div>
    	<div style="padding-top: 4px;" class="float_right">
    		{$newreply}
    	</div>
    	<br style="clear: both;" />
    	{$quickreply}
    	{$threadexbox}
    	{$similarthreads}
    	<br />
    	<div class="float_left">
    		<ul class="thread_tools">
    			<li class="printable"><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li>
    			<li class="sendthread"><a href="sendthread.php?tid={$tid}">{$lang->send_thread}</a></li>
    			<li class="subscription_{$add_remove_subscription}"><a href="usercp2.php?action={$add_remove_subscription}subscription&amp;tid={$tid}&amp;my_post_key={$mybb->post_code}">{$add_remove_subscription_text}</a></li>
    		</ul>
    	</div>
    
    	<div class="float_right" style="text-align: right;">
    		{$moderationoptions}
    		{$forumjump}
    	</div>
    	<br style="clear: both;" />
    	{$usersbrowsing}
    	{$footer}
    </body>
    </html>





Additional Info:
  • We use forumdisplay threadlist for our usermap. So, there is a threads per page setting that we need to set. It's under the XThreads Forum Settings. Each thread means each marker. For example, if we set the setting to display 20 threads per page, it means that we have 20 markers per page.
  • There are some features that we can add to our usermap. Here is the Google Maps Documentation as a reference: http://code.google.com/apis/maps/documen...http://code.google.com/apis/maps/documentation/javascript/b Because I'm totally zero with javascript (it seems that the Google Maps use it, plus, I'm not a coder), so, if you want to modify it, maybe you need to read the documentation.
  • There is a possibility that we use XThreads filter system to create Map Region.
  • If we want one marker (thread) per user only, we need a plugin for that (attached). Find $umap_fid under umap_nt() function. Change the value to our XThreads Usermap forum id for limiting the num of pin for each user. By default, it is disabled.
  • Find $umap_fid under umap_run() function. Change the value to our XThreads Usermap forum id for displaying user's location on their profile page. By default, it is disabled.
  • Please tell me if there is something wrong with the code above. I'm still learning.


Screenshots:

Newthread and Editpost:
       

If we use the umap_postbit_first/classic and umap_showthread templates, we can use the preview page:
       

If we use the umap_postbit_first/classic and umap_showthread templates, the shwothread page will be like this:
   

Threadlist (our usermap):
   

If we use the additional custom thread fields and the click event handler, we have the XThreads custom thread fields contents in a marker's popup:
   

Cluster Marker:
   

And the default threadlist layout (accessed by using the &view=blah, depends on the setting):
   


Attached File(s)
.php  umap.php (Size: 3.69 KB / Downloads: 503)

(This post was last modified: 11-03-2012 03:09 AM by RateU.)
08-31-2011 08:16 AM
Find all posts by this user Quote this message in a reply
ZiNgA BuRgA Offline
Fag
*******
Posts: 3,357
Joined: Jan 2008
Post: #12
RE: User Map with XThreads?
(08-31-2011 03:10 AM)Shemo Wrote:  
(08-30-2011 06:08 PM)ZiNgA BuRgA Wrote:  Wow what?
I admit I really don't know much about Google Maps API, but that looks amazing!!

my comment wasn't meant to dig at you, but to show how flexible your plugin really is.
I wasn't replying to you if you misunderstood something...

Thanks for the guide RateU Smile

My Blog
(This post was last modified: 08-31-2011 08:40 AM by ZiNgA BuRgA.)
08-31-2011 08:40 AM
Find all posts by this user Quote this message in a reply
RocketFoot Offline
Senior Member
****
Posts: 338
Joined: Jul 2010
Post: #13
RE: User Map with XThreads?
Rateu and Zinga...no apologies are needed for anything!  You are both Xthread geniuses!  Thank you for all you do for the community!

[Image: gallery_2_628_39582.jpg]
08-31-2011 09:28 AM
Find all posts by this user Quote this message in a reply
x-Treme Offline
Member
***
Posts: 68
Joined: May 2010
Post: #14
RE: User Map with XThreads?
So we don't need an api key for this? Seems I can remember having to get one for the old plugin (but that was years ago).

Forum Freebies
08-31-2011 09:43 AM
Find all posts by this user Quote this message in a reply
RocketFoot Offline
Senior Member
****
Posts: 338
Joined: Jul 2010
Post: #15
RE: User Map with XThreads?
No API key here and it seems to be working great!

This is awesome!  Thanks again, RateU!  Biggrin

http://www.7173mustangs.com/forum-usermap

Oh, why does my link say forum-usermap?  And 1 minor question...how can I change "Thread Subject?" to something like "City, State?"

[Image: gallery_2_628_39582.jpg]
(This post was last modified: 08-31-2011 10:13 AM by RocketFoot.)
08-31-2011 10:05 AM
Find all posts by this user Quote this message in a reply
x-Treme Offline
Member
***
Posts: 68
Joined: May 2010
Post: #16
RE: User Map with XThreads?
(08-31-2011 10:05 AM)RocketFoot Wrote:  Oh, why does my link say forum-usermap?
Because you are using seo url's

(08-31-2011 10:05 AM)RocketFoot Wrote:  And 1 minor question...how can I change "Thread Subject?" to something like "City, State?"

Editing line 97 of umap_newthread template and replacing the "{$lang->thread_subject}" should work (didn't try it though)

Code:
<td class="trow2" style="width: 20%; white-space:nowrap;"><strong>{$lang->thread_subject}</strong></td>


Forum Freebies
08-31-2011 10:22 AM
Find all posts by this user Quote this message in a reply
RocketFoot Offline
Senior Member
****
Posts: 338
Joined: Jul 2010
Post: #17
RE: User Map with XThreads?
Thanks X-Treme!  Everything is good to go!  I even made an ADD PIN button!

Excellent mod!  Well done guys!
One thing that eluded me...

How can we prevent a member from adding more than one pin to the map?

[Image: gallery_2_628_39582.jpg]
(This post was last modified: 08-31-2011 11:03 AM by RocketFoot.)
08-31-2011 10:58 AM
Find all posts by this user Quote this message in a reply
ZiNgA BuRgA Offline
Fag
*******
Posts: 3,357
Joined: Jan 2008
Post: #18
RE: User Map with XThreads?
You probably need to check, but I do recall someone making a MyBB plugin which limits the number of threads a user can post in a particular forum...


http://mods.mybb.com/view/limit-user-threads-in-forums
Haven't tried it, or even looked at it, but may help.

My Blog
08-31-2011 12:20 PM
Find all posts by this user Quote this message in a reply
RocketFoot Offline
Senior Member
****
Posts: 338
Joined: Jul 2010
Post: #19
RE: User Map with XThreads?
(08-31-2011 12:20 PM)ZiNgA BuRgA Wrote:  You probably need to check, but I do recall someone making a MyBB plugin which limits the number of threads a user can post in a particular forum...


http://mods.mybb.com/view/limit-user-threads-in-forums
Haven't tried it, or even looked at it, but may help.

Thanks Z!  That seems to work great!

Would it be possible to link the member's username to the tooltip so when you run your mouse over a pin, it will show the member's username instead of thread title?


Attached File(s) Thumbnail(s)
   

[Image: gallery_2_628_39582.jpg]
(This post was last modified: 08-31-2011 08:59 PM by RocketFoot.)
08-31-2011 08:28 PM
Find all posts by this user Quote this message in a reply
RocketFoot Offline
Senior Member
****
Posts: 338
Joined: Jul 2010
Post: #20
RE: User Map with XThreads?
Or, would it be possible to make the balloon pop open on mouse roll over?

[Image: gallery_2_628_39582.jpg]
09-01-2011 12:37 AM
Find all posts by this user Quote this message in a reply

« Next Oldest | Next Newest »

 Standard Tools
Forum Jump: