Code Samples: free-map

Friday, December 30, 2022

Free Map Integration - Leaflet.js with OpenStreetMap tiles - Display multiple point locations as map markers - Plot multiple points on Map view - Display multiple point locations as map markers

Here is the documantation https://leafletjs.com/examples/quick-start/





Code snippet (Download full code from here):


<script src="//code.jquery.com/jquery-3.6.1.min.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>

<!-- https://leafletjs.com -->

<div id="leaflet-js-map"></div>
<div>
    <button id="moveToPoint">Move to specific point</button>
</div>
<script type="text/javascript">
    const map = L.map('leaflet-js-map').setView([46.241226, 6.051737], 14);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        minZoom: 0,
        maxZoom: 18,
        attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
    }).addTo(map);
    const leafletMarkers = L.layerGroup([
        new L.marker([46.233226, 6.055737]),
        new L.marker([46.2278, 6.0510]),
        new L.marker([46.23336, 6.0471])
    ]);
    leafletMarkers.addTo(map);

    var LeafIcon = L.Icon.extend({
        options: {
            shadowUrl: 'images/leaf-shadow.png',
            iconSize:     [38, 95],
            shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
            shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
        }
    });
    var greenIcon = new LeafIcon({iconUrl: 'images/leaf-green.png'}),
        redIcon = new LeafIcon({iconUrl: 'images/leaf-red.png'}),
        orangeIcon = new LeafIcon({iconUrl: 'images/leaf-orange.png'});
    L.icon = function (options) {
        return new L.Icon(options);
    };
    L.marker([46.234226, 6.055737], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
    L.marker([46.237226, 6.052737], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
    L.marker([46.240226, 6.065737], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");


    [{T: 46.249226, N: 6.056937, D: '1'}, {T: 46.250226, N: 6.066937, D: '2'}].forEach(function (t) {
        const el = document.createElement('div');
        L.marker([t.T, t.N]).addTo(map).on("click", function () {
            console.log(this);
            var popup = L.popup()
                .setLatLng(this._latlng)
                .setContent('<p>Hello world!<br />This is a nice popup-' + t.D + '</p>')
                .openOn(map);
        })
    });

    $("#moveToPoint").on("click", function () {
        map.flyTo(L.latLng(46.249226, 6.056937), 15);

        const popUps = document.getElementsByClassName('leaflet-popup');
        if (popUps[0]) popUps[0].remove();

        L.popup()
            .setLatLng(L.latLng(46.250226, 6.056937))
            .setContent('<p>Hello world!<br />This is a nice popup-Self</p>')
            .openOn(map);
    });
</script>
<style type="text/css">
    #leaflet-js-map {
        width: 100%;
        height: 500px;
    }
</style>



Output is as below:

Pages

Friday, December 30, 2022

Free Map Integration - Leaflet.js with OpenStreetMap tiles - Display multiple point locations as map markers - Plot multiple points on Map view - Display multiple point locations as map markers