MapStore2-C040/api.html at master · ElenaGallo/MapStore2-C040 · GitHub

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page with MapStore 2 API</title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway" type='text/css'>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css" />
        <link rel="shortcut icon" type="image/png" href="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/favicon.ico" />
        <script src="https://maps.google.com/maps/api/js?v=3"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
        <script src="https://cdn.jslibs.mapstore2.geo-solutions.it/leaflet/0.2.4/leaflet.draw.js"></script>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/4.0.1/ol.js"></script>
        <style>
        #container {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
        }
        #mapstore2-embedded, #map, .fill {
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body onload="init()">
        <div id="container" class="ms2"></div>
        <script id="ms2-api" src="http://localhost:8081/dist/ms2-api.js"></script>
        <script type="text/javascript">
        function init() {
            MapStore2.create('container',{
                plugins: {
                    desktop: [
                        "Attribution",
                        {
                            "name": "Map",
                            "cfg" :{
                                "mapType": 'openlayers'
                            }
                        },{
                            "name": "LavoriPubblici",
                            "cfg": {
                                "options": {
                                    "geoserverUrl": "http://mappe.comune.genova.it/geoserver/ows",
                                    "activeTools": ["elementsGrid", "pointSelection"],
                                    "inactiveTools": ["areasGrid", "polygonSelection"],
                                    "activeGrid": "elementsGrid",
                                    "maxFeatures": 1000
                                }
                            }
                        }
                    ]
                },
                config: {
                    "map": {
                		"projection": "EPSG:900913",
                		"units": "m",
                		"center": {"x": 1000000.000000, "y": 5528000.000000, "crs": "EPSG:900913"},
                        "zoom": 15,
                		"maxExtent": [
                			-20037508.34, -20037508.34,
                			20037508.34, 20037508.34
                		],
                		"layers": [{
            				"type": "osm",
            				"title": "Open Street Map",
            				"name": "mapnik",
                            "source": "osm",
            				"group": "background",
                            "visibility": true
                        }, {
                            "url": "http://mappe.comune.genova.it/geoserver/ows",
            				"type": "wms",
                            "format": "image/png8",
                            "name": "CORSO_1:V_ELEMENTI_CANTIERI",
            				"title": "ELEMENTI CANTIERI",
            				"group": "Cantieri",
                            "visibility": true
                        }]
                    }
                }
            });

            /**
              * @prop {object[]} areaFeatures: list of features representing the drawn areas (with blu border)
                    for the moment it accept only MultiPolygon
              * @prop {string[]} checkedElements: an array containing the checked row elements in the element grid
              * @prop {object} options. the object which intialize the component
            */
            var areaFeatures = [{"type": "Feature", "id": "1212", "geometry": {"type": "MultiPolygon", "coordinates": [[[
                [8,43], [9,42], [8,42]
            ]]]}, "geometry_name": "GEOMETRY", "properties": {
                "ID": 1212,
                "NOME_LIVELLO": "EDIFICI"
            }}];

            var checkedElements = ["1212"];
            var options = {
                "geoserverUrl": "http://mappe.comune.genova.it/geoserver/ows",
                "activeTools": ["elementsGrid", "pointSelection"],
                "inactiveTools": ["areasGrid", "polygonSelection"],
                "activeGrid": "elementsGrid",
                "maxFeatures": 1000
            };
            MapStore2.triggerAction({
                type: "INIT_CANTIERI_PLUGIN",
                options: options
            });
            MapStore2.triggerAction({
                type: "FETCH_CANTIERI_FEATURES",
                areaFeatures: areaFeatures,
                checkedElements : checkedElements
            });
        }
        </script>
    </body>
</html>