Get started with maphilight CDN

MIT licensed

Maphilight: library, custom infowindows on Google Maps hovered areas.

Tags:
  • map
  • imagemap
  • hilight
  • highlight
  • jquery-plugin
  • ecosystem:jquery

Stable version

Copied!

How to start using maphilight CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with maphilight CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
    <script src="https://cdn.cdnhub.io/maphilight/1.4.2/jquery.maphilight.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #mapid { height: 400px; width: 100%; }
    </style>
</head>
<body>
    <div id="mapid"></div>
    <script>
        $(document).ready(function() {
            var map = L.map('mapid').setView([51.505, -0.09], 13);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 19
            }).addTo(map);

            $('.marker').maphilight({stroke: false});

            L.marker([51.5, -0.09], {draggable: false, icon: L.icon({iconUrl: 'marker.png', iconSize: [32, 32]})})
                .addTo(map)
                .bindPopup('A beautiful marker')
                .on('mouseover', function() {
                    $('.marker').maphilight('off');
                    $(this).maphilight('on');
                });
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions