NoPaste

Openlayers

von uname

SNIPPET_TEXT:
  1. <!DOCTYPE HTML>
  2. <html lang="de">
  3.    <head>
  4.       <style type="text/css">
  5.          .ol-popup {
  6.          position: absolute;
  7.          background-color: white;
  8.          -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  9.          filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  10.          padding: 15px;
  11.          border-radius: 10px;
  12.          border: 1px solid #cccccc;
  13.          bottom: 12px;
  14.          left: -50px;
  15.          min-width: 80px;
  16.          }
  17.          .ol-popup:after,
  18.          .ol-popup:before {
  19.          top: 100%;
  20.          border: solid transparent;
  21.          content: " ";
  22.          height: 0;
  23.          width: 0;
  24.          position: absolute;
  25.          pointer-events: none;
  26.          }
  27.          .ol-popup:after {
  28.          border-top-color: white;
  29.          border-width: 10px;
  30.          left: 48px;
  31.          margin-left: -10px;
  32.          }
  33.          .ol-popup:before {
  34.          border-top-color: #cccccc;
  35.          border-width: 11px;
  36.          left: 48px;
  37.          margin-left: -11px;
  38.          }
  39.          .ol-popup-closer {
  40.          text-decoration: none;
  41.          position: absolute;
  42.          top: 2px;
  43.          right: 8px;
  44.          }
  45.          .ol-popup-closer:after {
  46.          content: "x";
  47.          }
  48.       </style>
  49.       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" type="text/css">
  50.       <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
  51.    </head>
  52.    <body>
  53.  
  54.             <div id="map" class="map" style="height: 400px; border: 1px solid #AAA;"></div>
  55.             <div id="popup" class="ol-popup">
  56.                <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  57.                <div id="popup-content"></div>
  58.             </div>
  59.  
  60.       <script>
  61.          var locations = [
  62.           ['Test',51.5, 0,"blue"],
  63.          
  64.          ];
  65.          
  66.          
  67.          /**
  68.          * Elements that make up the popup.
  69.          */
  70.          var container = document.getElementById('popup');
  71.          var content = document.getElementById('popup-content');
  72.          var closer = document.getElementById('popup-closer');
  73.          
  74.          
  75.          /**
  76.          * Add a click handler to hide the popup.
  77.          * @return {boolean} Don't follow the href.
  78.          */
  79.          closer.onclick = function() {
  80.           overlay.setPosition(undefined);
  81.           closer.blur();
  82.           return false;
  83.          };
  84.          
  85.          
  86.          /**
  87.          * Create an overlay to anchor the popup to the map.
  88.          */
  89.          var overlay = new ol.Overlay({
  90.           element: container,
  91.           autoPan: true,
  92.           autoPanAnimation: {
  93.             duration: 250
  94.           }
  95.          });
  96.          
  97.          
  98.          var features = [];
  99.          for (var i=0; i<locations.length;i++) {
  100.           features.push(coloredSvgMarker([locations[i][2], locations[i][1]], locations[i][0], locations[i][3]));
  101.          }
  102.          
  103.          
  104.          var vectorSource = new ol.source.Vector({ // VectorSource({
  105.           features: features
  106.          });
  107.          
  108.          var vectorLayer = new ol.layer.Vector({ // VectorLayer({
  109.           source: vectorSource
  110.          });
  111.          
  112.          var map = new ol.Map({
  113.           layers: [
  114.             new ol.layer.Tile({ // TileLayer({
  115.               source: new ol.source.OSM()
  116.             }), vectorLayer
  117.           ],
  118.           overlays: [overlay],
  119.           target: 'map',
  120.           controls: ol.control.defaults().extend([new ol.control.FullScreen()]),
  121.           view: new ol.View({
  122.          center: ol.proj.fromLonLat([0,51.5]),zoom: 10 })
  123.          });
  124.          
  125.          // make the map's view to zoom and pan enough to display all the points
  126.          //map.getView().fit(vectorSource.getExtent(), map.getSize());
  127.          
  128.          /**
  129.          * Add a click handler to the map to render the popup.
  130.          */
  131.          map.on('singleclick', function(evt) {
  132.           var name = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
  133.             return feature.get('name');
  134.           })
  135.           if (name) {
  136.             container.style.display="block";
  137.             var coordinate = evt.coordinate;
  138.             content.innerHTML = name;
  139.             overlay.setPosition(coordinate);
  140.           } else {
  141.             container.style.display="none";
  142.           }
  143.          });
  144.          map.on('pointermove', function(evt) {
  145.           map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
  146.          });
  147.          
  148.          
  149.          function coloredSvgMarker(lonLat, name, color, circleFill) {
  150.            if (!color) color = 'red';
  151.            if (!circleFill) circleFill = 'white';
  152.            var feature = new ol.Feature({
  153.              geometry: new ol.geom.Point(ol.proj.fromLonLat(lonLat)),
  154.              name: name
  155.            });
  156.            var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">'+    
  157.                   '<path fill="'+color+'" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>'+
  158.                   '<circle fill="'+circleFill+'" cx="15" cy="10.677" r="3.291"/></svg>';
  159.          
  160.            feature.setStyle(
  161.              new ol.style.Style({
  162.                image: new ol.style.Icon({
  163.                  anchor: [0.5, 1.0],
  164.                  anchorXUnits: 'fraction',
  165.                  anchorYUnits: 'fraction',
  166.                  src: 'data:image/svg+xml,' + escape(svg),
  167.                  scale: 2,
  168.                  imgSize: [30,30],
  169.                })
  170.              })
  171.            );
  172.            return feature;
  173.          }
  174.       </script>
  175.    </body>
  176. </html>

Quellcode

Hier kannst du den Code kopieren und ihn in deinen bevorzugten Editor einfügen. PASTEBIN_DOWNLOAD_SNIPPET_EXPLAIN