How to create an image map automatically without plotting the regions?

Question

I have a base image which has some regions marked on it something like below:

I want to be able to create an image map file as a part of our requirement using the base file. The image map output would look something like this:

<img src="[Usa_counties_large] (imported)" width="990" height="627" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:nkulshrestha -->
<area shape="poly" coords="816,597,833,593,852,582,853,567,853,553,852,539,834,541,835,546,806,549,809,557,813,555,818,563,821,568,825,567,828,569,834,576,834,580,835,583,841,583,845,582,837,589,834,590,828,592" target="22"  nohref="nohref" />
<area shape="poly" coords="789,501,793,500,793,499,795,499,796,500,800,500,804,500,806,500,811,499,818,499,824,501,826,501,831,501,839,508,834,512,852,539,835,541,834,545,805,551,796,535,801,527,798,526,796,525,793,525,794,528,795,529,794,531,791,528,793,504,788,501,788,500" target="10"  nohref="nohref" />
<area shape="poly" coords="831,500,823,502,818,499,796,501,795,499,792,499,792,500,789,501,787,498,783,499,782,496,779,494,778,492,775,492,773,492,774,487,771,486,768,484,765,482,762,481,756,480,755,481,754,484,755,484,752,484,748,487,744,492,741,492,737,492,731,486,728,484,724,482,719,480,715,479,708,479,702,479,697,480,695,482,693,483,692,474,691,473,689,471,688,471,688,466,739,461,740,463,755,450,768,441,780,426,806,415,811,411,814,413,816,411,823,416,816,425,816,431,812,434,812,444,811,446,810,448,809,453,811,466,817,480,825,493,825,492" target="17"  nohref="nohref" />
<area shape="poly" coords="665,483,664,476,663,470,664,466,663,466,663,458,671,457,670,422,704,373,719,372,773,435,740,463,739,461,688,465,689,470,690,471,692,472,693,474,692,477,692,482,687,484,684,482,684,480,684,478,683,476,682,475,680,471,680,474,680,476,679,478,679,480,679,482,677,482,677,483,673,482,664,483" target="14"  nohref="nohref" />
<area shape="poly" coords="804,415,803,409,799,406,798,404,795,404,793,402,791,400,791,397,786,395,783,392,779,388,778,388,776,386,774,385,773,383,767,382,765,381,763,379,762,378,761,378,758,374,756,373,754,370,751,368,751,367,718,372,773,435,779,426,804,416" target="2"  nohref="nohref" />
<area shape="poly" coords="741,368,741,363,744,361,745,360,747,360,745,356,749,355,749,354,750,353,751,352,755,353,762,346,764,347,764,343,769,340,769,342,771,342,774,340,773,339,776,336,779,337,779,338,781,334,780,333,782,332,783,331,784,332,784,325,814,321,814,316,820,313,820,309,824,306,830,306,833,307,836,309,837,311,839,315,889,307,896,318,900,324,902,331,903,333,889,346,889,351,888,353,882,353,879,353,877,355,875,355,864,368,864,375,858,375,856,377,855,378,853,378,845,386,843,397,841,399,841,401,841,402,838,401,837,402,837,403,836,404,824,415,815,411,814,412,813,413,811,411,806,415,804,414,804,410,802,408,801,408,800,405,798,405,796,404,790,395,787,395,786,391,784,391,780,389,778,388,776,386,774,384,774,381,767,383,760,377,758,374,755,371,751,368,742,368" target="15"  nohref="nohref" />
<area shape="poly" coords="786,323,791,320,788,314,791,312,791,308,789,306,789,300,783,296,782,292,779,288,775,288,774,286,774,283,776,283,778,278,770,272,763,271,761,268,756,268,756,264,755,259,753,255,747,255,746,252,744,252,745,250,746,249,746,247,746,245,744,245,744,239,741,239,740,237,739,235,738,234,738,230,739,230,737,212,713,214,708,220,709,225,706,227,706,233,707,241,705,245,709,255,712,275,715,278,717,283,726,289,731,293,739,294,744,297,760,301,768,302,779,304,790,305,789,304" target="19"  nohref="nohref" />
<area shape="poly" coords="718,282,716,285,713,285,711,290,703,298,714,315,720,314,720,317,731,325,735,323,744,329,744,334,749,337,725,369,741,369,741,363,745,362,745,357,747,357,748,355,751,353,754,353,761,349,766,344,765,343,766,342,768,341,768,340,772,343,774,340,774,339,778,337,780,334,783,331,784,331,785,324,789,303,773,303,767,302,761,302,752,300,747,299,740,296,737,295,732,295,729,294,719,283" target="12"  nohref="nohref" />
<area shape="poly" coords="703,302,698,303,697,300,693,302,688,306,686,303,682,309,679,309,679,311,679,315,677,317,662,328,652,341,659,351,667,357,674,356,675,356,682,362,705,372,725,371,749,337,743,331,745,329,735,323,731,326,720,318,721,314,713,314,704,303,702,304" target="9"  nohref="nohref" />
<area shape="poly" coords="664,483,664,475,663,469,664,468,663,458,616,425,560,427,581,436,565,503,577,501,598,506,601,505,601,502,603,501,607,499,609,502,611,502,616,507,619,505,619,507,617,510,617,512,622,512,625,512,628,515,630,514,631,513,632,510,636,510,636,511,638,514,643,512,643,510,644,510,642,508,643,508,646,507,649,509,655,512,659,514,662,514,663,512,662,509,655,506,652,506,650,505,649,504,648,502,651,500,655,499,656,498,656,497,656,494,654,493,653,490,651,495,650,496,646,495,644,494,642,494,636,493,635,492,633,491,631,488,632,486,634,486,638,486,640,484,643,488,651,488,657,484,665,483" target="7"  nohref="nohref" />
<area shape="poly" coords="580,436,558,426,511,513,518,528,520,531,543,518,546,514,548,512,547,511,543,508,547,504,549,502,549,506,555,509,564,503,565,502,569,491,568,481,570,477,581,436" target="11"  nohref="nohref" />
<area shape="poly" coords="397,496,391,491,391,486,397,485,442,352,413,332,286,318,267,448,285,450,285,441,317,444,319,444,321,446,321,449,322,452,324,453,327,454,328,454,332,460,334,463,336,466,338,470,341,470,343,470,346,474,347,476,348,479,348,480,350,485,351,490,352,494,355,499,357,502,366,508,371,510,376,514,378,515,382,511,383,510,386,510,385,507,387,503,388,500,391,499,396,498" target="18"  nohref="nohref" />
<area shape="poly" coords="433,378,455,395,461,395,463,399,474,401,481,401,484,402,487,406,490,406,496,406,500,409,504,412,506,408,510,408,515,411,517,412,521,410,522,409,531,407,539,407,548,412,551,413,556,414,559,414,560,427,539,460,528,461,509,467,486,467,473,473,413,439,433,378" target="6"  nohref="nohref" />
<area shape="poly" coords="398,498,408,498,413,498,416,500,418,502,428,514,431,520,432,523,433,528,435,530,436,534,436,537,439,536,442,541,443,544,444,546,446,547,448,548,450,549,450,552,452,560,453,563,454,565,455,571,456,574,458,576,463,579,467,580,471,583,475,585,476,586,482,586,489,588,493,591,497,591,496,588,494,586,496,578,496,571,494,568,497,560,500,549,508,543,518,534,519,532,511,513,539,460,522,463,510,466,487,466,473,474,413,439,397,485,392,486,391,489,396,494" target="8"  nohref="nohref" />
<area shape="poly" coords="448,389,433,378,442,351,412,331,461,334,477,325,506,336,548,335,584,328,551,357,551,363,553,372,553,413,547,411,542,409,542,407,540,405,538,406,537,407,535,407,531,407,529,409,525,409,521,409,519,411,516,411,512,409,508,409,505,407,505,406,504,409,503,410,502,411,500,411,500,407,499,405,498,407,495,407,492,407,489,407,485,404,483,401,479,401,476,401,474,401,471,401,465,399,463,399,462,395,459,393,455,395,449,391" target="3"  nohref="nohref" />
<area shape="poly" coords="584,328,652,341,662,327,678,315,681,307,664,273,663,249,605,269,584,328" target="4"  nohref="nohref" />
<area shape="poly" coords="663,249,668,219,671,220,674,220,676,220,678,218,679,217,714,214,709,219,710,225,709,226,706,229,706,235,707,240,706,243,711,259,711,263,711,267,711,272,714,276,715,278,719,278,722,279,721,282,718,284,715,284,714,284,712,289,709,292,706,296,704,301,703,303,700,303,697,302,696,300,693,302,692,304,686,305,684,307,682,308,664,274,663,249" target="16"  nohref="nohref" />
<area shape="poly" coords="738,210,745,216,747,217,750,217,754,216,755,217,758,217,758,215,761,213,765,213,766,213,773,205,777,205,779,203,785,199,789,196,793,194,796,192,797,189,798,194,835,189,840,229,836,242,782,291,773,286,776,283,777,280,775,277,771,274,769,273,766,273,764,273,763,271,761,269,759,269,757,269,757,261,756,260,754,258,754,255,750,255,746,253,744,251,746,247,746,246,745,239,742,239,739,237,738,233,739,229,737,213" target="29"  nohref="nohref" />
<area shape="poly" coords="835,189,832,159,830,160,828,161,825,160,822,160,818,161,812,162,807,164,804,164,805,168,808,170,809,172,809,175,807,179,805,183,801,188,799,189,797,190,798,194,798,196,798,195" target="35"  nohref="nohref" />
<area shape="poly" coords="852,130,859,184,835,189,832,159,840,158,843,158,845,158,843,156,846,154,847,153,849,151,849,148,849,146,848,145,849,143,849,141,847,141,846,139,845,138,845,135,848,133,850,130,851,130" target="36"  nohref="nohref" />
<area shape="poly" coords="851,129,863,111,889,107,890,112,890,114,891,117,893,117,893,122,893,126,893,130,896,131,896,134,894,138,898,138,899,142,899,144,901,148,902,153,902,157,907,155,911,154,914,154,920,154,921,157,920,161,925,165,925,167,925,169,901,202,926,192,930,190,925,199,915,204,905,206,902,208,901,197,885,194,881,191,879,191,877,185,874,185,872,182,859,184,852,130" target="38"  nohref="nohref" />
<area shape="poly" coords="901,208,901,202,902,201,901,197,883,193,876,186,874,185,871,182,835,189,840,229,894,256,885,248,885,244,883,242,881,239,880,236,880,235,886,241,891,243,895,243,895,246,895,249,897,246,898,240,898,239,901,236,902,232,901,228,903,228,904,224,903,219,903,214,902,213,901,213,898,213,897,211" target="34"  nohref="nohref" />
</map>

Usually, we can do this by selecting the Polygon area wizard in Image Map Window and clicking all the points that we would like to be a part of the Polygon. This is, however, time-consuming in case of multiple regions as we have to click multiple times to get the polygon boundaries.

Is there a way that GIMP can automatically read the regions and generate the html coordinates without us having to manually click around the area to generate it?

Answer 1

Not in standard Gimp.

Possible technique:

1. For each area:

   • Select the area with Fuzzy select (Wand)
   • Select>To path to generate a path from the selection

2. In the Paths list, make all paths visible (shift-click the eye icon of any path), right-click any path, and Merge visible paths

3. Use the path-csv script to export the paths coordinates to a CSV file
4. Massage the CSV (text editor or else...) to keep only the anchors and transform them into valid HTML map polygons.

You can also keep the paths separate and export them in distinct CSVs (slower but makes it easier to relate area and polygon)

Alternatively, you can modify the path-csv code to generate the HTML directly. This will also make it possible to relate polygon and area names if you set a meaningful name on the path.

Without any Gimp scripts, you can also export the paths to SVG files, and then process the SVG (but you may find the CSV more palatable).

Gimp paths are explained there

Note that you will have a polygon per closed area, for islands (Hawaii, at least) this means that you'll have several polygons with the same target.

Edit: if the lines are thick enough, you can use the Color selector tool with a large threshold and click in any area of the map. This will, in one shot, select all the areas without overlap and Select>To path will create a path with on stroke per area. Of course, in that case linking strokes and areas is left as an exercise to the reader:)