1

I am going through the Leaflet Tips and Tricks book and I can get the below example from the book working easily on bl.ocks.org:

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <link 
        rel="stylesheet" 
        href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
    />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script
        src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
    </script>

    <script>
        var map = L.map('map').setView([51.505431, -0.023533], 14);
        mapLink = 
            '<a href="http://openstreetmap.org">OpenStreetMap</a>';
        L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
            }).addTo(map);
    </script>
</body>
</html>

However, I need some guidance on converting this to work in a Visualforce page.

The below is not working for me:

<apex:page >
    <apex:stylesheet value="//cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
    <apex:includescript value="//http://cdn.leafletjs.com/leaflet-0.7/leaflet.js" />

    <div id="map" style="width: 600px; height: 400px"></div>
    <head>
    <script>
    var map = L.map('map').setView([-41.2858, 174.78682], 14);
    mapLink = 
        '<a href="http://openstreetmap.org">OpenStreetMap</a>';
    L.tileLayer(
        'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; ' + mapLink + ' Contributors',
            maxZoom: 18,
        }).addTo(map);
    </script>
    </head>
</apex:page>

Can someone advise how I can use leaflet.js in a Visualforce page like this?

EDIT:

As per tip by Rahul Sharma, in the Chrome console log, I can see four errors:

enter image description here

  • Do you see any JavaScript errors in developer tools/console – Raul Apr 6 '17 at 17:40
  • Thanks - I added the errors. I am unsure why I am getting those errors if it works as a .html file (the first version). – Andy Hitchings Apr 6 '17 at 17:47
5

First things first, you'll want to use a HTTPS CDN versus a normal HTTP. Just replacing the two URLs with some cloudflare ones I found with some google fu get the example working.

<apex:page >
    <apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css" />
    <apex:includescript value="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js" />

    <div id="map" style="width: 600px; height: 400px"></div>
    <head>
        <script>
            var map = L.map('map').setView([-41.2858, 174.78682], 14);
            mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: '&copy; ' + mapLink + ' Contributors', maxZoom: 18,}).addTo(map);
        </script>
    </head>
</apex:page>

However, I highly recommend taking the resources from the CDN and turning them into a Static Resource, which is the recommended way to use a third-party javascript library with Salesforce.

Recommended Reading:

Creating a Static Resource

Referencing a Static Resource in Visualforce

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.