World map with Lat/Lon support - javascript

I need a vector world map in JS/Flash that supports display of dots based on their lat/lon coordinates. I need to use this for a office locator, for a company with offices around the world. The idea is you click on the office in the list, and the map navigates to the dot of that office. Dots are displayed for all offices.
JVectorMap is built with JS, but does not support Lat/Lon, as far as I can see
SVG World Map is built with jQuery, but no Lat/Lon, it only supports clicking countries
This question (and this gist) uses D3 to draw a map possibly with Lat/Lon dots
Vis4 contains 100+ projections, and possibly supports lat/lon
GerbenRobijn has an equirect map with lat/lon support
How do I engineer a map to support Lat/Lon coordinates, and convert X/Y to Lat/Lon (convert mouse coordinates to Lat/Lon), and convert Lat/Lon to X/Y (convert Geo-marker to a dot on the map)

All of the decent map packages have a "Lat/Lon support". The help page for your first example, JVectorMap, describes two functions:
latLngToPoint
Converts coordinates expressed as latitude and longitude to the coordinates in pixels on the map.
pointToLatLng
Converts cartesian coordinates into coordinates expressed as latitude and longitude.
The 'setFocus' in the same package can accept either lat/lon or x, y coordinates.
I fail to see a problem.

Related

Putting coordinate value on topojson US map

I am using react-d3-map-bubble library to plot US map.
react lib- https://github.com/react-d3/react-d3-map-bubble
US map json file used - https://d3js.org/us-10m.v1.json
My target is to plot points on that map.
In current js file, counties object uses arcs and plots different points on US map. See here for pictorial discription - https://bl.ocks.org/mbostock/9943478
I have lat and longs instead of arcs/polygons.
So, in json file I will be changing 'countries' object with below sample :
{
"type": "GeometryCollection",
"geometries": [
{
"type": "Point",
"properties": {
"name": "Some place in New Mexico",
"population": 54590
},
"arcs": [
[]
],
"coordinates":[33.500142,-111.929818]
}
]
}
With given transform function in US json I am not able to put given coordinates to the correct place on the Map.
Transform function
"transform": {
"scale": [0.09996701564084985, 0.058373467440357915],
"translate": [-56.77775821661018, 12.469025989284091]
}
So,
How could I get correct transform function for my coordinates which uses topojson?
OR
How could I get all coordinates converted into arcs/polygons, which could be directly placed in "counties" object?
Topojson and coordinates
I think there is some confusion about what topojson does: "I have lat and longs instead of arcs/polygons".
Topojson saves space by applying a "quantized delta-encoding for integer coordinates", but the real space savings can come from the use of arcs (geojson would contain the mutual boundary of two features twice, once for each feature). But d3 doesn't actually draw topojson, the data is converted back into geojson (as seen in your linked example):
topojson.feature(us, us.objects.counties).features
If moving from geojson to topojson and back again, your original coordinate system remains unchanged. So if you start with lat longs, you'll finish with lat longs. Arcs and polygons aren't alternative coordinate systems, they are shapes built with coordinates in any given coordinate system.
Problem
The problem is your topojson has encoded coordinates that aren't latitude and longitude pairs - in this case they are pixel values so that the feature is drawn on a coordinate plane that stretches from [0,0] to [960,600] in svg coordinate space. Why would they be in this odd coordinate space that isn't latitude longitude? So that you don't need to use a projection to draw them, this is faster in the browser and simpler for an example like what Mike Bostock might be trying to demonstrate in the linked block.
The topojson uses a projected coordinate space (which is on a 2d Cartesian plane). Your latitude longitude uses geographic coordinate space (which are points on a three dimensional ellipsoid).
Solutions
To convert your points to projected coordinate space you need to apply the same projection if you want features to be aligned.
Alternatively, you can get unprojected data for the US and project that and your latitude longitude points with the same projection.
Apply the same projection used for the US to each point
Normally you are not be able to easily figure out what projection a geojson or topojson (or shapefile for that matter if it is without a .prj file) uses if it is already projected. In this case we know it is a composite d3.geoAlbersUsa() projection, but we don't know the projection's parameters so we can't use it, unless we had access to additional data about the file, or if we made it ourselves and as a consequence knew what parameters we used.
Even if we had this information, we may find it cumbersome to scale the map for different svg/canvas sizes, as we would need to scale both projected data and unprojected data differently since we would be working with two different coordinate systems.
Get unprojected data for the US
It is not too difficult to find geographic data for the US states/counties/etc online. If you find shapefiles, they are easy to convert in tools such as mapshaper.org, though geojson or topojson files shouldn't be hard to find either. You just need to make sure that the coordinates use latitude longitude pairs (with the order of [long,lat], the example coordinate in your question uses [lat,long] which won't work.) rather than any other coordinate system.
Once you have this you need to make sure you apply the same projection to all features.
Why Scale and Translate Don't Help
The scale and translate of the topojson also don't refer to the projection parameters, but the quantized delta encoding used in the topojson.

Plotted lat/long points on map are being placed incorrectly

I have a set of lat/long 37.786453, -122.490402 that when mapped correctly maps to San Francisco. However, in my code. It is mapping to western Utah. I am able to manipulate the location of the point by altering this section of code that has been unchanged from the original block I utilized:
projection
.scale(1000)
.center([-106, 37.5])
What correct value(s) need to be placed here? If I remove the section entirely it places the point in eastern Oregon.
Here is the current fiddle: https://jsfiddle.net/Lv5knc0n/
This is a follow-up question regarding plotting lat/long on a map using d3.js. Link to the first post here.
Your fiddle is showing features with two different projections:
A null projection for the US topojson
A Mercator projection for the point
For the topojson shown with a null projection:
The US topojson referenced has come up in many other posts, it is a composite Albers projection of the US (which incorporates multiple projections in one frame). The data in it is already projected, hence the use of a null projection. The null projection simply takes the x,y coordinate of each point and translates it to svg coordinates with no transform (in mapshaper.org or any geographic software, it will appear upside down as svg coordinates start at the top, while geographic coordinates start at the equator, below your map).
Ultimately you are matching an Albers to a Mercator - and when you make changes to the Mercator projection:
projection
.scale(1000)
.center([-106, 37.5])
You are not changing the topojson since the path generator for it doesn't use a projection. You are only changing the point's projection. And as you are using two different projections, the same geographic point will be represented differently in each projection - making alignment of multiple points problematic if not impossible (depending on the points and projections).
There is a relatively straightforward solution, use unprojected data for your US Counties (where the spatial data consists of lat long pairs) and project it with the same projection as your points. This will allow you to use one projection for both points and paths, or any other features, allowing you to scale and zoom all features at once (otherwise, you will need to use a geoTransform to manipulate the counties data while trying to match those changes with changes to the projection, not an ideal solution).
Try using the json in this block (here).

latitude and longitude on mapbox using leaflet

Using leaflet, a line is constructed between 2 points with known coordinates of end points.
how can we get latitude and longitude of all points lying on that line.
As I said already in How to find every point [ coordinates ] between two geolocation coordinates?, the right way is to use geographiclib to fetch the azimuth and distance between points, and calculate new points using the same azimuth but different distances, and do research about great circles.
If you don't care about great circles and prefer to fetch the lat-lngs of the straight line as displayed in EPSG:3857, then use map.project, map.unproject and a tiny bit of linear interpolation.

Polygon in Leaflet JS at wrong position

i´m trying to create a map based on LeafletJS. I need some shapes rendered in the map.
I need - for example "Kreis Wesel" (part of germany) in my map. I downloaded shapefiles from http://www.gadm.org/country and imported them into OpenJump. Fine - they are displayed correctly in the GUI.
When i copy the area to clipboard an format id as JSON (with my texteditor) and parse it width 'L.polygon(var).addTo(map', the polygon is created correctly - but in the Indian Ocean, not in Germany.
Any ideas wheres my fault?
Well it seems you can find info in that previous thread
first two lines: " Is there a service that can provide custom tiles in the EPSG:4326 projection? I've looked at Cloudmade and it would be the ideal solution but their tiles are using Spherical Mercator"
The shapes you downloaded are in lat/lon coordinates epsg:4326 whereas your base layer OpenStreetMap uses Spherical mercator epsg:3857
Change your shape's epsg with your favorite GIS software.

Help with coordinates to plot on google map using api

i have got these two coordinates x and y from an external database.
X = 30490, y = 31430
was trying to figure out how to plot these coordinates on to google map? As google map only accept lat and lon value...
Any help is most appreciated!! Thanks...
This may help.
How do I convert coordinates to a Latitude & Longitude?
You will need to know the coordinate system that was used for those coordinates. There are hundreds if not thousands of 'official' coordinate systems!
once you have the coordinate system, you can transform the coordinates to those used by Google (Longitude, Latitude degrees WGS84 with a spherical Earth).
You may want to do the transformation offline, but if you are doing it online with JavaScript, then take a look at the Proj4JS library.
For offline use, the standard open source library is Proj.4 but that is probably a bit daunting if this is your first experience with geographic coordinate systems and map projections.

Categories

Resources