add some map logic...

2021-03-10 20:34:14 +01:00
parent 0420b3efbd
commit 857eee185e
4 changed files with 128 additions and 3 deletions
@@ -0,0 +1,36 @@
+.map {
+  height: 350px;
+}
+.popup {
+  background-color: white;
+  padding-left: 8px;
+  padding-bottom: 8px;
+  padding-top: 8px; 
+  width: 220px;
+  color: #555;
+  font: 11px tahoma,arial,verdana,sans-serif;
+}
+.title {
+  margin-top: -4px;
+  font-weight: bold;
+}
+.subtitle {
+  font-style: normal;
+  margin-bottom: -3px;
+  margin-top: -5px;
+}
+.middle {       
+  margin-top: -9px;
+}
+.close {
+  cursor: pointer;
+  text-decoration: none;
+  position: absolute;
+  top: 2px;
+  right: 8px;
+  font-size: larger;
+  font-weight: bold;
+}
+button {
+  cursor: pointer;
+}
@@ -0,0 +1,69 @@
+// Create a GeoAdmin Map
+var map = new ga.Map({
+  
+  // Define the div where the map is placed
+  target: 'map',
+  
+  // Create a view
+  view: new ol.View({
+    
+    // Define the default resolution
+    // 10 means that one pixel is 10m width and height
+    // List of resolution of the WMTS layers:
+    // 650, 500, 250, 100, 50, 20, 10, 5, 2.5, 2, 1, 0.5, 0.25, 0.1
+    resolution: 650,
+    
+    // Define a coordinate CH1903+ (EPSG:2056) for the center of the view
+     center: [2660000, 1190000]
+  })
+});
+
+// Create a background layer
+var lyr1 = ga.layer.create('ch.swisstopo.pixelkarte-grau');
+
+// Add the layers in the map
+map.addLayer(lyr1);
+
+var position = [2709136, 1270186];
+
+// Zoom on the position
+map.getView().setCenter(position);
+map.getView().setResolution(10);
+
+// Create the layer with the icon
+var vectorLayer = new ol.layer.Vector({
+  source: new ol.source.Vector({
+    features: [new ol.Feature({
+      geometry: new ol.geom.Point(position)
+    })]
+  }),
+  style: new ol.style.Style({
+    image: new ol.style.Icon({
+      anchor: [0.5, 0.5],
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'fraction',
+      src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oLCAwhG8L1qXwAAAJ1SURBVDjLTZPBThRBEIa/6uleYtDVA8QHUGIw4ehVb3Ii+AK+guGid696Ud/AN4BAiFw9ePUAbmK4SIAo7OxuZtnZmZ7umfLQED1U0of6qur/q1oA9PgYWVlBBwNHCGt4v8Ws3GRa9BmPoSimDIc7jEYfqOtD+fw56MYGsruL6GCAPH6Mqjq+f9+jbZ9T1zArYVoo4zFMJsJoBMMh5PkBT55syNu3QZ89QwD07MxxcjJBZJEQFGME7+H8HC4vIc+5LqSMRsJsVuDcsnz7Fozu7zuOjvYoy0WKqeKccP8+3LkDvoHJJEVRwHQqVJVydXWXP392dXXVWcpyjbZ9DiggGIGmgdNTOPkFFxc3MMxmUJaCb5TQrBPCmmU43AKg64QQElhVMBrDZJzgsryBoaohBiFGEHllyfNNOoW2BV9DNU8G3gBlCfM51HWCQ4BOQQxo98Ly+3cfa5UQJCVVCZjP07uuUzQNhAhdB5kBI4qau5Y8hyxLlb3/B3gPtU9gDBDbZJPNQIRr2Viqaor3fWJMyU2T3G8aaGOS1ikYAZOBMSlAiLGwVNUOV1cvaVuIMU0S22uwTbvJDFgLCwsJjhFUQXXbEOMHQoC6VrxPBdr4H5wl8N49WFqC27eh11NcD5z7ZFjoHaJ6QIhCjErbpe4qSa+zcOsWLC4mCaqKdYK1X/D1YTrlN68de/s51byPqoIImUnde700Qa8HoIgIIRT8OFqWeRWMrq8j794HHj1YQuQA1XSNxkCWKSJK26YVqgqdfuHnz2WZV0EfPrz+TE+fIl+/oqurDu/XMGYLkU2c62MtwJQs28aYj1TVoQwGQVdWkONj/gL3ho+XUT2DTgAAAABJRU5ErkJggg=='
+    })
+  })
+});
+map.addLayer(vectorLayer);
+
+// Create the popup
+var popup = new ol.Overlay({
+  position: position,
+  element: $(
+    '<div class="popup">' +
+      '<div class="title"<h3>Kdo FU Waffenplaetze</h3></div>' +
+      '<div class="subtitle">' +
+        '<br>Kaserne Auenfeld<br>' +
+        '<div class="middle">' +
+          '<br>8500 Frauenfeld<br>' +
+        '</div>' +
+      '</div>' +
+      '<div class="close">' +
+        '<div type="button" onclick="$(\'.popup\').hide()"<span aria-hidden="true">X</span></div>' +
+      '</div>' +
+    '</div>')
+});
+map.addOverlay(popup);
+alert("Blabla");