How to draw polygons on the web?

I

iklementiev2012-09-17 19:27:14

JavaScript

iklementiev, 2012-09-17 19:27:14

Good afternoon.

There are polygon coordinates. For example:

#  X          Y<br>
1; 402139.3;  1538128.55<br>
2; 402144.83; 1538166.25<br>
3; 402116.7;  1538170.38<br>
4; 402111.09; 1538132.22<br>
1; 402139.3;  1538128.55<br>

I would like to draw polygons using this data in a web project. I get data on the web in the form of jSON (you can sharpen it for GeoJSON)

There are the following requirements and wishes:
1. I want to draw using JS (jQuery, etc.)
2. The ability to designate polygon points (vertices)
3. The ability to change the scale
4. Work with real coordinates
5. I want a simple, not cumbersome tool
6. Work at least in the latest browsers
7. Lowest priority: the ability to work both without a background and with a background (for example, Google Maps)

Thank you.

Reply

Answer the question

In order to leave comments, you need to log in

6 answer(s)

A

alisey, 2012-09-17
@alisey

SVG for example. Scalable, fast, native support.
jsbin.com/ovaxir/1/edit

S

Sergey, 2012-09-17
Protko @Fesor

raphaeljs.com/ for example.

S

SerDIDG, 2012-09-17
@SerDIDG

Some time ago I made a map area drawing on canvas. I just decided to redo it for the sake of interest for similar needs to yours.
artlark.ru/tools/poly_draw/github.com/SerDIDG/Poly-Draw
_

P

Pavel Isakov, 2012-09-17
@kwikpik

You can draw on maps with this leaflet.cloudmade.com/

2

2m0nd, 2012-09-17
@2m0nd

SharpMap seems to have something for the web sharpmap.codeplex.com/ it seems that in some kind of their test project, I even drew polygons on the substrate, either from bing roofing felts from Google.

A

Alexander Skakunov, 2013-01-07
@alex4

Google Maps has a built-in polygon and polyline rendering engine. You can even do animation there.
developers.google.com/maps/documentation/javascript/overlays - manual
developers.google.com/maps/documentation/utilities/polylineutility - a tool to try
By the way, Google Maps supports encoding a list of coordinates into a string. I measured the amount of data - it turns out 10 times less data for transmission over the network. This is achieved due to the fact that the letters are much more "capacious" than the numbers. The alphabet is larger = the lines are shorter. Try it.