Plotting a presumably canvas based custom map with JS - javascript

I'd appreciate some help with working out how I'm going to do this. I have a file from which I need to load a list of geographical coordinates (with lines, points, labels etc) and plot my own map with it. As I've said, each point corresponds to a geographical coordinate, but note that these are not overlaid on top of an existing world map, they are the map themselves if this makes sense.
I figured a canvas with some maths to work out which pixel a geographical coordinate should lie at, but this raises the question of how could I make it possible to zoom/pan this map?
Hope this makes sense. For reference, it'll look something like the following:

Related

Problem while modifying MultiPolyline drawn over dateline in Openlayers

I am working on an application in OpenLayers which allows users to draw polylines and modify them.
For sake of presentation when the user draws across the dateline, I have split the polyline into two halves and added it to map as a MultiPolyline (MultiLineString) in OpenLayers.
The problem is when the user tries to modify the point on the dateline, the line can be observed as split on the map to the user.
Which should not happen. When a user tries to modify the point on the dateline, it should be seen as a complete line not split at any instance.
To see the problem draw a polyline across the dateline and try to modify the dateline point (180° longitude). Here is a link to my code dateline modify problem
I was thinking about adding a vertex from the point being modified to the point on the dateline, is there a way to do that?
Also, I have observed that not all the polylines on my map are modifiable. I don't know why.
Please suggest me if I should refactor my code with a different approach.

Plot geometry of longitude and latitude coordinates using javascript

I have longitude and latitude coordinates which represent different types of geometry shapes (point, multi-point, polygon, multi-polygon and line string etc) that are stored in MongoDB. I'd like plot them (say each shape as a layer) using JavaScript. Map is not needed as a background although these coordinates represent building etc in the real world. I understand there are calculations as such are involved to convert coordinates to x and y on graph/canvas but not sure where to begin tbh. I'm very new to GIS and JavaScript so go easy on me please. I know this question sounds a bit vague but bottom line is I have coordinates that represent real world elements and want to plot them without a map background. I'd appreciate advises and suggestions. Many thanks.
The easiest way to do it is to use a Javascript mapping library such as OpenLayers or Leaflet. You could also do it with D3, although should you want to make your map more full-featured later, it will be much easier with a library that was designed for that type of thing.
If you are storing your data in Mongo as GeoJSON (GeoJSON website), you can add it to OpenLayers as a GeoJSON layer.
Disclaimer- My opinions might be slightly biased because I used to work for Boundless

How to draw polygons sharing exact same edges (borders) using Leaflet Draw

Using geojson.io page I want to draw some districts/countries.
I'm drawing each district separately as there is no multipolygons in Leaflet Draw. However when I'm drawing the borders even with maximum zoom - the borders will never be exactly the same. Coordinates will differ to some extend which is natural. Hence when I am downloading the data in topojson , the data are not valid to display meshes between different districts
How to achieve the goal to have the borders always with the same coordinates?
For example it could be achieved by having the markers visible during drawing and just picking up the one I'm interested in(on a same border) by mouse click - the same way the shape is finished.
I have downloaded the source code, read it (it is nice), searched through docs and thinking how to adjust it for my goal but I'm lost :/
Leaflet.Snap did the trick.
I was afraid that snapping will be not exact for the borders but it is :)

Google Maps API v3 - Snap to polyline edges

Does anybody knows how to make a Marker or a Polyline snap into the coordinates of a existing Polyline?
I'm looking for something like the behavior in the googlemaps engine lite: https://mapsengine.google.com
If you select a Polyline or Marker there and try to edit another polyline coordinate (using ctrl or shift) it will snap into the marker or the polyline coordinates
There is, as far as I know, no easy way to do it. Polylines only have the locations (latLng objects) that you initially pass them and that is it.
So, with this in mind, you can take two approaches:
Instead of a Polyline, you can draw a Polygon.
Change your Polyline to include more points.
Polygon
With this approach, you would have to draw a very thin polygon, thin enough to look like a line.
Wit this approach you can easily check if the marker is inside the polygon by using the containsLocation() method, and if not, set its new position to inside the Polygon.
The drawback is that your Polygon needs to be very, very thin, and you need to set a width for the line. If the width is too big, the dragging will look inaccurate, and if it is too small you may miss it.
Polyline
With this approach, you would have to add multiple points to the polyline, and then move the marker to one of those points every time it went out.
This way there is no need to create a width to calculate the line, but you need to calculate dozens if not hundreds of extra points automatically, and then add them to the Polyline.
Both solutions would work, and both have pros and cons. In the end, it pretty much goes around the which poison do you prefer old saying.
Extra
Theory aside, I did find a good example for the Polylines strategy (kudos to #geocodezip for the comment and #BradBarrow for the response).

map geo coordinates (lat, lng) to map (x, y)

I have the geo-coordinates (latidute & longitude) of some cities and would like to get the x,y coordinates so can plot them into a map.
The map is a standart one, just like http://www.wordtravels.com/images/map/Spain/Fuerteventura_map.jpg for example.
I tried several formular I found, but none seems to really work :(. Simple javascript code or ruby would be best :)
There are many ways to approach this problem with varying degrees of precision. However, they all boil down to performing a projection that corresponds with that of your map.
If you know that your map is of the Mercator projection variety, then the lat/long coordinates can simply be treated as X/Y, scaled and translated appropriately. That is, you would find a simple ax+b and cy+d that do the job.
If your map is not Mercator-projection (as it probably isn't if it tries to get the scale consistent, as this one appears to do) then your best bet is to assume it's an "earth-tangent" projection. (This works out OK for small landmasses.) In that case, you need to first project the Lat/Long into a three-dimensional coordinate system.
z=sin(lat)
x=cos(lat)*sin(long)
y=cos(lat)*cos(long)
Positive z points to the north pole. Positive y points to 0, 0, and positive x points to lat 0 long 90 (east) and positive lat/long are north and east. Of course you must convert to radians first.
All of this assumes a spherical Earth, which isn't exactly true but it's close enough unless you're firing long-range mortar rounds.
Anyway, once you have your XYZ, then you'll need to rotate and scale for the map. To rotate around the Z axis, just subtract the base longitude before you project into three dimensions. Do this to center your map on zero-longitude for easiest math.
Once you've done this, you'll only need to rotate the globe forward until your original map is face-front. Do this with a 2-d rotation in the y-z axis. Use http://en.wikipedia.org/wiki/Coordinate_rotations_and_reflections to figure that part out.
Finally, your x,z coordinates are going to line up pretty well with your map's x,y coordinates, for an appropriate scale/translate as described earlier.
in addition to the above answers, there is the open source proj4js library which performs transforms between various map projections. it is used internally by OpenLayers for this kind of thing, and supports a number of popular projections and coordinate systems.
perhaps this will help, i've done a implementation for the US using just javascript.
demo/code: http://the55.net/_11/sketch/us_map
Use the Google Maps API, you can overlay your jpg on the map and position it correctly.
Here is an example
http://code.google.com/apis/maps/documentation/javascript/examples/overlay-hideshow.html
and here is the api page about overlays
http://code.google.com/apis/maps/documentation/javascript/overlays.html
You won't find it easy unless you're working on a very small scale (and close to the Equator). Wikipedia's Geographic coordinate system is a good start...
The easier path could be to make use of something like web mapping and stick with your latitudes and longitudes.

Categories