I have a world map using raphael.js with a few countries highlighted using paths. My client has asked that I add China as a highlighted country. I located another raphael.js map with China in it and imported the coordinates.
It worked fine except that the position of the vector and it's size are not correct for the world map I am using. The z-index appears to also need to be increased.
I can bring element up by calling thismap.world.cn.toFront(); after it is drawn but the other elements do not require this so I am assuming I can adjust z-index with a coordinate edit?
Is it possible to manually scale and position the element? Are there GUI tools for manipulating the coordinates or do I need to use scale() in raphael.js to manipulate the element?
Coords look like
cn: "M777.533,179.567l-2.325,1.451l-2.326-0.871v-2.323l1.163-1.453l3.196-0.581h1.455l0.581,0.872l-1.163,1.451L777.533,179.567zM825.204,94.194l4.651,0.871l3.488,1.742l0.871,2.614h4.361l2.325-0.872l4.651-0.871l-1.454,2.323l-1.163,1.162l-0.871,2.904l-2.034,2.613l-3.198-0.291l-2.325,0.871l0.581,2.324l-0.29,3.194l-1.454,0.291v1.161l-1.744-1.451l-1.163,1.451l-4.067,1.162l0.289,1.453h-2.325l-1.452-0.872l-1.745,2.032l-3.198,1.453l-2.033,1.742l-3.781,0.871l-2.033,1.162l-3.197,0.871l1.452-1.453l-0.58-1.16l2.325-1.742l-1.455-1.453l-2.324,1.162l-3.197,1.742l-1.745,1.742l-2.615,0.291l-1.452,1.16l1.452,1.743l2.326,0.581v1.162l2.325,0.872l2.906-2.033l2.616,1.162h1.744l0.289,1.452l-3.777,0.871l-1.454,1.452l-2.615,1.453l-1.453,1.742l3.196,1.742l0.872,2.614l1.743,2.613l1.745,2.033v2.033l-1.745,0.581l0.873,1.453l1.455,0.87l-0.292,2.324l-0.873,2.323h-1.452l-2.034,3.194l-2.326,3.484l-2.327,3.195l-3.778,2.613l-4.069,2.323l-2.905,0.291l-1.744,1.162l-0.873-0.871l-1.743,1.452l-3.779,1.451l-2.906,0.291l-0.872,2.904l-1.454,0.29l-0.873-2.033l0.584-1.162l-3.488-0.872l-1.455,0.581l-2.615-0.87l-1.454-0.873l0.581-1.742l-2.615-0.581l-1.452-0.871l-2.328,1.451l-2.615,0.291h-2.034l-1.454,0.58l-1.453,0.582l0.29,2.903h-1.455l-0.289-0.581v-1.161l-2.034,0.87l-1.163-0.581l-2.035-1.162l0.872-2.033l-1.743-0.581l-0.873-2.613l-2.905,0.58l0.29-3.484l2.615-2.323l0.291-2.033l-0.291-2.323l-1.161-0.581l-0.873-1.452h-1.455l-3.194-0.291l1.161-1.161l-1.455-1.743l-2.034,1.162l-2.033-0.581l-3.198,1.742l-2.615,2.033l-2.326,0.29l-1.162-0.872h-1.453l-2.035-0.58l-1.454,0.58l-1.743,2.033l-0.292-2.033l-1.744,0.582L713,154.013l-2.906-0.581l-2.326-1.162l-2.034-0.581l-1.162-1.452l-1.454-0.291l-2.615-1.742l-2.326-0.871l-1.162,0.581l-3.781-2.033l-2.615-1.742l-0.873-2.904l2.036,0.291v-1.453l-1.163-1.161l0.293-2.324l-2.908-3.194l-4.361-1.161l-0.87-2.033l-2.036-1.451l-0.58-0.582l-0.292-1.742v-1.161l-1.743-0.582l-0.874,0.291l-0.579-2.324l0.579-0.871l-0.289-0.581l2.615-1.162l2.036-0.58l2.906,0.291l0.871-1.744l3.489-0.29l1.162-1.162l4.362-1.451l0.289-0.581l-0.289-1.743l2.033-0.581l-2.617-4.646l5.524-1.162l1.452-0.58l2.034-4.938l5.232,0.873l1.744-1.162v-2.904l2.328-0.291l2.033-1.742l1.163-0.29l0.581,2.032l2.326,1.452l4.067,0.872l1.746,2.323l-0.873,3.194l0.873,1.162l3.197,0.582l3.778,0.29l3.488,1.742l1.743,0.291l1.163,2.613l1.455,1.453h3.196l5.522,0.58l3.78-0.291l2.615,0.291l4.069,1.743h3.489l1.162,0.871l3.197-1.451l4.361-0.873l4.359-0.29l3.198-0.871l1.745-1.452l2.033-0.871l-0.581-0.872l-0.873-1.161l1.454-1.742l1.745,0.29l2.614,0.581l2.908-1.452l4.069-1.162l2.034-1.742l2.035-0.872l4.07-0.29l2.034,0.29l0.291-1.162l-2.325-1.741l-2.326-0.872l-2.036,0.872l-2.904-0.291l-1.455,0.291l-0.581-1.162l1.744-2.613l1.453-2.324l3.197,1.162l4.068-1.742v-1.162l2.328-2.903l1.452-0.872v-1.452l-1.452-0.871l2.325-1.162l3.486-0.58h3.491l4.067,0.58l2.617,1.162l1.744,2.903l0.871,1.161l0.874,1.453L825.204,94.194z",
And current map with China drawn looks like:
The answer is to use the translate(x,y) method eg
thismap.world.cn.translate(300, 100);
and the scale() method.
I have data corresponding to user events with (location, time). I would like to visualize these on an animated map. Maybe with points of light appearing when an event happens (with multiple events in the same place making a brighter dot). Double points for animating the day/night regions on the map at the same time. Is there a javascript library good for visualizing such data?
The map on the right side of this visualization written in processing doesn't quite fit my description, but would also work well.
I found that d3.js worked really well for the project. The geo module made it easy to draw a world map (with data from data/world-countries.json and a mercator projection) in an svg element. First, I pre-processed the data to put the users in "buckets" of gps locations. I added a circle for every location, and changed its radius for how many users were in that bucket.
I want to create a data visualization similar to this:
...but for the entire globe. The canvas size will be arbitrary but won't need to resize with the browser (I will set the width and height before I start plotting points). I need to figure out a way of converting latitude and longitude coordinates to points on the canvas. Does anyone know how to do it?
First of all you need to choose projection. Then you can use proper formula. Or you can just use existent solution like proj4js for example. This is JS port of well-known proj utility for working with various projections.
I would recommend to use Miller Projection for the visualizations on the whole globe. You can find formulas here.
I have an extremely large picture of a map. Now I want to create a Map UI where the user can click to highlight regions and also have the functionality to zoom into the map.
Is the AREA tag the only way to go at this problem? My only problem is when I zoom in the map, the will be enlarged and so will the image that it contains, but how would I expand the AREA coordinates according to my zoom level? Is there a good approach for going at this problem?
AREA is the only way to represent polygons, unfortunately. You can read your coordinates from the AREA tag, scale them, and write them back. Rounding overlaps are a pain to deal with though.
One alternative is to use the BING maps API, which allows custom overlays. You need to create an overlay for each zoom level though.
Apply css to AREA MAP
I suggest SVG there, which would also solve your zoom problem. The only complication is that IE8 and below won't support it, and IE9 isn't being pushed through Windows Update to non-beta users yet.
Simple option: ImageMapster figures out most image area map things for you on the fly. IE6+, needs jQuery.
More complex, more powerful option: Raphael.js enables you to create fully controllable fully scalable SVG vector graphics in everything from IE6+ (doesn't need Flash). Bit of a steep learning curve, but it's very powerful.
I'm trying to plot MGRS lines over a map in an overlay using OpenLayers (JavaScript). Where I'm really having problems is identifying the strange squares (non-100kmx100km grids). Does anyone know where I might find an algorithm for plotting these?
In particular, the information I have or can find is:
Convert a Lat/Long to MGRS
Convert a full MGRS string (i.e., 17SLA123678 but not 17SLA) to Lat/Lon
Convert Lat/Lon to screen pixel and vice-versa
Thanks!
I don't know the MGRS system, but the Proj4JS library may be useful. This is used to transform between coordinate systems, so you can set it up to convert from a coordsys to pixels, or more commonly from one coordsys to another.
it is open source, and broadly based on the well known proj.4 library, and interfaces with OpenLayers. Actually, OpenLayers uses proj4js to transform between different coordinate systems.
I just added some of that functionality to https://github.com/jaycrossler/js-maptools (uses Leaflet instead of OpenLayers). It will draw a polygon over the USNG/MGRS cell that the mouse is over.