I'm trying to move a geoJSON polygon (the outline of a city's administrative borders) from it's original location to another arbitrary one, maintaining its shape while respecting the Mercator projection. Much like how this site does it: https://thetruesize.com/
I've experimented with moving images around the map and those do respect the mercator projection when moved north, but this isn't ideal as the geoJSON would have to be converted to an image on the fly...
Is there an easy way to do this in mapbox without modifying the entire geoJSON to new coordinates?
Thanks!
transformTranslate from Turf.js can help you to translate GeoJSON features or geometries.
I sometimes had some problems when moving polygons across the globe with transformTranslate, so I wrote some function (repl.it) that behaves a bit differently.
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.
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
We're building an interactive visualization of various formats of geospatial data.
We've loaded GeoJSON of country borders onto our map, as well as linestring and point data - all works well and is spatially accurate.
How do we accurately overlay a georeferenced raster image on top of our vector basemap?
We've found and looked at these resources, but they're either not perfectly relevant or too complex to pick out specifically what we need:
http://bl.ocks.org/mbostock/5342063
Properly scale a vector to fit a raster layer
I'm using d3.js for a non contiguous cartogram where countries are scaled depending on some data. I'm scaling from the centroid of each country/path in the svg generated from a GeoJson file, but this doesn't look good for countries described as a multipolygon, like the USA or Canada.
I would like to find the centroid of each polygon forming a multipolygon, so I can rescale without translating them. For example, when using the centroid of the USA, Alaska moves towards the right (in a mercator projection) while the rest moves up. Ideally, Alaska would be scaled from its own centroid, so it would stay in the same position.
Is it possible to iterate through each polygon in a multipolygon feature and get its centroid?
Thanks!
Finally I decided to split multipolygons in polygons by iterating over geometry.coordinates as #LarsKotthoff mentioned. With these polygons I created a new array of features with no Multipolygon types in it. Paths are added to the svg from this array, resulting in several polygons having the same id and name, i.e., several polygons for Canada with the same country abbreviation.
Thus you can keep using d3's path.centroid() to get the centroid of each polygon.
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).