walkermatt · July 15, 2026 10:17
diff --git a/oli-custom-popup.html b/oli-custom-popup.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <title>Custom popup - LiteMap - ol-ishare</title>
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
    <link rel="stylesheet" href="https://ol-ishare.services.astuntechnology.com/v1/examples/assets/ol.css" />
    <link rel="stylesheet" href="https://ol-ishare.services.astuntechnology.com/v1/umd/oli.css" />
    <style type="text/css">
      html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
        font-family: sans-serif;
        font-size: 16px;
      }

      #map {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <!-- Uncomment the following line if you require a full proj4js build -->
    <script src="https://ol-ishare.services.astuntechnology.com/v1/examples/assets/ol.js"></script>
    <script src="https://ol-ishare.services.astuntechnology.com/v1/umd/oli.js"></script>
    <script>
      // Define a custom InfoPopup instance which provides a custom infoResultsToHtml function that allows us to fully customise the content displayed in the popup
      var infoPopup = new oli.interaction.infopopup.InfoPopup({
        infoResultsToHtml: function(errors, infoLayers, featureCollections) {
          console.log(infoLayers, featureCollections);
          for (var i = 0; i < infoLayers.length; i++) {
            var infoLayer = infoLayers[i];
            var featureCollection = featureCollections[i];
            console.log(infoLayer, featureCollection);
            if (infoLayer.get('iShare:layerName') == 'nhspharmacies' && featureCollection.length) {
              var html = "<section>";
              html += '<h1>' + infoLayer.get('title') + '</h1>';
              // Assume we are only dealing with a single feature
              var feature = featureCollection[0];
              html += `<p><a href="https://google.com/search?q=${feature.get('name')}+${feature.get('add1')}+${feature.get('add4')}">${feature.get('name')}</a></p>`;
              html += "</section>";
              return html;
            }
          }
          // If you want to simply not display the popup then `return "";`
          return 'Please click on a pharmacy';
        }
      });

      var interactions = oli.litemap.LiteMap.defaultInteractions({
        infoPopup: infoPopup
      });

      // Create our LiteMap instance and specify our custom collection of
      // interactions as a `map` property to the options object
      var lite = new oli.litemap.LiteMap({
        target: 'map',
        iShareUrl: 'https://maps.demo.astuntechnology.com/',
        profile: 'mapsources/ol-ishare',
        layers: ['ward', 'nhspharmacies'],
        view: {
          easting: 521000,
          northing: 161000,
          zoom: 10000
        },
        map: {
          interactions: interactions
        }
      });

      // Once the LiteMap has loaded we can add our marker layer
      lite.on('load', function (evt) {
        // Do any setup you need here
      });

    </script>
  </body>
 </html>
No results found