Solved

Getting the co-ordinates of a map

Posted on 2014-03-10
1
179 Views
Last Modified: 2014-10-26
Given a raster image like the one here, is there a way by which I can get the co-ordinates of the different polygons using java so I can generate coordinates for an HTML area element?

Sample HTML area co-ordinates for referenced image are given below:

<area shape="poly" alt="North West Delhi (SC)"
coords="224,148,237,122,243,117,249,120,262,116,286,119,311,132,314,120,320,
116,319,107,325,92,342,64,356,70,361,70,369,63,365,52,373,43,378,45,382,56,3
90,63,412,64,433,87,447,76,458,77,465,94,460,105,463,119,483,119,499,96,507,
93,507,81,526,82,547,79,570,88,574,95,571,104,583,129,584,138,577,147,576,16
5,552,158,548,184,567,202,549,209,532,202,531,194,523,194,519,189,496,190,48
4,187,469,199,461,198,457,201,458,212,436,219,436,225,444,224,444,231,459,23
5,473,239,477,237,483,244,496,240,512,245,513,254,499,264,495,271,502,275,49
4,289,496,292,493,299,487,292,480,296,473,284,456,294,447,307,438,328,422,34
4,401,352,397,361,393,424,379,424,349,454,342,440,339,419,327,415,321,392,29
8,401,267,400,254,420,249,430,246,427,241,407,207,403,192,401,192,384,206,35
5,178,333,196,301,193,292,189,288,191,279,172,263,179,248,189,241,177,224,18
3,200,172,190,166,189,172,175,175,162,178,155,194,162,199,153,198,143,205,13
9,211,139,221,149" nohref title="North West Delhi (SC)" />
<area shape="poly" alt="North East Delhi"
coords="642,288,631,280,633,271,638,261,636,255,633,252,623,254,602,241,602,
228,598,227,593,220,579,217,600,206,590,202,567,204,567,203,550,209,532,202,
531,195,522,193,520,189,496,190,484,187,469,199,461,198,458,200,458,210,455,
214,436,219,436,225,444,224,444,232,474,239,478,237,483,244,497,240,512,245,
513,253,498,265,496,272,502,274,494,289,495,294,504,291,524,294,540,302,554,
307,555,313,537,313,532,320,532,325,526,328,527,336,550,346,547,356,542,366,
545,372,555,365,561,373,564,379,554,389,557,396,565,398,569,384,572,384,579,
366,585,353,592,338,600,340,600,383,606,399,621,407,646,394,655,392,658,396,
694,391,701,386,718,380,745,360,734,348,737,338,736,333,746,322,728,324,725,
321,721,322,707,323,697,329,693,339,682,332,681,322,686,307,675,297,661,283,
655,288" nohref title="North East Delhi" />
<area shape="poly" alt="Chandni Chowk"
coords="492,394,426,386,423,405,429,412,423,413,409,413,393,424,397,359,402,
352,422,343,439,327,445,309,457,294,473,284,480,296,487,291,493,300,496,293,
507,292,524,294,544,303,554,308,555,313,536,313,532,320,532,325,526,329,527,
336,551,346,542,367,545,372,554,365,562,374,563,380,554,389,557,395,564,397,
566,398,570,383,573,384,592,339,600,341,600,383,606,400,619,406,632,420,627,
431,607,434,616,462,616,468,615,467,589,452,583,450,578,441,570,437,564,431,
561,429,556,420,557,413,549,413,544,408,527,402,526,412,521,414,513,412,516,
404,512,404,505,395,496,392" nohref title="Chandni Chowk" />

Open in new window


and so on. Note that I do not want to parse the coordinates from HTML I want to generate coordinates from the raster image.

Co ordinates is what I need ultimately, even though html is not there.
0
Comment
Question by:Sreejith22
1 Comment
 
LVL 25

Accepted Solution

by:
SStory earned 500 total points
ID: 40205353
I think you are saying you want to take the image in Photoshop, and generate the HTML map. IF this is correct, look here for how: http://iam.andyhawkes.co.uk/post/1319372215/easy-photoshop-imagemaps
It basically tells you to Download this script: https://github.com/andyhawkes/ps-paths-to-imagemap
Define each area in Photoshop as a separate path, then run the script.  I haven't tried, it, but it should be easy to take the magic wand or other selector tool and have it select each shape so that you can create paths.

In fact here a quote from that link:

    Select the “magic wand” tool
    Use it to select a specific region
    Click on the “Make work path from selection” button in the paths palette
    Give the work path a name
    Repeat the above until you’ve got all of your areas defined as named paths
    Run the script
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
In this tutorial viewers will learn how to create layer styles in Photoshop to easily apply effects to multiple items. Open a document in Photoshop: Apply layer styles to a layer by right clicking the layer in the Layers window and selecting "Blendi…
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question