0

I am new to to Leaflet. I am drawing polylines on map but markers are pinned automatically (unwanted). Please suggest me that how can avoid auto-creation of marker (<img ...>)

I was using chrome-Javascript debugger to find root-cause & I observed that when .addTo(map) is getting triggered, leaflet.js is placing markers by calling _initIcon()

My function

which is drawing Polyline on map

function Leaflet_Overpass(map,osmDataAsXml,filterpane)
    {    
            var resultAsGeojson = osmtogeojson(osmDataAsXml);             
            var resultLayer = L.geoJson(resultAsGeojson, 
                    {
                        pane: filterpane,
                        style: function (feature) 
                        {
                            switch(filterpane)
                            {
                            case 'entity1': return {color: "#0000ff", "weight": 10, "opacity": 0.8};break;
                            case 'entity2': return {color: "#ff0000", "weight": 7, "opacity": 0.7};break;
                            }

                        },
                        filter: function (feature, layer) 
                        {
                            var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === "Polygon");
                            if (isPolygon) 
                            {
                                feature.geometry.type = "Point";
                                var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter();
                                feature.geometry.coordinates = [ polygonCenter.lat, polygonCenter.lng ];
                            }
                            return true;
                        },
                        onEachFeature: function (feature, layer) 
                        {                               
                            var popupContent = "<h2>"+ feature.properties.tags.name + "</h2><a href=\"https://www.openstreetmap.org/way/" + feature.properties.id +"\">"+feature.properties.type + " : "+feature.properties.id+"</a>";                                             
                            layer.bindPopup(popupContent);                              
                        }
                    }).addTo(map); 
            return;
    }

Leflet.js Code

which is placing marker

_initIcon: function() {
            var t = this.options
              , i = "leaflet-zoom-" + (this._zoomAnimated ? "animated" : "hide")
              , e = t.icon.createIcon(this._icon)
              , n = !1;
            e !== this._icon && (this._icon && this._removeIcon(),
            n = !0,
            t.title && (e.title = t.title),
            "IMG" === e.tagName && (e.alt = t.alt || "")),
            pt(e, i),
            t.keyboard && (e.tabIndex = "0"),
            this._icon = e,
            t.riseOnHover && this.on({
                mouseover: this._bringToFront,
                mouseout: this._resetZIndex
            });
            var o = t.icon.createShadow(this._shadow)
              , s = !1;
            o !== this._shadow && (this._removeShadow(),
            s = !0),
            o && (pt(o, i),
            o.alt = ""),
            this._shadow = o,
            t.opacity < 1 && this._updateOpacity(),
            n && this.getPane().appendChild(this._icon),
            this._initInteraction(),
            o && s && this.getPane("shadowPane").appendChild(this._shadow)
        },
  • Does the GeoJSON from Overpass contain points, polylines, polygons, or a combination of those? What happens if you feed some GeoJSON with just polylines? – IvanSanchez Sep 27 '18 at 8:11
  • my dataflow is Overpass provides *.osm(xml) file >> converst osm file to Geojson thru javascript >> leaflet.js renders polyline / gorup of polylines thru above function – Amit Panasara Sep 27 '18 at 8:14
  • Once again: Does that GeoJSON have point geometries in it? – IvanSanchez Sep 27 '18 at 8:48
  • type: "FeatureCollection" – Amit Panasara Sep 27 '18 at 8:55
  • GeoJSON file outline... features: Array(3) 0: {type: "Feature", id: "way/29145251", properties: {…}, geometry: {…}} 1: {type: "Feature", id: "node/320607347", properties: {…}, geometry: {…}} 2: {type: "Feature", id: "node/320607391", properties: {…}, geometry: {…}} length: 3 __proto__: Array(0) type: "FeatureCollection" – Amit Panasara Sep 27 '18 at 8:58
0

I found solution thru StackExchange : By default, Leaflet assigns marker to layers, hence if we want to avoid marker in markerpane-div, then we should declare

dummy icon-marker with 0size in pointToLayer

.

Solution

function Leaflet_Overpass(map,osmDataAsXml,filterpane)
{    
        .....
        var smallIcon = new L.Icon({
            iconUrl: 'dummy',
            iconRetinaUrl: 'dummy',
            iconSize:    [0.00, 0.00],
            iconAnchor:  [0, 0],
            popupAnchor: [1, -34],
            shadowSize:  [0, 0]
        });

        var resultLayer = L.geoJson(resultAsGeojson, 
                {
                    ...,
                    pointToLayer:function (feature, latlng) 
                    {
                        return L.marker(latlng, {icon: smallIcon});
                    },
                    ...
                 }).addTo(map); 
        return;
}

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.