I am looking for the 2D canvas library like Konva.js that I can use above OpenLayers 5.x.
I need to draw shapes with font inside that are interactive - can be dragged over the map to the appropriate location and rotated.
On the image below there is how it looks like with Konva.js over the image background.
Can you advise proper libs or techniques so the same can be implemented over the OpenLayers map?
Related
There are a number of libraries that provide drawing on a canvas such as:
Leaflet.Canvas-Markers
leaflet-canvas-layer
Leaflet.Canvas-Flowmap-Layer
gLayers.Leaflet
react-leaflet-canvas-layer
However, I know leaflet canvas rendering has come along way and wondering if these libraries are somewhat redundant now.
Does Leaflet internal canvas rendered basically has the same functionally of these other library's?
Or in other words can everything done in these other library's be done within leaflet canvas renderer?
Does Leaflet internal canvas rendered basically has the same functionally of these other library's?
No.
Leaflet's L.Canvas provides support for rendering lines, polygons and circles. The plugins you listed provide support for drawing other stuff (e.g. bezier curves, arcs, per-tile canvases).
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.
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.
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.
We've been working with several libraries like GoogleMaps, OpenLayers, ModestMaps... Even we've written a cartographic visor (Java Applet) that dealed with WMS servers several years ago. Of course this visor is currently useless.
Now we want to develop one FULL HTML5 visor because we're having lots of trouble dealing with the most common frameworks (performance, licensing,design ...). We build advanced and technical maps applications for GIS expert.
We want to draw vectors inside a canvas element. We don't want to draw a canvas object over the base map (like we can do with GoogleMaps ...) , we've been dealing with that and it's not the best way, we need a base object as a canvas HTML5 object in which draw directly.
The question is: Is there a free library that renders on a canvas object which we can extend?
If I understand your question correctly, you want a maps API that will draw the map using html5 canvas. It looks like https://github.com/dfacts/Slippy-Map-On-Canvas/ uses the Open Street Maps API to get map tiles and then draws them on the canvas. Is this what you're looking for?
I think this could be the answer: http://leafletjs.com/. This library does everything that we want, it draws vectors on canvas or SVG, draws tiles maps, good integration with geojson and more...It is far and away the best choice.
Certanly this library doesn't use a unique canvas object, but it's even better.