[GIS] Leaflet Polyline with custom fill pattern

leafletlineroadsvg

I'm drawing Lines with leaflet.js an have to create custom styled polylines.
So i got various image files which should be like a repeated background image in HTML.
So is it possible to give a drawn L.polyline a Custom background image (texture)?

I know SVG has Support for that but is It also possible via leaflet API?

<defs>
    <pattern id="bad" patternUnits="userSpaceOnUse" x="0" y="0"
     width="10" height="10" viewBox="0 0 10 10" >
        <image x="0" y="0" width="10px" height="10px"
         xlink:href="img/non-sprite/grade_0.png" />
    </pattern>

<defs>

And tried to use the pattern by assign its ID as color/fill without any luck.

L.circle(lat, lng, 200, {fill : 'url(#best)'}).addTo(map);

The circle is shown on map but only in color 0033ff (Leaflet default line color)

Best Answer

This seems to potentially answer your question: https://github.com/bbecquet/Leaflet.PolylineDecorator

I can't' comment on the appropriateness of the method... seems like a lot of code for a simple problem.

Related Solutions

[GIS] Add custom variables to leaflet polyline

building from this answer, you can extend L.Polyline to include any number of variables as options

customPolyline = L.Polyline.extend({
    options: {
        // default values, you can override these when constructing a new customPolyline
        speed: '25',
        bearing: '140'
    }
});

now create your polylines, and add to the map:

latlngs = [<?php for ($i=0;$i<count($latts);$i++){echo '['. $latts[$i] .', '. $longs[$i];  
var polyline = new customPolyline(latlngs,{
    color: 'red',  
    speed: '143',
    bearing: '38'
});

polyline.on('click', function() { 
    alert(this.options.speed) 
});

polyline.addTo(map);

See this fiddle for a complete example with polyline

UPDATE

Following up on your comment, you can also attach custom data to L.markers, as shown below and in this fiddle:

customMarker = L.Marker.extend({
   options: { 
      speed: '111',
      bearing: '111'
   }
});

for (var i = 0, len = latlngs.length; i < len; i++) {
    var m = new customMarker(latlngs[i], {
        // get the actual speed for this lat-long
        // if speeds are in an array in the same exact order as the lat-longs
        // it could be as easy as speed: speed[i]
        speed: '123'
    });
    m.on('click', function() {
        alert(this.options.speed)
    })
    m.addTo(map);
}

var polyline = L.polyline(latlngs,{});
polyline.addTo(map);

I don't know how your speed data are associated with each point. But assuming you can get a javascript array or object of lat-longs and speeds, you just need to edit the marker loop, above, to add the speed to each marker when it is constructed.

[GIS] leaflet GeoJson vs polyline

The L.GeoJSON layer group is just a Feature Group with extra methods specific for vector layers.

It provides a convenient conversion from a GeoJSON data object into a layer group made of Leaflet vector shapes converted from the GeoJSON data. In particular, a LineString is converted into an L.Polyline.

So your L.GeoJSON group is in the end just a container for your Polylines.

Therefore you can directly add and remove child layers like with a normal group (addLayer and removeLayer methods). You can add and remove child Polylines, whether built automatically at construction from the GeoJSON object, or added later on through addLayer (or even through addData).

If you want to shorten / extend a Polyline (through spliceLatLngs and addLatLng methods), of course you can also do it, provided that you get the direct reference to your Polyline.

Best Answer

Related Solutions

[GIS] Add custom variables to leaflet polyline

[GIS] leaflet GeoJson vs polyline

Related Question