Displaying a Picture in a Leaflet Popup

I'm having trouble displaying a weather icon in a map marker using wunderground's api, Leaflet and Cloudmade. Although I can get the text to appear along with the image URL stored in a variable, I'm unable to make it show up. Below is the code I have been working on:

jQuery(document).ready(function($) {
    $.ajax({
          url: "http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:KCASANFR128.json",
          dataType: "jsonp",
          success: function(parsed_json) {
              var location = parsed_json['current_observation']['observation_location']['city'];
              var temp_f = parsed_json['current_observation']['temp_f'];
              var icon = parsed_json['current_observation']['icon_url'];
              marker1.bindPopup("Current temperature in " +location+ " is: " + temp_f).openPopup();
        }
    });
});

I attempted the following without any luck:

marker1.bindPopup( <img src=icon> "Current temperature in " +location+ " is: " + temp_f).openPopup();

Do you have any suggestions or tips?

javascriptajaxjsonleaflet

Answer №1

To utilize the marker's bindPopup method effectively, ensure that your HTML content is enclosed within quotes. For example: 

marker1.bindPopup( "<img src=" + icon_url + "/> Current temperature in " + location + " is: " + temp_f)

This approach should be suitable for your needs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the Ionic loading spinner until the data is fully loaded

Currently, I am developing an application using the Ionic framework. My goal is to display a loading spinner until all the data is retrieved from an API. In the Controller.js file: .controller('PrayersCtrl', function($scope, Prayers, $ionicLoad ...

javascriptangularjsionic-framework

Updating the information with ajax when clicking on a taxonomy category from a dropdown menu

I am trying to modify the content under a dropdown menu featuring Wordpress Taxonomy categories. The content includes a scrollable area displaying posts related to the selected category, as shown in the image. I want to update this content using Ajax upo ...

ajax

Having trouble importing a variable from a precompiled library in TypeScript JavaScript

Here is the content of my package.json file: { "name": "deep-playground-prototype", "version": "2016.3.10", "description": "", "private": true, "scripts": { "clean": "rimraf dist", "start": "npm run serve-watch", "prep": "browserify ...

javascripttypescriptd3.js

Getting data from an Ajax call

I am struggling to find a solution for retrieving data from a processing script into a Request page using Ajax and PHP. The issue I am facing is shown in the error message below: SyntaxError: JSON.parse: unexpected character at line 1 column 13 of the J ...

javascriptphpjqueryjsonajax

Is it possible for a controller within a directive in AngularJS to define the ng-model of the directive itself?

Having a directive that utilizes ng-model controller and fetches its model value from the parent controller, "myController", I am seeking guidance on how to enable the consumer to dynamically set the ngModel value as they desire. The directive is designed ...

javascriptweb-applicationsangularjsangularjs-directive

Upon employing the setTimeout method, the element with the id "sign-in-block" will have its display style set to "none" after a delay of 1000 milliseconds

I incorporated the setTimeout() function to make the HTML component appear for 1 second upon pageload. However, I would prefer this component not to load at all. Should I set the delay in the setTimeout() function to 0ms? Alternatively, is there another ...

javascript

Integrate PHP include files into a website without allowing direct access, then dynamically load them using jQuery AJAX

I am utilizing jQuery AJAX to load the content of about.php page into my index.php section in this manner: $('.nav a[href="#about"]').on('click', function() { $('main').load('../../layout/about.php'); }); The iss ...

javascriptphpjqueryajaxsecurity

How do I send JSON values through a POST request in an iOS

Is there a way to send JSON values using a RESTful API through a POST request? Below is an example of an API endpoint: http://our.api.com/Search?term=pumas&filters={"productType":["Clothing","Bags"],"color":["Black","Red"]} I am looking to post simi ...

iosjson

Continue moving the division to the left

Below is the HTML structure that I am working with: <div class="container"> <div class="menu"></div> </div> Accompanied by jQuery: $(document).ready(function() { $(".container").click(function() { $(".menu").css("l ...

javascriptjqueryhtmlcssjquery-animate

The constantly persisted caching issue persistently plagues the index method that specifically caters to

I have a Ruby on Rails website and I am facing an issue with caching the JSON data. In my DefinitionsController, I have set up a cache for the index action using the caches_page method. The index action responds to json format and renders the @something va ...

ruby-on-rails-3jsoncachingpassenger

Generating a Random Number Within a Specified Range

function generateRandomNumberBetween(start, stop) { var low = Math.ceil(low); var high = Math.floor(high); return Math.floor(Math.random() * (high - low + 1)) + min; } function testRandomNumberGeneration() { var start = parseInt(prompt("Enter low ...

javascript

Arranging JSON object by its values

How can I sort a JSON object based on date? json = {"date_hash":{"second_bleed":"2014-09-08","sixth_boost":"2014-10-28","first_boost":"2014-06-24","first_bleed":"2014-08-08","fifth_boost":"2014-09-30","fourth_bleed":"2014-11-03","second_boost":"2014-07-15 ...

javascriptjqueryruby-on-railsajaxjson

When utilizing Passport + Express authentication, no cookies are saved in the browser

Currently, I am in the process of developing a web API and the workflow should go like this: User logs in to the website --> Passport authenticates the user --> Passport stores relevant user information in a persistent session --> User can access ...

javascriptapiexpresscookiespassport.js

Include chosen select option in Jquery form submission

Facing some challenges with a section of my code. Essentially, new elements are dynamically added to the page using .html() and ajax response. You can see an example of the added elements in the code. Since the elements were inserted into the page using . ...

javascriptjqueryhtmlajaxforms

Dealing with a syntax error in JavaScript (Codecademy)

I have been working my way through the JavaScript course on Codeacademy and for the most part, I've been able to figure things out on my own. However, I've hit a roadblock with my code and can't seem to get it right. Here is the code I&apos ...

javascriptjqueryhtmlsyntax-error

Converting JSON to CSV in Python can be inefficient when processing each line individually

My JSON file is quite large, tens of GB in size. I tried reading the file line by line, but it's slow, only processing about 10M per minute. Can someone help me optimize the code for faster performance? Here is the initial code: import pandas as pd ...

pythonjsonpandascsvblock

Is there a way to retrieve the HTTP status code when making a request using NSURLConnection or similar methods?

Seeking advice on making synchronous or Ajax-like calls to a server using NSURLConnection in iOS. I am particularly interested in accessing the status code of a response. Any suggestions for sample code or tutorials would be greatly appreciated. Currentl ...

iphoneiosjsonipadhttp-status-codes

Retrieving a function from a JavaScript file located in a publicly accessible directory

Having trouble accessing a function from the JS file scripts.js within the public folder where my CSS file is also located. Despite following various tutorials like this, I keep encountering the error message Error: Cannot find module './scripts.js&ap ...

javascriptnode.jsexpress

Extract Information from a Website

Is there a way to extract data from another website using JavaScript and save it into a .TXT or possibly an XML file? If JavaScript is not the best solution, I am open to other suggestions. I am specifically interested in extracting the price and item na ...

javascripthtmlajaxtextweb-scraping

transmit FormData containing two files and a text message to the controller

I have encountered an issue while trying to send a FormData object containing text fields, an image file, and a PDF file to an action in the controller. Despite my efforts, the form data is not being sent to the action. I have checked for errors through br ...

javascriptc#ajaxasp.net-coremultipartform-data