javascript - How to clip a Leaflet geoJSON layer using svg <clipPath> -


according the official tutorial, can load , show polygons local geojson file now. i'm planning on clipping newly created svg layer using custom outline path. started circle child of clippath created through leaflet's l.circle avoid coordinate projection.the main code based on official example follows:

// create circle outline var clipcircle = new l.circle([34.5, -95.5], {radius: 300000, classname: 'outline'}).addto(map); // create <defs> , <clippath> elements using jquery $('svg').prepend('<defs><clippath id="myclip"></clippath></defs>'); // move <path> element of clipcircle <g> <clippath> $('path.outline').appendto('#myclip'); // add css clip-path attribute svg groups $('g').css('clip-path', 'url(#myclip)'); // load , show polygons geojson var geojson = l.geojson(statesdata, {         style: style,         oneachfeature: oneachfeature     }).addto(map); map.fitbounds(geojson.getbounds()); 

the code works expected clippath not working. area inner circle expected shown, polygons except circle still shown on page, illustrated following images:

add circle without moving


Comments

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -