Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to create a jsfiddle using leaflet

I am struggling with jsfiddle trying to create a running example which uses leaflet.

because I was not successful I searched for some examples and found the following one working:

  • http://jsfiddle.net/kedar2a/LnzN2/2/

I then copied the example in a new fiddle

  • https://jsfiddle.net/aLn3ut5z/1/

but it is still not working...

when inserting the external resources, there was the following error:

jsfiddle.net says:

You're loading resources over HTTP not HTTPS, your fiddle will not work. Do you wish to continue?

any suggestions what is wrong here?

p.s.: below is the code of the jsfiddle windows:

HTML:

<div id="map"></div>

CSS:

#map {
    height: 500px;
    width: 80%;
}

JAVASCRIPT:

// We’ll add a tile layer to add to our map, in this case it’s a OSM tile layer.
// Creating a tile layer usually involves setting the URL template for the tile images
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      osm = L.tileLayer(osmUrl, {
        maxZoom: 18,
        attribution: osmAttrib
      });
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map').setView([19.04469, 72.9258], 12).addLayer(osm);

// Script for adding marker on map click
function onMapClick(e) {
var marker = L.marker(e.latlng, {
    draggable: true,
    title: "Resource location",
    alt: "Resource Location",
    riseOnHover: true
    }).addTo(map)
    .bindPopup(e.latlng.toString()).openPopup();

    // Update marker on changing it's position
    marker.on("dragend", function(ev) {

    var chagedPos = ev.target.getLatLng();
    this.bindPopup(chagedPos.toString()).openPopup();

    });
    }
    map.on('click', onMapClick);
like image 753
udo Avatar asked May 01 '26 19:05

udo


1 Answers

The Leaflet CDN doesn't support SSL yet. You can use something not requiring https, like playground-leaflet which is just a fork of JSBin with leaflet libraries easily selectable.

Alternatively, you could use Leaflet from cdnjs.net, which does support https.

like image 82
Jieter Avatar answered May 03 '26 22:05

Jieter



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!