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
Related
Creating a map similar to the one found here:
https://www.plantmaps.com/interactive-california-2012-usda-plant-zone-hardiness-map.php
Have all the data needed.
Create polygons around each one without distance inbetween. No overlapping or similar.
Drawing it all by hand on geojson.io, seems impossible.
I want to create polygons around each [point] and make sure there is no distance between them.
What you're describing here is a tessellation. Depending on your data, you might opt for a regular tessellation (i.e. creating a grid of squares or hexagons, paying a modicum of attention to the units of your coordinate system) or the well-known-among-GIS-people Voronoi tessellation. Note that a Voronoi tessellation created over a regular grid of points will result in a regular grid of polygons.
There are plenty of tools for Voronoi tessellations. For javascript and GeoJSON, my tool of choice would be turf.js's voronoi module.
Here are some things to consider:
creating polygon from a point is simple enough. For example you use the point as the center of a regular polygon and devide 2PI by the number of sides and step through the points to create the polygon. But, what is the radius? That depends on the projection you are using. I happen to use OpenLayers and really like this map control. It's default projection it EPSG:3857. So, the coordinates are already in meters - so easy. But if your points are in long/lat then you have to do some math. it may be easier to transform to a different projection temporarily. An opensource library that is really nice for gis calculations if you need one is Turf.
You mentioned also about having non-overlapping polygons? Well, in this case you will have a lot of gaps if you use regular polygons. To have non-overlapping polygons with, as you put it no distance between them is an interesting constraint. Now you are dealing with different shaped polygons. And an algorithm for handling that is pretty intense. I know that MapInfo GIS has a feature for adjusting polygons to be non-overlapping. But, in a JavaScript environment with GeoJSON, you are probably talking about server side logic for this.
That map you are looking at looks like it is using Leaflet with svg overlays.
leaflet use FeatureGroup() for edit. and I want to save data use toGeoJSON.but circle,marker... have point info only.
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[118.49561691284181,31.87595414652557]}},{"type":"Feature","properties":{},"geometry":{"type":"Point","coordinates":[118.5268591952,31.848500597]}}]}
I need save more info.how?
Strictly speaking saving this kind of data "to GeoJSON" is not possible because simply GeoJSON does not support circles.
GeoJSON supports the following geometry types:
Point, LineString, Polygon, MultiPoint, MultiLineString,
MultiPolygon, and GeometryCollection.
The old 2008 GeoJSON spec says nothing about circles http://geojson.org/geojson-spec.html
and neither the new one (august 2016) https://www.rfc-editor.org/rfc/rfc7946
If you want to save a point and its radius to represent a circle you need to make a format of your own, but this of course will not work out-of-the-box with leaflet's geojson layergroup.
Edit: seems some people went down that road already so you may wanna check this out:
https://github.com/Leaflet/Leaflet.draw/issues/390
They saving the radius in the properties of GeoJSON and extended the GeoJSON layergroup to work with that. A bit hacky, geojson spec goes down the drain, but it seems to accomplish what you want.
Another possibility is to convert your circles to polygons with an acceptable amount of nodes, then saving that polygon in GeoJSON.
I wanted to ask you about the way to make spatial interpolation in google maps API. This means- I have values for some points inside an area and want to recalculate values for every point in this area (and create an raster overlay).
In "offline" GIS softwares, there are more methods to do this. For example Kriging (http://en.wikipedia.org/wiki/Kriging).
Thanks for answer
There is no real practical way to do such a thing. Spatial Interpolation is something you really need a full-blown GIS to accomplish. It requires storing, analyzing, and presenting data in way that ArcGis or QGis is best suited for. There is some new feature in ArcGis Online that works with Google Maps API but I don't know much about it and am unsure if it would be any help for you but a link is here.
I know, its not something geostatiscically correct, but I have made this:
- I have created a net of rectangle polygons.
- I have connected all my points to polygon they lie and have made mean value for polygons with at least one point
- I have checked every polygon without points and at least 2 neighbourly polygons with points, and have made mean from this neighbourly values
- I have checked again all my polygons with values and at least 2 neighbourly polygons with values and smoothed origin values according to the neighbours´ values.
I am attempting to make a simple PhoneGap app that will allow a user to input lat/long points and bearings and calculate their estimated intersection, along with a measure of error. I would like to display the lines, intersection, and an error elipsoid on a map or at least a grid of latitude and longitude lines, so the user can visualize the accuracy of the point. The tricky part is that this will be used for wildlife tracking in areas where the user may not have cell service. Is there some sort of Javascript plugin that will make a lat/long grid available for me to draw georeferenced lines and shapes on? I would love to use something like the Google Maps API, but that clearly won't work for offline use. I've Googled quite a bit, but I'm not sure where to start with this or if it's even feasible at all.
This program is similar to what I'm trying to achieve: http://www.locateiii.com/
Any ideas are greatly appreciated.
I'd use d3.js and http://code.google.com/p/gmapcatcher/ something like this where you can keep the google maps offline. If that's not feasible you can always us D3 with a svg of the map.
I ended up using OpenLayers with OpenStreetMap tiles prepared by Maperitive. Simple and works well with PhoneGap.
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.