3

I hope to be able to display the coordinates on the map when the mouse moves, not to use marker. But my code can't run successfully.

This is my code:

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>

<div id="map" style="height: 100%; border: 1px solid #AAA;"></div>

<script>
    L.CursorHandler = L.Handler.extend({

        addHooks: function () {
            this._popup = new L.Popup();
            this._map.on('mouseover', this._open, this);
            this._map.on('mousemove', this._update, this);
            this._map.on('mouseout', this._close, this);
        },

        removeHooks: function () {
            this._map.off('mouseover', this._open, this);
            this._map.off('mousemove', this._update, this);
            this._map.off('mouseout', this._close, this);
        },

        _open: function (e) {
            this._update(e);
            this._popup.openOn(this._map);
        },

        _close: function () {
            this._map.closePopup(this._popup);
        },

        _update: function (e) {
            this._popup.setLatLng(e.latlng)
                .setContent(e.latlng.toString());
        }


    });

    L.Map.addInitHook('addHandler', 'cursor', L.CursorHandler);

    var map = new L.Map('leaflet', {
        center: [0, 0],
        zoom: 0,
        cursor: true,
        layers: [
            new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                'attribution': 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            })
        ]
    });

    /*
    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 20, attribution: osmAttrib });
    var map = L.map('map').setView([24.151687694799833, 120.64116954803465], 15).addLayer(osm);
    */

    $.getJSON("https://sta.ci.taiwan.gov.tw/STA_Rain/v1.0/Things?$expand=Locations&$select=name,properties&$count=true", function (data) {

        var markerGroup = L.featureGroup();
        data.value.forEach(function (itemData, itemInd) {
            var latLng = L.latLng(itemData.Locations[0].location.coordinates[1],
                itemData.Locations[0].location.coordinates[0]);
            var myMarker = L.marker(latLng).addTo(markerGroup);

            var popupContent = '<b>Name<b>: ' + itemData.name +
                '<br /></b>stationID: ' + itemData.properties.stationID +
                '<br /><b>latlng: ' + itemData.Locations[0].location.coordinates[1] +
                ',' + itemData.Locations[0].location.coordinates[0] +
                '<br /></b>Attribute: ' + itemData.properties.Attribute;

            map.addLayer(markers);

            myMarker.bindPopup(popupContent);

        });

        markerGroup.addTo(map);
        map.fitBounds(markerGroup.getBounds());

    });

</script>
</body>

  • Just FYI your code worked for me (after mixing minor syntax errors, e.g. map.addLayer(markerGroup instead of markers) and the coordinates are showing correctly (dynamically). – 15Step Aug 8 at 18:51
  • Sorry,I don't know what you mean. – wei shiuan Aug 9 at 2:09
1

When custom handler is defined and hooked to map class, it is not enabled by default. To start working, it has to be activated after map creation by enable() method (see https://leafletjs.com/reference-1.5.0.html#handler).

So what's missing in your case is simple handler activation statement after map creation:

map.cursor.enable();
  • Where can I put this code, because I try many time and the map didn't show. – wei shiuan Aug 9 at 2:11
  • As I wrote, right after your map definition statement var map = new L.Map('leaflet', { .... I tried it and it worked for me with your handler definition. – TomazicM Aug 9 at 5:23
  • But I put it in where you say , but it didn't run. – wei shiuan Aug 9 at 8:32
  • Are you getting any errors in the console? – TomazicM Aug 9 at 8:41
  • And one more thing: what is line map.addLayer(markers); supposed to do? There is no layer markers and why you want to add this layer to map at every iteration through features? – TomazicM Aug 9 at 8:52

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.