i wanted to ask how react can be used to build a smart map with cells on top. i would like to limit the area to a square.
the cells should be accessible via coordinates.
Attached is a picture of how I imagine it to be.
Thank you
Picture of example
Related
In my design page, the user will be creating/drawing new shapes, in addition to adding image overlays. I'm finding that any shapes drawn using the drawing manager are rendering underneath any image overlays added to the map, see below:
I'd like to know how to achieve a couple of tasks:
1 - How to set the drawing manager so any shape (rectangle/point/circle etc be default is always added as an upper/top layer when the drawingcomplete event has fired, that way the shapes will always appear above any images added to the map.
2 - How to programatically change the order of the various layers created during design, given the user may want to adjust the z-index of the various layers to suit their own endering requirements.
The MS docs here is not really helping me understand how to achieve the above, but also doesnt mention anything about shapes/layers that currently reside within the drawing manager.
Partial answer but along the right tracks...
We can retrieve the shapes (drawing manager layers) from the drawing manager so we have a reference to them.
When i add an image overlay, before actually adding/rendering it to the map, i would first get the shape layers from the drawing manager, then remove them from the map.
Next we add the image overlay to the map and add the shape layers back in as well, its the order that we add/remove the layers that seems to be relevant here.
Once i had added all layers back to the map in the chosen order, i was still able to put the drawing manager into edit mode and select the shape for editing, so i beleive this will work as my solution going forwards.
// Create the image layer
var imageLayer = new atlas.layer.ImageLayer({
url: 'myImageUrl,
coordinates: coordinates
})
// Then get the existing shapes (layers) from the DM
var layers = drawingManager.getLayers();
console.log(layers);
// Remove the shapes.
map.layers.remove(layers.polygonLayer); // polygonLayer as an example...
// Add new image overlay, then the shapes
map.layers.add([imageLayer, layers.polygonLayer]);
I´m working with Leaflet.js and I have a lot of markers but I want to get a polygon drawn automatically containing a specific group of markers.
There´s an image:
Every marker has a specific radio, so if a use it, would be like this:
but I don't want that, I want an area that contains markers, I don't know how can I do that.
You might want to create a convex hull.
https://gis.stackexchange.com/questions/215137/how-to-create-a-convex-hull-with-leaflet-points:
"The easiest way to do this with javascript is to use Turf.js's convex functionality."
A working sample - http://bl.ocks.org/ebrelsford/c31f61d39d2cd559e18a
I need to display many markers on a WPF image. The markers can be lines, circles, squares, etc. and there can be several hundreds of them.
Both the image source and the markers data are updated every few seconds. The markers are associated with specific pixels on the image and their size should be absolute in relation to the screen (i.e. when I move the image the markers should move along with it, but if i zoom in, they should take the same space of the screen as before).
Currently, I've implemented this using the AdornerLayer. This solution has several problems but the most significant one is that the UI doesn't fare well under the load even for 120 such markers.
I wanted to ask what would be the best way to go about implementing this? I thought of two solutions:
Inherit from Canvas and make sure it is invalidated not for every
added marker but for a range of markers at once
Create a control that holds an image and change its OnDraw to draw all the markers
I would appreciate some pointers from someone with experience with a similar problem.
Your use case looks quite specialized, so a specialized solution seems in order. I'd try a variant of your second option — extend Image, overriding its OnRender method.
I am trying to add a weather overlay to my maps , the tile images on Noaa.gov are what i want but i couldn't find any documentation on how to construct url to consume & arrange tiles of overlays for a given lon/lat. below is the a sample url that returns a single tile.
http://radarcache.srh.noaa.gov/tc/tc.py/1.0.0/ridge::NAT-N0Q-201211191510/8/62/97.png
update:
The web service i am working on generates a sectional aviation chart/map for a given lon/lat dimension and zoom level . one of the overlays i am rendering on top of the generated base map is weather(radar reflective ..)
based on the information i have (lon/lat, dimension and zoom level) i want to render weather overlay on top of my base map.
the challenge i am facing is how do i get weather overlay using lon/lat ?
After researching a lot i found out that NOAA Tile System uses this Tile arrangement, based on that i was able to get PNG images overlay for a given (lon/lat/zoom) as follows
http://ridgewms.srh.noaa.gov/tc/tc.py/1.0.0/ridge::NAT-N0Q-{0:yyyyMMddHHmm}/{1}/{2}/{3}.png
Where
{0:yyyyMMddHHmm} = date time in 5 minute increments
{1} ZoomLevel
{2} X or tile column
{3} Y or Tile Row
Without more information about what you are trying to integrate into, here is what I know. If you want to create a custom KML file, there is this page that will do that for you. For more info about other layers, check out this page as well.
If you provide more info about your environment, we might be able to help with more specifics.
EDIT:
For just the transparent gifs, see this page here http://forecast.weather.gov/jetstream/doppler/ridge_download.htm
There is quite a bit of information for downloading actual data here http://www.ncdc.noaa.gov/oa/radar/radardata.html
I want to draw a map in WPF without using any third party controls.
I need each and every state of all the countries, and based on certain conditions I want to color them.
How can I get the polygon shapes of each state of all the countries?
Here is an SVG file with all the states as separate polygons (look at the source!)
You can convert it to xaml if you want and fill the state differently.
EDIT
Just google for svg world map. One of the first hits seems to be a nice resource.