|
11 | 11 | <title>Custom Context Menu for Openlayers</title> |
12 | 12 | <style> |
13 | 13 | html, |
14 | | - body, |
15 | | - #map { |
16 | | - width: 100%; |
17 | | - height: 100%; |
18 | | - overflow: hidden; |
19 | | - } |
20 | | - |
21 | 14 | body { |
| 15 | + margin: 0; |
| 16 | + height: 100%; |
22 | 17 | font: 1em/1.5 BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', |
23 | 18 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', |
24 | 19 | 'Arial', sans-serif; |
25 | 20 | color: #222; |
26 | 21 | font-weight: 400; |
27 | 22 | } |
| 23 | + .main-container { |
| 24 | + height: 100%; |
| 25 | + display: flex; |
| 26 | + } |
| 27 | + |
| 28 | + .left-container { |
| 29 | + flex: 1 1 0; |
| 30 | + padding: 5px; |
| 31 | + } |
28 | 32 |
|
29 | | - #map { |
30 | | - position: absolute; |
31 | | - z-index: 1; |
32 | | - top: 0; |
33 | | - bottom: 0; |
| 33 | + .right-container { |
| 34 | + flex: 1 1 0; |
| 35 | + display: flex; |
| 36 | + flex-direction: column; |
| 37 | + padding: 5px; |
| 38 | + } |
| 39 | + #map1, |
| 40 | + #map2 { |
| 41 | + width: 100%; |
| 42 | + height: 100%; |
34 | 43 | } |
35 | 44 | </style> |
36 | 45 | </head> |
37 | 46 |
|
38 | 47 | <body> |
39 | | - <div id="map"></div> |
| 48 | + <div class="main-container"> |
| 49 | + <div class="left-container"> |
| 50 | + <div id="map1"></div> |
| 51 | + </div> |
| 52 | + <div class="right-container"> |
| 53 | + <div id="map2"></div> |
| 54 | + </div> |
| 55 | + </div> |
40 | 56 | <script type="module"> |
41 | 57 | import Map from 'ol/Map.js'; |
42 | 58 | import View from 'ol/View.js'; |
|
49 | 65 | import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js'; |
50 | 66 | import ContextMenu from './src/main.ts'; |
51 | 67 |
|
52 | | - const view = new View({ center: [0, 0], zoom: 2 }); |
53 | 68 | const vectorLayer = new VectorLayer({ source: new VectorSource() }); |
| 69 | + |
54 | 70 | const map = new Map({ |
55 | | - view, |
56 | | - target: 'map', |
| 71 | + view: new View({ center: [0, 0], zoom: 2 }), |
| 72 | + target: 'map1', |
57 | 73 | layers: [new TileLayer({ source: new OSM() }), vectorLayer], |
58 | 74 | }); |
| 75 | + const map2 = new Map({ |
| 76 | + view: new View({ center: [0, 0], zoom: 2 }), |
| 77 | + target: 'map2', |
| 78 | + layers: [ |
| 79 | + new TileLayer({ source: new OSM() }), |
| 80 | + new VectorLayer({ source: new VectorSource() }), |
| 81 | + ], |
| 82 | + }); |
59 | 83 |
|
60 | 84 | const pinIcon = |
61 | 85 | 'https://cdn.jsdelivr.net/gh/jonataswalker/ol-contextmenu@604befc46d737d814505b5d90fc171932f747043/examples/img/pin_drop.png'; |
|
154 | 178 | const contextmenu = new ContextMenu({ |
155 | 179 | width: 200, |
156 | 180 | defaultItems: true, |
157 | | - items, |
158 | 181 | }); |
| 182 | + const contextmenu2 = new ContextMenu({ |
| 183 | + width: 200, |
| 184 | + defaultItems: true, |
| 185 | + }); |
| 186 | + |
159 | 187 | map.addControl(contextmenu); |
| 188 | + map2.addControl(contextmenu2); |
160 | 189 |
|
161 | 190 | const removeMarkerItem = { |
162 | 191 | text: 'Remove this Marker', |
|
0 commit comments