Adding pre-defined static SVG to a Leaflet map doesn't work -

-

i need add control contains several pre-defined svg elements. display contours of regions off-shore europe. have different zoom levels. hovering on main country should highlight corresponding off-shore regions. clicking on 1 of them moves main map region. other this, no behaviour required.

the svg not render. class svg-control using l.control.extend:

    l.insets = l.control.extend({     options: {         position: 'bottomleft'     },      initialize: function () {         this._insets = {             "fr93":{translate: {x: 118, y:-485}, paths:["m-66 513l-76 531l-80 535l-89 533l-94 536l-99 533l-95 529l-93 521l-97 513l-98 504l-91 494l-81 498l-68 507l-66 512z"]},             "fr91_2":{translate: {x: 192, y:-353}, paths:["m-177 373l-178 370l-175 372l-177 373z", "m-179 375l-180 376l-180 371l-179 375z","m-173 394l-174 389l-170 393l-171 394z"]}         }     },      onadd: function (map) {         // create dom element , put 1 of map panes         this._container = l.domutil.create('div', 'wt-inset-pane');          (var id in this._insets) {             var inset = l.domutil.create("div", "inset", this._container);             inset.id = id;             var svg = l.domutil.create("svg", "", inset);             svg.setattribute("width", "100");             svg.setattribute("height", "100");             var g = l.domutil.create("g", "", svg);             (var i=0,l=this._insets[id].paths.length; < l; i++) {                 var path = l.domutil.create("path", "", g);                 path.setattribute("style", "transform: translate(" + this._insets[id].translate.x + "px, " + this._insets[id].translate.y + "px);");                 path.setattribute("stroke-linejoin", "round");                 path.setattribute("stroke-linecap", "round");                 path.setattribute("fill-rule", "evenodd");                 path.setattribute("stroke", "#808080");                 path.setattribute("stroke-opacity", "1");                 path.setattribute("stroke-width", "1");                 path.setattribute("fill", "#ffffff");                 path.setattribute("fill-opacity", "1");                 path.setattribute("d", this._insets[id].paths[i]);             }         }         return this._container;     } });  l.insets = function () {     return new l.insets(); };

i instantiate class using map.addcontrol(l.insets());

everything inserted corectly svg doesn't show.

your "g" need style "transform" ^^

l.insets = l.control.extend({            options: {  	position: 'bottomright'      },        initialize: function() {  	this._insets = {  	      	    // france  	      	    "fr93":{translate: {x: 118, y:-485}, paths:["m-66 513l-76 531l-80 535l-89 533l-94 536l-99 533l-95 529l-93 521l-97 513l-98 504l-91 494l-81 498l-68 507l-66 512z"]},  	    "fr91_2":{translate: {x: 192, y:-353}, paths:["m-177 373l-178 370l-175 372l-177 373z", "m-179 375l-180 376l-180 371l-179 375z","m-173 394l-174 389l-170 393l-171 394z"]},  	    "fr94":{translate:{x:-770, y:-979}, paths:["m790 1011l785 1009l786 1005l788 1005l791 1008l790 1011z"]},  	      	    // portugal  	      	    "pt20":{translate:{x:522,y:-443},paths:["m-440 484l-430 484l-434 487l-442 487l-446 483l-445 482l-440 484z","m-498 467l-500 468l-507 466l-507 464l-504 463l-496 467l-498 467z","m-474 460l-478 460l-481 457l-475 457l-473 459l-474 460z","m-492 462l-490 463l-497 461l-502 457l-494 460z","m-511 464l-514 461l-510 461l-510 464z"]},  	    "pt30":{translate:{x:262,y:-595},paths:["m-242 628l-246 628l-251 624l-249 622l-246 624l-243 623l-239 625l-239 627l-241 628z"]},  	      	    // espagne  	      	    "es70":{translate:{x:641,y:-960},paths:["m-612 995l-616 991l-607 988l-607 990l-611 994z","m-586 995l-588 995l-585 993l-583 987l-581 986l-581 993l-586 995z","m-601 999l-603 996l-602 994l-599 994l-599 998z","m-579 984l-581 985l-576 980l-576 982l-579 984z","m-626 989l-628 986l-627 985l-625 988l-626 989z","m-618 994l-619 996l-620 993l-618 994z","m-627 1000l-630 999l-627 998l-627 1000z"]}  	      	}      },        onadd: function (map) {  	      	this._container = l.domutil.create('div', 'leaflet-insets');  	    	    	      	var xhtml = '';    	for (var id in this._insets) {    	    var pathx = this._insets[id].translate.x;  	    var pathy = this._insets[id].translate.y;    	    xhtml += '<div id="'+id+'" class="inset">';  	    xhtml += '<svg>';  	    xhtml += '<g style="transform: translate('+pathx+'px,'+pathy+'px)">';    	    (var i=0,l=this._insets[id].paths.length; < l; i++) {  		xhtml += '<path d="'+ this._insets[id].paths[i] +'" ';  		xhtml += ' class="leaflet-clickable" ';  		xhtml += ' fill-opacity="1" ';  		xhtml += ' fill="#ffffff" ';  		xhtml += ' stroke-width="1" ';  		xhtml += ' stroke-opacity="1" ';  		xhtml += ' stroke="#808080" ';  		xhtml += ' fill-rule="evenodd" ';  		xhtml += ' stroke-linecap="round" ';  		xhtml += ' stroke-linejoin="round" ';  		xhtml += '/>';  	    }    	    xhtml += '</g></svg></div>';  	}    	this._container.innerhtml = xhtml;    	return this._container;      }  });    l.insets = function () {      return new l.insets();  };


Comments

Post a Comment

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

-
i getting error message , further 1 here: failed read artifact descriptor org.apache.maven.plugins:maven-install-plugin:jar:2.4: even though when go .m2 repository path c:\users\a591024.m2\repository\org\apache\maven\plugins\maven-resources-plugin\2.4 the maven-resources-plugin-2.4.jar file there , maven-resources-plugin-2.4.pom there. have tried delete .m2 repository no luck. far maven not build project desperately need to. any ideas? it seems proxy issue please aad following in setting.xml grabbing lan setting , proxy information. <proxies> <proxy> <id>proxy</id> <active>true</active> <protocol>http</protocol> <host>hostname</host> <port>port</port> </proxy> </proxies> this frequent issue, please see below link well. plugin org.apache.maven.plugins:maven-clean-plugin:2.5 or 1 of dependencies not resolved maven: failed ret...
Read more

Round ImageView Android -

-
Image
i working on android application in doing rounded image view. working fine images, images 160x120 resolution shows oval shaped. code custom imageview given below, please me out here: public class roundimage extends drawable { private final bitmap mbitmap; private final paint mpaint; private final rectf mrectf; private final int mbitmapwidth; private final int mbitmapheight; public roundimage(bitmap bitmap) { mbitmap = bitmap; mrectf = new rectf(); mpaint = new paint(); mpaint.setantialias(true); mpaint.setdither(true); final bitmapshader shader = new bitmapshader(bitmap, shader.tilemode.clamp, shader.tilemode.clamp); mpaint.setshader(shader); mbitmapwidth = mbitmap.getwidth(); mbitmapheight = mbitmap.getheight(); } @override public void draw(canvas canvas) { canvas.drawoval(mrectf, mpaint); } @override protected void onboundschange(rect bound...
Read more

How can I utilize Yahoo Weather API in android -

-
Image
i want develop app using yahoo weather api android. want current , forecast weather details. i have tried different sources (e.g.: https://github.com/survivingwithandroid/weatherlib , getting error weatherlib api android , unable execute activity in android weatherlib ) , getting different errors m unable resplve. there can proper tutorial or guide! error: -17 08:50:48.961 3168-3168/com.survivingwithandroid.weather e/androidruntime﹕ fatal exception: main process: com.survivingwithandroid.weather, pid: 3168 java.lang.runtimeexception: unable start activity componentinfo{com.survivingwithandroid.weather/com.survivingwithandroid.weather.mainactivity}: java.lang.nullpointerexception: attempt invoke interface method 'boolean java.util.list.isempty()' on null object reference @ android.app.activitythread.performlaunchactivity(activitythread.java:2298) @ android.app.activitythread.handlelaunchactivity(activitythread.java:2360) @ android.app.activi...
Read more