OpenLayers Draw & Measure¶

This notebook demonstrates the draw interaction and measurement tools in OpenLayers.

In [ ]:

# %pip install anymap-ts

# %pip install anymap-ts

In [ ]:

from anymap_ts import OpenLayersMap

from anymap_ts import OpenLayersMap

Drawing Polygons¶

Click on the map to draw polygon vertices. Double-click to finish.

In [ ]:

m = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px")
m.add_basemap("OpenStreetMap")
m.add_draw_control(draw_type="Polygon")
m

m = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px") m.add_basemap("OpenStreetMap") m.add_draw_control(draw_type="Polygon") m

In [ ]:

m.draw_data

m.draw_data

Drawing Lines¶

In [ ]:

m2 = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px")
m2.add_basemap("OpenStreetMap")
m2.add_draw_control(draw_type="LineString")
m2

m2 = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px") m2.add_basemap("OpenStreetMap") m2.add_draw_control(draw_type="LineString") m2

Drawing Points¶

In [ ]:

m3 = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px")
m3.add_basemap("OpenStreetMap")
m3.add_draw_control(draw_type="Point")
m3

m3 = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px") m3.add_basemap("OpenStreetMap") m3.add_draw_control(draw_type="Point") m3

Distance Measurement¶

Click to add measurement points. Double-click to finish. The measurement is shown on the map.

In [ ]:

m4 = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px")
m4.add_basemap("OpenStreetMap")
m4.add_measure_control(measure_type="LineString")
m4

m4 = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px") m4.add_basemap("OpenStreetMap") m4.add_measure_control(measure_type="LineString") m4

Area Measurement¶

In [ ]:

m5 = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px")
m5.add_basemap("OpenStreetMap")
m5.add_measure_control(measure_type="Polygon")
m5

m5 = OpenLayersMap(center=[-122.4, 37.8], zoom=12, height="600px") m5.add_basemap("OpenStreetMap") m5.add_measure_control(measure_type="Polygon") m5