World map (maps.json)


Property Map (hotel.json)


Injection HTML/JS example

There are a few ways to do this. You could initialize a popup box with a standard div, and then substitute content with jQuery AJAX calls if someone clicks inside that popup.

Or, create general or specific methods inside the "popupopen" event handler that occurs every time a popup opens.

Inside this, you could load other scripts dynamically as you suggested, or change HTML inside the current popup.

                mymap.on('popupopen', function() { 
                    console.log(this._popup._content); // This prints out all the current popup's content
                    // Could do to every popup, or just to specific ones
                    if(this._popup._content.indexOf('Giant Buddha, Po Lin Monastery and Ngong Ping Village')>0) {
                        $(this._popup._contentNode).html('This was loaded on marker click. Scripts could also be loaded.');
                    $.getScript("my_lovely_script.js", function(){
                        // Do custom script stuff

You can see the dynamic HTML change in content above, on the farthest left Attraction marker. It changes content when clicked.

Changing Markers

Leaflet Custom Icons

Upload an image file to a directory of the project, then, where the code loads a marker (search for "L.marker"), do the following:

  1. Create new icon using this syntax. You don't have to include everything, but you need an iconUrl and an iconSize. iconAnchor will help ensure the marker anchors to the correct position.
  2. Add icon to marker by adding "{icon: myNewIcon}" to the marker options. For example:

                  var marker = L.marker([parseFloat(element.latitude), parseFloat(element.longitude)]).bindPopup();


                  var marker = L.marker([parseFloat(element.latitude), parseFloat(element.longitude)], {icon: myNewIcon}).bindPopup();