简体   繁体   中英

marker symbols for leaflet_Ajax, looking always for default marker in js/images/marker-icon.png

I am new to leaflet but have developed some interactive maps in the past. I started working on displaying a gps device on a UAV. The UAV sends the location information on a server and has a php code that returns some sensor values upon relevant request (in geojson format, so I dont have to do much... phew). I was looking for some solutions for how to do it seamlessly using Ajax when i came across leaflet_Ajax. . I had a lot of issues which were mostly resolved by some questions on stackoverflow for example this one and a few others.

Now here is how i am writing my code for the markers for the points:

var geojsonLayer = new L.GeoJSON.AJAX("myserver/get_geoj.php?stype=particle&sval[min]=2&sval[max]=26",{pointToLayer: redmarkers, onEachFeature: popUp});
function popUp(feature, layer) {
    layer.bindPopup(feature.properties.sensor_v);
},

I have another function redmarkers that returns red colored circle markers. What happens is that finally it is loading the data from the server... phewh.... but it does not bind the popup or the markers to this layer. It looks for the (I guess some) default marker images in the js/images/marker-icon.png as marker symbol. This doesnot exist and so it gives me an error. But if i take any random image and call it marker-icon.png and put it in the desired location it shows that image on the map but still does not bind the popup.

What am i doing wrong. As i am new to stack overflow as well if you need more information or if i am not asking the question right please let me know.

Okay So I resolved it, but thought that somebody else might do similar mistakes later and I should answer this question.

I had accidentally edited my leaflet.js file somehow. I dont remember doing that though. I deleted the dummy image that I had put in the js/images folder for marker-icon.png and it was still showing the same marker. The i realized it had cached it so i disabled chache, only to realize in the console that the error had something to do with leaflet.js. I updated the version of leaflet.js (had a backup copy on my disk, so the same version didnt update or something), and it works fine now. Here is my current code

var geojsonLayer = new L.GeoJSON.AJAX(dataurl,{ 
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, redRegionStyle);
        },
        onEachFeature: onfeature
    });

function onfeature(feature, layer)
    {
        layer.on(
        {
            mouseover: highlightFeature,
            mouseout: resetHighlight
        });
        layer.bindPopup(feature.properties.sensor_v.toString());
    }

It works perfectly highlights the features as i like and also has the popup bind to the features.

Sorry to all those who i bothered by asking this question as it was my own sily mistake

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM