Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    prebuilt Javascript/XML interactive USA map

    Can anyone suggest a non-Flash USA map that allows for popup? I've only found one online.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    ???

    http://maps.google.com/maps?f=q&sour...51.875&t=h&z=3

    Yes, you can add your own popups to that map, with a bit of JavaScript coding.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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

  • The Following 2 Users Say Thank You to TinyScript For This Useful Post:

    marilynn.fowler (11-11-2010), Old Pedant (11-11-2010)

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    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.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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.
    Last edited by TinyScript; 11-12-2010 at 01:56 AM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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.
    Code:
    <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>

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Gentlemen, here's another one that looks pretty sweet: http://www.netzgesta.de/mapper/:
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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!!!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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




    Code:
    <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>

  • #13
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #15
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    Resolved

    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?
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •