How do draw polygons which can be used with OpenLayers? - javascript

I can draw custom shapes using polygons in Inkscape. My goal is to display these shapes on top of the map of the US at fixed positions. The map and the polygons will display on a webpage with the ability to zoom in and out and pan. I wanted to know if these polygons can be placed on such a map using OpenLayers. How? Example anywhere? I am not familiar enough with OpenLayers and would learn it more if it can meet my requirements. I need to programmatically be able to color fill each shape either server or client side. I also want to place markers on the map based on lon/lat coordinates. Does OpenLayers support all this?
This is an example of what I want to do. The area in orange was defined in Inkscape and the color orange can be a different color set programmatically. This is a simple svg file displayed on the web page.

You should be able to treat the exported SVG as a regular image overlay. Here is the OpenLayers API for image overlays and here is another SO answer with a very basic image overlay example. OpenLayers supports markers, though if you're embedding the SVG as a flat image, I'm not sure if OpenLayers will allow you to style the SVG elements out of the box...
As an aside, Polymaps is an alternative mapping library that's slightly more SVG-oriented; it's especially good for stuff like dynamically transforming SVG layers based on data, manipulating styles and classes for SVG elements, etc. Per your example, here's their example for very simply throwing an image (with defined top-right / bottom-left coordinates) on a map.

Related

Draw a polygon (preferably rectangle) on Custom Overlays (Microsoft.Maps.CustomOverlay) in Bing Maps v8

On Bing Maps v8 Is it possible to draw a Polygon (preferably rectangle) on Custom Overlay (Microsoft.Maps.CustomOverlay).
I have been able to render Images (as pushpins) on Custom Overlays using Canvas Layer example given in the link
https://bingmapsv8samples.azurewebsites.net/#Canvas%20Layer
I want to draw a rectangle on Top of this Canvas Layer.
Polygon's are rendered within the base map canvas. As such changing the zIndex such that custom overlays are below polygons would result in the overlay being behind the base map and not visible. It is not possible to put custom overlays between the base map and polygons at this time.
That said, if you are using the drawing tools, it uses a separate canvas when drawing/editing which is above custom overlays. If you are simply drawing a polygon/rectangle and then doing a search with it, that would work, but the final polygon would end up behind the overlay as soon as you leave edit mode.
However, polygons should always be rendered behind pushpins This is standard practice in all mapping platforms.

Polygon Background Texture in Leaflet

I am working on a mobile application with leaflet 1.0. The map contains many differently shaped polygons and I want to give them a texture via PNG-Files.
Leaflet's ImageOverlay does pretty much what I want except that it can't clip the image to the shape of the polygon. ImageOverlays only accept imageUrls so I need to have the clipped image locally saved for every individual polygon. Is there a better approach for my problem?
See the "Leaflet.pattern" plugin in the plugins list.

How do I resize SVG images on a map as the zoom level changes?

I'm using leaflet to allow uses to draw custom SVG paths (polygons) on a map. The problem is that when the user zooms out, the polygon becomes too large and obscures the rest of the map.
I've looked online for examples, and the resources I've come across uses the geo functions from the d3.geo library. Whereas in my use case I'm using d3, leaflet, and an SVG layer over the map.
Is there a formula that I can apply to resize the objects correctly? I know that I will have to apply a translate function which will be based on the width height and current zoom level, but I was wondering if there is a standard way to do this?
EDIT: Here is one resource I found, but it uses the d3 geofunctions, and from what I can gather, it seems to redraw the polygons every time the map view is reset (which might be inefficient(?)
http://www.d3noob.org/2014/03/leafletjs-map-with-d3js-objects-that.html
Just apply CSS to change the size of the SVG or just modify the SVG using JS or what ever you use for SVGs every time the scroll event is triggered.
Google maps has an event in it's api which is triggered when the zoom level changes.
https://developers.google.com/maps/documentation/javascript/events#EventProperties

Tiled background image in OpenLayers

When using OpenLAyers is it possible to have a layer that consists of a tiled, zoomable image? I can use CSS to set the background-image and background-repeat properties of the DIV tag but of course that doesn't scale when I zoom in and out.
I use OpenLayers.Layer.WMS for tiled, zoomable images, which I believe is the most commonly used layer for that purpose. There is a simple WMS example in the OpenLayers Demos. If you sniff the http requests made from that demo, you'll see a URL like:
http://vmap0.tiles.osgeo.org/wms/vmap0?LAYERS=basic&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&FORMAT=image/jpeg&SRS=EPSG:4326&BBOX=5.625,39.375,11.25,45&WIDTH=256&HEIGHT=256
Request parameters in this URL include a bounding box, a projection and a tile width and height. The server responds with the appropriately sized image for that location (BBOX) and projection (SRS). OpenLayers takes care of placing the tile images returned into the appropriate locations in your map viewport.
OpenLayers is doing a lot for you here. You don't have to manipulate the CSS or DIV tags yourself, but it is all done geospatially. If your tiled images aren't geospatial then you might want to look at something else besided OpenLayers. Hope I helped.

Hovering over different segments in a circle

I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.
What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.
I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.
I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?
you can create image maps that are not rectangular, but use polygon shapes.
this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!
A few options:
HTML image map
It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.
CSS image map
To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.
onmousemove
You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.
I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.
It does however use some CSS properties that are not very widely supported such as pointer-events
JSFiddle Demo

Categories