CODEWITHSUNDEEP
javascripthtml
alter16
alter16

Reputation: 23

how can i have a url hyperlink?

How can i have the url link to a website and not just show as unlinked text? I have pasted the json below and the on click script below that! I have info i want to show up on click and i want the info "description" to be a live link. I'm a beginner, sorry about the syntax :/

json:
{
  "features": [

    {
      "type": "Feature",
      "properties": {
        "title": "Simply Pure",
        "description": "simplypure.com"
      },
      "geometry": {
        "coordinates": [-105.0113291,39.7619213,0],
        "type": "Point"
      }
    },

  ],
  "type": "FeatureCollection"
}

and this is the script:

<script>
     

      map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ['test-two'] // replace this with the name of the layer
        });

        if (!features.length) {
          return;
        }

        var feature = features[0];

        var popup = new mapboxgl.Popup({ offset: [0, -15] })
          .setLngLat(feature.geometry.coordinates)
          .setHTML(
            '<h3>' +
              feature.properties.title +
              '</h3><p>' +
              feature.properties.description +
              '</p>'
          )
          .setLngLat(feature.geometry.coordinates)
          .addTo(map);


      });
    </script>

Upvotes: 0

Views: 67

Answers (1)

Halmon
Halmon

Reputation: 1077

You need to use the HTML <a> tag to create a hyperlink. Learn more about the a tag here.

<script>
     

      map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, {
          layers: ['test-two'] // replace this with the name of the layer
        });

        if (!features.length) {
          return;
        }

        var feature = features[0];

        var popup = new mapboxgl.Popup({ offset: [0, -15] })
          .setLngLat(feature.geometry.coordinates)
          .setHTML(
            '<h3>' +
              feature.properties.title +
              '</h3><a href="' + feature.properties.description + '">' +
              feature.properties.description +
              '</a>'
          )
          .setLngLat(feature.geometry.coordinates)
          .addTo(map);


      });
    </script>

Upvotes: 1

Related Questions