...

View Full Version : prebuilt Javascript/XML interactive USA map



marilynn.fowler
11-10-2010, 10:35 PM
Can anyone suggest a non-Flash USA map that allows for popup? I've only found one online.

Old Pedant
11-10-2010, 10:39 PM
???

http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=united+states&sll=47.838119,-122.113499&sspn=0.009189,0.018539&ie=UTF8&hq=&hnear=United+States&ll=50.958427,-106.171875&spn=71.48398,151.875&t=h&z=3

Yes, you can add your own popups to that map, with a bit of JavaScript coding.

marilynn.fowler
11-11-2010, 01:02 AM
Thank you, Old Pedant. The client actually wants something where each state changes color when you roll over, then have a popup with XML info. While I've seen a wide variety of Flash interactive maps that perform this way, an AJAX version has been pretty illusive.

Old Pedant
11-11-2010, 03:12 AM
Found one:
http://geology.com/state-map/

Has the <img>, the <map>, and then <area>'s for all 50 states, ready to use.

However... Surely is copyright protected. You might ask if you could use it, presumably for a fee. Since you would presumably add colors to it and wouldn't use it for the same purpose he is, he might well be willing.

No reason to use AJAX, by the by. Trivial to do all this in a single HTML page. Why muck with going out to the server???

TinyScript
11-11-2010, 05:31 AM
I just made a test today of something very close. Takes area tags from an image map and makes polys on a canvas element
http://jsdo.it/canvastag/9UQB

marilynn.fowler
11-11-2010, 10:16 PM
Thank you both. TinyScript, this is almost exactly what they were asking for. I'm also excited about the geology maps because I like geology, so that was a nice bonus.

TinyScript
11-12-2010, 02:43 AM
marilynn.fowler, I'm glad you found it useful.

My real intent with that script was to test the pnpoly function on a useful example. It adds isPointInPath type functionality to older versions of internet explorer, but for some reason the script is not displaying all the polys using IE. It's really odd because the polys that render work with the color swap, so the pnpoly function works. I can't figure out what's wrong. If you disable the pnploy test, IE renders all the polys. What needs to be done instead of using the white image map, use a transparent image and position it atop of the canvas element so that you can use the href to trigger the javascript.
This way you don't need the pnpoly function.

But I wanted it to work!!! Curse you Internet Explorer!!



Old Pedant, you like my script? That's awesome. I have learned so much from you, I consider you one of my online professors. Thanks for the nod of approval. It means more to me than you might expect.

Old Pedant
11-12-2010, 02:45 AM
Oh, yes...I like it a lot. I certainly bookmarked it! A *LOT* of work you went to. If I find the time, I'll play with the pnpoly, but even without it working on IE, it's a very neat and tidy solution.

TinyScript
11-12-2010, 04:35 AM
A lot of work? Not really. Two hours including all the Internet explorer fiddling. LOL

pnpoly function was a google find. First hit I think. It's one that declared as public domain.

I think it was coded in C, but I managed to figure out how to make it work.

Making the map polygons quickly and easily:

I was inspired by an image map at the Daily Mail coverage of the US elections. I saved the image map but the poly coords were minimal.

Luckily, I had a coords maker I used for another project
Check this out.
http://jsdo.it/canvastag/7HGN

Here's the coords maker script

Click on the image to add mouse x,y to the textarea to create the polys.

The image is scaled up to make finer polys. click to make dots (marked in red) at the poly points.


<html>
<head>
<style>
html,body{margin:0}
</style>
<script type="text/javascript" src="excanvas.js"></script>

<script type="text/javascript">
var M={x:0,y:0},
MX=0,
MY=0,
ARRY=[],
scale=4

window.onload = function () {
window.canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

document.onmousemove=function(e){M.x=e.pageX;M.y=e.pageY;draw1()}

canvas.onmouseup=function(){
ARRY.push(MX);
ARRY.push(MY);
document.getElementById("read").value=ARRY.join(",")
}

draw1();
};


function draw1() {

ctx.clearRect(0,0,canvas.width,canvas.height)
var map=new Image()
map.src="http://i55.tinypic.com/x29zew.gif"
canvas.width=map.width*scale
canvas.height=map.height*scale
ctx.drawImage(map,0,0,map.width,map.height,0,0,map.width*scale,map.height*scale)
ctx.fillStyle="red"
MX = M.x/scale
MY = M.y/scale
var i=0
while(ARRY[i]){
ctx.save();
ctx.beginPath();
ctx.moveTo(ARRY[i]*scale,ARRY[i+1]*scale);
ctx.arc(ARRY[i]*scale,ARRY[i+1]*scale,2,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
ctx.restore();i+=2
};
ctx.fillText(MX+" "+MY ,M.x,M.y - 5)

}


</script>
</head>
<body>

<canvas id="canvas" width="500" height="500"></canvas>
<textarea id="read" rows="30" cols="50"></textarea>
</body>
</html>

marilynn.fowler
11-12-2010, 08:04 PM
Gentlemen, here's another one that looks pretty sweet: http://www.netzgesta.de/mapper/:

Old Pedant
11-12-2010, 08:21 PM
Yeah, but it's no fun when you don't do it yourself. <grin/>

Funny thing about that coords maker, Tiny: I kept meaning to create one for my sister, and now I have one!!! So *VERY* nice!!!

TinyScript
11-12-2010, 09:59 PM
I updated the script so IE uses image map with blank image

I removed the area tags and table rows to post the css for the tags because the script was too long. Save the real script at jsdo.it and add the changes in this script






<html><head>
<script src="excanvas.js"></script>
</head><body>
<img src="blank.png" style="z-index:100;position:absolute;left:0px;top:0px" usemap="#usamap" width="420" border="0">
<map name="usamap">

</map>

<script>
//Global mouse object

var MOUSE={x:0,y:0}
document.onmousemove=function(e){
e = !e ? window.event : e ;
MOUSE={x:(e.pageX||e.clientX),y:(e.pageY||e.clientY)}
}


//IE point in poly function
function pnpoly(xp, yp, x, y) {
var c = 0;
for (i=0;i< xp.length-1;i++) {
j = (i + 1)% xp.length

if( ( (yp[i]<=y && y<yp[j]) || ( yp[j] <= y && y < yp[i]) )&&( x<(xp[j]-xp[i])*(y-yp[i])/(yp[j]-yp[i]) + xp[i] )
){c = !c}
}
return c
}



function renderHTML(html){
div=document.getElementById("html")
div.innerHTML=html

}




var colors=[ "#faa", "#faa", "#fda", "#faa", "#faa","#fda", "#fda", "#fda", "#afa", "#fda", "#afa", "#fda", "#fda", "#ffa", "#faa", "#faa", "#faa", "#ffa", "#fda", "#ffa", "#faa", "#afa", "#afa", "#fda", "#ffa", "#faa", "#afa", "#ffa", "#afa", "#ffa", "#ffa", "#afa", "#faa", "#ffa", "#fda","#afa", "#afa", "#faa", "#ffa", "#ffa","#fda", "#afa", "#fda", "#afa", "#ffa","#ffa", "#ffa", "#afa", "#ffa", "#ffa" ]




var states=[
"Alabama", "Alaska", "Arizona", "Arkansas", "California",
"Colorado", "Connecticut", "Delaware", "Florida", "Georgia",
"Hawaii", "Idaho", "Illinois", "Indiana", "Iowa",
"Kansas", "Kentucky", "Louisiana", "Maine", "Maryland",
"Massachusetts","Michigan", "Minnesota", "Mississippi", "Missouri",
"Montana", "Nebraska", "Nevada", "New Hampshire","New Jersey",
"New Mexico", "New York", "North Carolina","North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina",
"South Dakota","Tennessee", "Texas", "Utah", "Vermont",
"Virginia", "Washington", "West Virginia", "Wisconsin", "Wyoming"
]


var unemployment_sept_2010=[
"Alabama 8.9",
"Alaska 7.8",
"Arizona 9.7",
"Arkansas 7.7",
"California 12.4",
"Colorado 8.2",
"Connecticut 9.1",
"Delaware 8.4",
"Florida 11.9",
"Georgia 10.0",
"Hawaii 6.3",
"Idaho 9.0",
"Illinois 9.9",
"Indiana 10.1",
"Iowa 6.8",
"Kansas 6.6",
"Kentucky 10.1",
"Louisiana 7.8",
"Maine 7.7",
"Maryland 7.5",
"Massachusetts 8.4",
"Michigan 13.0",
"Minnesota 7.0",
"Mississippi 9.8",
"Missouri 9.3",
"Montana 7.4",
"Nebraska 4.6",
"Nevada 14.4",
"New Hampshire 5.5",
"New Jersey 9.4",
"New Mexico 8.2",
"New York 8.3",
"North Carolina 9.6",
"North Dakota 3.7",
"Ohio 10.0",
"Oklahoma 6.9",
"Oregon 10.6",
"Pennsylvania 9.0",
"Rhode Island 11.5",
"South Carolina 11.0",
"South Dakota 4.4",
"Tennessee 9.4",
"Texas 8.1",
"Utah 7.5",
"Vermont 5.8",
"Virginia 6.8",
"Washington 9.0",
"West Virginia 9.2",
"Wisconsin 7.8",
"Wyoming 6.8"
]

function render(){

//var colors=["#faa","#aaf","#afa","#fdc","#ffa"]
var A=document.getElementsByTagName("area")
var arry=[]
for(i=0;i<A.length;i++){

var obj={}
obj.poly=[]
var str=A[i].coords.split(",")
for(z=0;z<str.length;z++)obj.poly.push( parseFloat(str[z]))
obj.id=A[i].alt
arry.push(obj)
}

function run(){
canvas.width=canvas.width
for(i=0;i< arry.length; i++ ){
ctx.save()
ctx.beginPath()
ctx.moveTo(arry[i].poly[arry[i].poly.length-2],arry[i].poly[arry[i].poly.length-1])
j=0
while(j < arry[i].poly.length-2){
ctx.lineTo(arry[i].poly[j],arry[i].poly[j+1])
j+=2
}
ctx.closePath()

if(!ctx.isPointInPath){
// internet explorer doesn't do isPointInPath
var xp=[]
var yp=[]
//build arrays for xpoints, ypoints for pnpoly function
for(z=0; z < arry[i].poly.length-1 ;z++ ){
z%2==0 ? xp.push(arry[i].poly[z]) : yp.push(arry[i].poly[z])

}

//test each poly for mouse inside, turn color lime if inside
//works for the ploys that render
//ctx.fillStyle = pnpoly(xp,yp,MOUSE.x-ctx.canvas.offsetLeft,MOUSE.y-ctx.canvas.offsetTop) ? "lime" : colors[i%colors.length];
ctx.fillStyle = colors[i%colors.length];

//text function makes script run too slow with IE.
// to do: Use div for textContent
// ctx.fillText(unemployment_sept_2010[i]+"% unemployment",100,350)
}

else { //Use chrome, firefox, opera with isPointInPath


if( ctx.isPointInPath(MOUSE.x-ctx.canvas.offsetLeft,MOUSE.y-ctx.canvas.offsetTop)){
ctx.shadowOffsetX = -1
ctx.shadowOffsetY = 1
ctx.shadowBlur = 2
ctx.shadowColor = "black"
ctx.fillStyle="black"
ctx.font="16px arial black"

if(!ctx.fillText){
//opera doesn't do text on canvas
//to do: make div for textContent
}else{
ctx.fillText(unemployment_sept_2010[i]+"% unemployment",100,350)
}

}
//set fill style of poly
ctx.fillStyle = ctx.isPointInPath(MOUSE.x-ctx.canvas.offsetLeft,MOUSE.y-ctx.canvas.offsetTop) ? "lime": colors[i%colors.length];


} //end Use chrome, firefox, opera with isPointInPath


ctx.fill()
ctx.stroke()
ctx.restore()
}

setTimeout(arguments.callee,50)
}

run()

}

window.onload=function(){
window.canvas=document.getElementById("canvas")
ctx=canvas.getContext("2d")

div=document.getElementById("html")
div.style.position="absolute"
div.style.left=parseInt(canvas.offsetLeft)+100+"px"
div.style.top=parseInt(canvas.offsetTop)+350+"px"
if(!ctx.getImageData || !ctx.fillText){
var A=document.getElementsByTagName("area")

for(i=0;i<A.length;i++){
A[i].alt=unemployment_sept_2010[i]
A[i].onmouseover=function(){renderHTML(this.alt+"% unemployment");this.onmouseout=function(){renderHTML("")}}
}

}
render()
}







</script>


<canvas id="canvas" width="420" height="420" style="z-index:0;position:absolute;left:0px;top:0px"></canvas>
<div id="html"></div>
<h1 align="right">Unemployment Rates for States </h1>
<table id="unemployment" align="right" width="50%" border="1" cellpadding="2" cellspacing="0">
<tbody><tr><th colspan="3" align="center"><b>Unemployment Rates for States<br>Monthly
Rankings<br>Seasonally Adjusted<br>Sept. 2010<sup>p</sup><br>SOUCE:<a href="http://www.bls.gov/web/laus/laumstrk.htm">http://www.bls.gov/web/laus/laumstrk.htm</a></b></th>

</table>
<br>

<div align="right"><sup >p</sup> = preliminary.<br>NOTE: Rates shown are a <br>percentage of the labor force.<br> Data refer to place of residence.<br> Estimates for the <br>current month are <br>subject to revision <br>the following month.
</div>
</body></html>

jameslasner
11-13-2010, 08:06 AM
Thank you, Old Pedant. The client actually wants something where each state changes color when you roll over, then have a popup with XML info. While I've seen a wide variety of Flash interactive maps that perform this way, an AJAX version has been pretty illusive.

Old Pedant
11-14-2010, 12:00 AM
In case it's not obvious, "jameslasner" is a spambot. The advertising part of the message was apparently rejected by the forum, leaving only a repeat of a prior message.

marilynn.fowler
11-14-2010, 01:39 AM
I'd like to mark this as resolved, but I can't find an edit button for the original post title. How do I do this?

Philip M
11-14-2010, 03:25 PM
I'd like to mark this as resolved, but I can't find an edit button for the original post title. How do I do this?

See Posting Guideline #6.

bjornd
06-15-2011, 12:38 PM
You can use jVectorMap (http://jvectormap.owl-hollow.net/) for interactive US map.
Here is image of world map, but US is available too:
http://maxcdn.webappers.com/img/2011/06/vector-map.png



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum