summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/snap-grid.js
blob: 4478c5a1d1e8e9ede9cb1a564c5fb132a48b6cac (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
var points = new OpenLayers.Layer.PointGrid({
    name: "Snap Grid",
    dx: 600, dy: 600,
    styleMap: new OpenLayers.StyleMap({
        pointRadius: 1,
        strokeColor: "#3333ff",
        strokeWidth: 1,
        fillOpacity: 1,
        fillColor: "#ffffff",
        graphicName: "square"
    })
});

var lines = new OpenLayers.Layer.Vector("Lines", {
    styleMap: new OpenLayers.StyleMap({
        pointRadius: 3,
        strokeColor: "#ff3300",
        strokeWidth: 3,
        fillOpacity: 0
    })
});

var map = new OpenLayers.Map({
    div: "map",
    layers: [new OpenLayers.Layer.OSM(), points, lines],
    controls: [
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.LayerSwitcher(),
        new OpenLayers.Control.Attribution()
    ],
    restrictedExtent: new OpenLayers.Bounds(
        1035374, 7448940, 1074510, 7468508
    ),
    center: new OpenLayers.LonLat(1054942, 7458724),
    zoom: 13
});

// configure the snapping agent
var snap = new OpenLayers.Control.Snapping({
    layer: lines,
    targets: [{
        layer: points,
        tolerance: 15
    }]
});
snap.activate();

// add some editing tools to a panel
var panel = new OpenLayers.Control.Panel({
    displayClass: "olControlEditingToolbar"
});
var draw = new OpenLayers.Control.DrawFeature(
    lines, OpenLayers.Handler.Path,
    {displayClass: "olControlDrawFeaturePath", title: "Draw Features"}
);
modify = new OpenLayers.Control.ModifyFeature(
    lines, {displayClass: "olControlModifyFeature", title: "Modify Features"}
);
panel.addControls([
    new OpenLayers.Control.Navigation({title: "Navigate"}),
    modify, draw
]);
map.addControl(panel);

var rotation = document.getElementById("rotation");
rotation.value = String(points.rotation);
rotation.onchange = function() {
    points.setRotation(Number(rotation.value));
};

var spacing = document.getElementById("spacing");
spacing.value = String(points.dx);
spacing.onchange = function() {
    points.setSpacing(Number(spacing.value));
};

var max = document.getElementById("max");
max.value = String(points.maxFeatures);
max.onchange = function() {
    points.setMaxFeatures(Number(max.value));
};