0

Image click area links to data

This is a floor plan. I divided the floor plan into 9 areas. Is it possible to click on the color blocks on the picture to link to the corresponding information? Is there such a function? Thank you.

5 replies

null
    • szormpas
    • 3 mths ago
    • Reported - view

       Hello, 

    One way is to use the leaflet. The javascript mapping library I have embedded in the Dashboard Template project.

    The main idea is that you create a map object with simple (x,y) coordinates and then bind your image to this map as explained analytically in the following tutorials:

      • cyan_silver
      • 2 mths ago
      • Reported - view

        Hello
      I'm asking GPT to edit the information you provided. I don't know if there is a problem. Now it can be used normally. Thank you very much.

      let accounts := (select Accounts where sss = "A1" or sss = "A2" or sss = "A3" or sss = "A4");
      let myGeoJson := {
              type: "FeatureCollection",
              features: accounts.{
                  type: "Feature",
                  properties: {
                      id: '身份標識',
                      name: sss,
                      status: text(Status),
                      sss: sss
                  },
                  geometry: {
                      type: "Point",
                      coordinates: if sss = "A1" then
                          [350, 1200]
                      else
                          if sss = "A2" then
                              [800, 1200]
                          else
                              if sss = "A3" then [1200, 1200] else [1600, 1200] end
                          end
                      end
                  }
              }
          };
      let myGeoJsonString := formatJSON(myGeoJson);
      html("
      <link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' 
          integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=' crossorigin=''/>
      <script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
          integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=' crossorigin=''></script>

      <div id='map' style='height: 600px; width: 100%;'></div>

      <script>
      setTimeout(function(){
          var map = L.map('map', {
              crs: L.CRS.Simple,
              minZoom: -2
          });

          var bounds = [[0, 0], [2400, 3600]];
          var imageUrl = 'https://share.ninox.com/k2jqsnmrob7xi7adsye16uqat6nlwbny1pkn';

          L.imageOverlay(imageUrl, bounds).addTo(map);
          map.fitBounds(bounds);

          var markerOptions = {
              radius: 10,
              weight: 2,
              opacity: 1,       // 邊界透明度
              fillOpacity: 0.6  // 填充透明度
          };

          var geoJsonLayer = L.geoJSON(" +
      myGeoJsonString +
      ", {
              pointToLayer: function (feature, latlng) {
                  return L.circleMarker(latlng, markerOptions);
              },
              style: function (feature) {
                  // 根據狀態設定顏色和透明度
                  switch (feature.properties.status) {
                      case 'Active': return {color: '#00FF00', fillOpacity: 0.5};  // 綠色,半透明
                      case 'Suspended': return {color: '#005AFF', fillOpacity: 0.5};  // 藍色,半透明
                      case 'Deactivated': return {color: '#FF0000', fillOpacity: 0.5};  // 紅色,半透明
                      default: return {color: '#000000', fillOpacity: 0.5};  // 默認黑色,半透明
                  }
              },
              onEachFeature: function (feature, layer) {
                  layer.bindTooltip(feature.properties.sss);  // 顯示 A1, A2, A3, A4
                  layer.on('click', function() {
                      ui.popupRecord(feature.properties.id);
                  });
              }
          }).addTo(map);

      }, 1000);
      </script>
      ")

      • szormpas
      • 2 mths ago
      • Reported - view

       Hi, I'm pleased it's working well for you now!

    • cyan_silver
    • 2 mths ago
    • Reported - view

    I have made a method to match each data. Is there a simple one? I have another question. If I want to use it offline on my iPad, is it feasible?

    • cyan_silver
    • 2 mths ago
    • Reported - view

    What should I do if the coordinates are placed directly in the X and Y fields in Accounts and each piece of data represents a point? thanks.

Content aside

  • 2 mths agoLast active
  • 5Replies
  • 125Views
  • 2 Following