Geodesic Solutions Community Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Region Map Linking ======

Within our software is a geographic navigation feature that allows you to select regions that you only want to view listings from.  This feature filters out classified ads and auctions from regions you do not want to see them from.  The basics of this feature supply you with link sections and popouts where you select the region you want to view from.  Many clients have expressed the need to embed those links within a clickable map.  You certainly can do that.  You only need a map image, a little html link map creation and the links to use for each region.

===== Creating Region Link URLs =====

The links you would use to link to a region would be of two types:

==== Query string ====
  
With this method you find the region id for a region from within the following admin tool:

  GEOGRAPHIC SETUP > REGIONS
  
You'll see the region id as the number next to a region.  The following illustrates where to find that region id:

{{ :startup_tutorial_and_checklist:usability_configuration:custom_browsing:geographic_regions_id_subdomain.png }}

To get the link url to Alabama in the above screenshot you would use the region id and create a link like:

<code html>
<a href="index.php?region=287">link to set Alabama region filter</a>
</code>

==== Subdomain Link Method ====

This method will only work if you have the subdomain feature of the geographic navigation feature in use within your site.  The [[admin_menu:addons:geographic_navigation:sub_domains:start|subdomain linking feature is explained here in the support wiki]].

If you link this method you'll need to find the subdomain for the region you want to link so that you can create that link.  With the screenshot above you'll also see the subdomain value.  You would use that in your link like:

<code html>
<a href="alabama.example.com">link to set Alabama region filter</a>
</code>

=====Create an HTML Image Map=====

We created an example below based on an image of the United States.  We made each state in the map a link to that region.  Note that the regions below use the query string link method.  We actually used the following site to easily create the map:

  http://www.image-maps.com
  
You can upload the map to their site, create the hotlink shapes within it and download the code to place in your site.  You may need to change some html a bit but it gets 99% of the way.  We used the following image:

{{ :startup_tutorial_and_checklist:usability_configuration:custom_browsing:usa-map.jpg }}

and generated the code below.  

To see that code in action go here:

[[http://geodesicsolutions.com/example_demos/region_map_link/classified_ad_software_us_map_link.html]]

<code html>
<img id="US Image page" src="https://geodesicsolutions.com/wiki/lib/exe/fetch.php?media=startup_tutorial_and_checklist:usability_configuration:custom_browsing:usa-map.jpg" border="0" width="645" height="428" usemap="#image-maps-2014-02-10-104131" alt="" />
<map name="United States Map" id="US Map">
<area  shape="poly" coords="267,209,296,211,298,234,310,244,326,249,341,249,354,249,361,262,364,276,369,289,365,300,357,305,347,313,335,319,329,330,325,338,324,347,315,351,303,348,299,336,293,325,286,315,280,310,274,300,268,299,257,303,253,308,243,304,239,295,237,287,232,279,225,272,222,270,229,267,239,268,250,269,259,271" alt="Texas" title="Texas" target="_self" href="index.php?region=245"     />
<area  shape="poly" coords="365,259,365,270,368,282,369,293,366,301,377,302,387,302,394,306,406,308,413,308,416,303,413,291,411,287,390,287,391,279,397,270,395,260" alt="Louisiana" title="Louisiana" target="_self" href="index.php?region=269"     />
<area  shape="poly" coords="202,195,192,268,221,265,259,268,266,203" alt="New Mexico" title="New Mexico" target="_self" href="index.php?region=256"     />
<area  shape="poly" coords="269,201,356,203,357,250,345,246,325,245,311,244,297,238,298,211" alt="Oklahoma" title="Oklahoma" target="_self" href="index.php?region=251"     />
<area  shape="poly" coords="360,213,361,250,367,258,394,257,392,246,401,239,405,230,409,220,401,212" alt="Arkansas" title="Arkansas" target="_self" href="index.php?region=284"     />
<area  shape="poly" coords="394,283,400,269,397,257,398,244,405,232,425,231,428,288,417,291,413,285" alt="Mississippi" title="Mississippi" target="_self" href="index.php?region=263"     />
<area  shape="poly" coords="429,231,428,292,437,292,437,284,465,279,465,262,453,231" alt="Alabama" title="Alabama" target="_self" href="index.php?region=287"     />
<area  shape="poly" coords="444,284,506,282,515,299,523,314,532,333,533,348,527,353,516,346,510,328,499,319,495,302,482,292,468,296" alt="Florida" title="Florida" target="_self" href="index.php?region=278"     />
<area  shape="poly" coords="459,230,465,245,467,259,468,273,477,283,497,281,506,276,512,262,498,249,488,237,478,230,477,228" alt="Georgia" title="Georgia" target="_self" href="index.php?region=277"     />
<area  shape="poly" coords="484,227,495,235,505,247,511,257,523,246,530,239,533,233,521,222,499,221" alt="South Carolina" title="South Carolina" target="_self" href="index.php?region=248"     />
<area  shape="poly" coords="473,223,495,202,553,192,560,205,550,222,538,231,521,219" alt="North Carolina" title="North Carolina" target="_self" href="index.php?region=254"     />
<area  shape="poly" coords="481,200,552,188,545,177,533,170,530,163,523,165,510,179,504,189" alt="Virginia" title="Virginia" target="_self" href="index.php?region=242"     />
<area  shape="poly" coords="494,192,483,182,488,170,497,160,504,158,513,159,522,162,515,171,508,187" alt="West Virginia" title="West Virginia" target="_self" href="index.php?region=289"     />
<area  shape="poly" coords="527,155,538,166,547,170,554,183,571,183,584,173,565,170,556,169,549,166,544,158,544,152" alt="Maryland" title="Maryland" target="_self" href="index.php?region=267"     />
<area  shape="poly" coords="547,151,554,163,565,166,577,168,588,164,581,154,567,154,561,157" alt="Delaware" title="Delaware" target="_self" href="index.php?region=280"     />
<area  shape="poly" coords="552,149,558,160,567,158,572,149,568,139,569,136,562,133,559,129,553,127,551,136,556,143" alt="New Jersey" title="New Jersey" target="_self" href="index.php?region=257"     />
<area  shape="poly" coords="566,114,565,127,585,119,579,111" alt="Connecticut" title="Connecticut" target="_self" href="index.php?region=281"     />
<area  shape="poly" coords="582,110,588,124,584,136,595,143,601,134,603,125,591,121,589,118" alt="Rhode Island" title="Rhode Island" target="_self" href="index.php?region=249"     />
<area  shape="poly" coords="567,113,566,105,585,97,591,105,599,110,605,114,592,114,585,106" alt="Massachusetts" title="Massachusetts" target="_self" href="index.php?region=266"     />
<area  shape="poly" coords="572,100,571,85,575,69,582,86,588,97" alt="New Hampshire" title="New Hampshire" target="_self" href="index.php?region=256"     />
<area  shape="poly" coords="587,92,578,66,584,61,583,35,596,35,606,50,616,62" alt="Maine" title="Maine" target="_self" href="index.php?region=268"     />
<area  shape="poly" coords="555,72,563,104,571,102,569,83,572,69" alt="Vermont" title="Vermont" target="_self" href="index.php?region=243"     />
<area  shape="poly" coords="506,124,546,118,562,126,559,100,554,78,540,79,535,92,513,107" alt="New York" title="New York" target="_self" href="index.php?region=255"     />
<area  shape="poly" coords="495,127,501,155,550,144,549,126,543,119" alt="Pennsylvania" title="Pennsylvania" target="_self" href="index.php?region=250"     />
<area  shape="poly" coords="455,137,458,172,480,173,493,155,493,132" alt="Ohio" title="Ohio" target="_self" href="index.php?region=252"     />
<area  shape="poly" coords="412,208,475,199,485,191,477,177,459,175,449,185,429,193" alt="Kentucky" title="Kentucky" target="_self" href="index.php?region=270"     />
<area  shape="poly" coords="411,214,487,204,464,223,409,228" alt="Tennessee" title="Tennessee" target="_self" href="index.php?region=246"     />
<area  shape="poly" coords="427,140,429,174,428,190,442,185,453,173,453,139" alt="Indiana" title="Indiana" target="_self" href="index.php?region=273"     />
<area  shape="poly" coords="430,136,469,133,474,107,464,91,451,74,431,70,417,65,401,74,421,81,429,97" alt="Michigan" title="Michigan" target="_self" href="index.php?region=265"     />
<area  shape="poly" coords="397,129,420,127,423,100,414,88,401,83,392,77,377,77,379,86,377,98" alt="Wisconsin" title="Wisconsin" target="_self" href="index.php?region=290"     />
<area  shape="poly" coords="399,136,420,133,424,154,426,173,423,184,418,196,414,201,404,188,400,176,391,159" alt="Illinois" title="Illinois" target="_self" href="index.php?region=274"     />
<area  shape="poly" coords="347,160,384,159,388,177,398,189,408,201,404,211,385,210,367,209,358,209,355,175" alt="Missouri" title="Missouri" target="_self" href="index.php?region=262"     />
<area  shape="poly" coords="278,197,352,202,354,181,346,167,282,164" alt="Kansas" title="Kansas" target="_self" href="index.php?region=271"     />
<area  shape="poly" coords="345,155,387,154,399,138,386,119,340,120" alt="Iowa" title="Iowa" target="_self" href="index.php?region=272"     />
<area  shape="poly" coords="340,113,385,114,372,101,369,89,373,79,379,68,397,57,375,55,361,48,347,46,335,46" alt="Minnesota" title="Minnesota" target="_self" href="index.php?region=264"     />
<area  shape="poly" coords="268,78,333,82,328,48,273,45" alt="North Dakota" title="North Dakota" target="_self" href="index.php?region=253"     />
<area  shape="poly" coords="270,84,332,88,333,121,268,115" alt="South Dakota" title="South Dakota" target="_self" href="index.php?region=247"     />
<area  shape="poly" coords="280,161,280,151,261,145,265,121,335,131,342,162" alt="Nebraska" title="Nebraska" target="_self" href="index.php?region=260"     />
<area  shape="poly" coords="206,190,272,197,277,152,214,145" alt="Colorado" title="Colorado" target="_self" href="index.php?region=282"     />
<area  shape="poly" coords="152,186,198,195,187,267,171,266,136,242" alt="Arizona" title="Arizona" target="_self" href="index.php?region=285"     />
<area  shape="poly" coords="165,122,188,127,187,140,207,144,200,189,154,184" alt="Utah" title="Utah" target="_self" href="index.php?region=244"     />
<area  shape="poly" coords="138,204,160,121,108,110,100,144" alt="Nevada" title="Nevada" target="_self" href="index.php?region=259"     />
<area  shape="poly" coords="137,110,189,119,195,93,177,91,167,58,159,42,158,30,154,39" alt="Idaho" title="Idaho" target="_self" href="index.php?region=275"     />
<area  shape="poly" coords="201,87,262,96,257,141,195,134" alt="Wyoming" title="Wyoming" target="_self" href="index.php?region=240"     />
<area  shape="poly" coords="261,88,265,44,169,29,173,51,179,70,184,85,201,82" alt="Montana" title="Montana" target="_self" href="index.php?region=261"     />
<area  shape="poly" coords="144,55,151,24,94,7,90,23,90,38,105,51" alt="Washington" title="Washingtion" target="_self" href="index.php?region=241"     />
<area  shape="poly" coords="70,89,132,106,145,64,86,48" alt="Oregon" title="Oregon" target="_self" href="index.php?region=288"     />
<area  shape="poly" coords="69,98,99,108,92,143,136,217,128,236,108,235,77,199,56,126" alt="California" title="California" target="_self" href="index.php?region=283"     />
<area  shape="poly" coords="201,376,159,331,150,268,102,252,58,268,28,295,27,326,46,349,13,372,93,374,133,356,179,384" alt="Alaska" title="Alaska" target="_self" href="index.php?region=286"     />
<area  shape="poly" coords="180,323,202,342,235,353,261,377,280,389,295,372,281,351,258,334,225,323,197,318" alt="Hawaii" title="Hawaii" target="_self" href="index.php?region=276"     />
</map>
</code>

====== Putting It All Together ======

===== As a separate page =====

Where you put the above map depends on you.  We have many clients that put their image map into a separate page from the software that appears first when your clients come to your site.  They would place the map in an index.html or index.htm page that would appear before index.php would.  If you just insert a url into a browser like "example.com" your host looks for specific files in your root directory in order.  It looks for a index.html or index.htm file and then for the index.php file.  So if there is a index.htm or index.html file they would automatically appear.  All the links within the map would simply need to link into the Geo software installation on your site.  Most likely just index.php.  

===== On the front page =====

You would simply place their image map on their front page.  That only requires changes within the front_page.tpl (default design) to include that map and set regions.  You may consider using Smarty code to make that map only appear if no region is set.  Ask support for code.

===== Within a popup you create =====

You could place a "select region link" of your own html design that pops open a page that includes the map where all the links within open in the parent page.
Geodesic Solutions Community Wiki

User Tools

Site Tools

Page Tools
