javascript - Embedded tweet in a Mapbox popup -


i have issue embedding tweet in popup. i'm using mapbox gl js , twitter widget style popup content. placed widget in click function so:

    // when click event occurs on feature in places layer, open popup @      // location of feature, description html properties.      map.on('click', 'places', function (e) {  	  	//twitter widjet  	window.twttr = (function(d, s, id) {  	  var js, fjs = d.getelementsbytagname(s)[0],  		t = window.twttr || {};  	  if (d.getelementbyid(id)) return t;  	  js = d.createelement(s);  	  js.id = id;  	  js.src = "https://platform.twitter.com/widgets.js";  	  fjs.parentnode.insertbefore(js, fjs);    	  t._e = [];  	  t.ready = function(f) {  		t._e.push(f);  	  };    	  return t;  	}(document, "script", "twitter-wjs"));            		new mapboxgl.popup()              .setlnglat(e.features[0].geometry.coordinates)              .sethtml('<h3>' + e.features[0].properties.title + '</h3><p>' + e.features[0].properties.description + '</p>')              .addto(map);      });

the tweet hard-coded description part of geojson using embed link twitter: 

map.on('load', function () {          map.addlayer({          "id": "places",          "type": "symbol",          "source": {              "type": "geojson",              "data": {                  "type": "featurecollection",                  "features": [{                      "type": "feature",                      "geometry": {  					    "type": "point",                          "coordinates": [-6.2285,53.3475]                      },                      "properties": {                          "title": "3arena",                          "icon": "stadium",  						"description": "<blockquote class='twitter-tweet' data-lang='en'><p lang='en' dir='ltr'>.<a /*tweet info*/ </a></blockquote>"                      }                  }]              }          },          "layout": {              "icon-image": "{icon}-15",  			"icon-size": 2,  			"icon-allow-overlap": true          }      });  });

the tweet popup works once fails style popups after though click function continues work. on matter appreciated. here's working example:

<head>      <meta charset='utf-8' />      <title>example</title>      <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />      <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js'></script>      <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css' rel='stylesheet' />      <style>        body {          margin: 0;          padding: 0;        }          #map {          position: absolute;          top: 0;          bottom: 0;          width: 100%;        }  	    	  .mapboxgl-popup {          max-width: 400px;          font: 12px/20px 'work sans', arial, helvetica, sans-serif;      }        </style>    </head>    <body>      <div id='map'></div>      <script>      mapboxgl.accesstoken = 'pk.eyj1ijoiamftzxnqagvucnkilcjhijoiy2o0chbznjlzmmfrnjmybzr3atzsbmnxesj9.gynlealc8niiqskdkfrolw'; // access token        	var map = new mapboxgl.map({        container: 'map',        style: 'mapbox://styles/mapbox/streets-v10', // style url  	  center: [-6.2285,53.3475],  	  zoom: 14      });  	  	var nav = new mapboxgl.navigationcontrol();      map.addcontrol(nav, 'top-left');        // add geolocate control map.  	map.addcontrol(new mapboxgl.geolocatecontrol({  		positionoptions: {  			enablehighaccuracy: true  		},  		trackuserlocation: true  	}));  	  	        map.on('load', function () {          map.addlayer({          "id": "places",          "type": "symbol",          "source": {              "type": "geojson",              "data": {                  "type": "featurecollection",                  "features": [{                      "type": "feature",                      "geometry": {  					    "type": "point",                          "coordinates": [-6.2285,53.3475]                      },                      "properties": {                          "title": "3arena",                          "icon": "stadium",  						"description": "<blockquote class='twitter-tweet' data-lang='en'><p lang='en' dir='ltr'>a tweet</p>&mdash; james henry (@the_hendawg) <a href='https://twitter.com/the_hendawg/status/899998799728451584'>august 22, 2017</a></blockquote>"                      }                  }]              }          },          "layout": {              "icon-image": "{icon}-15",  			"icon-size": 2,  			"icon-allow-overlap": true          }      });  });        // when click event occurs on feature in places layer, open popup @      // location of feature, description html properties.      map.on('click', 'places', function (e) {  	  	//twitter widjet  	window.twttr = (function(d, s, id) {  	  var js, fjs = d.getelementsbytagname(s)[0],  		t = window.twttr || {};  	  if (d.getelementbyid(id)) return t;  	  js = d.createelement(s);  	  js.id = id;  	  js.src = "https://platform.twitter.com/widgets.js";  	  fjs.parentnode.insertbefore(js, fjs);    	  t._e = [];  	  t.ready = function(f) {  		t._e.push(f);  	  };    	  return t;  	}(document, "script", "twitter-wjs"));            		new mapboxgl.popup()              .setlnglat(e.features[0].geometry.coordinates)              .sethtml('<h3>' + e.features[0].properties.title + '</h3><p>' + e.features[0].properties.description + '</p>')              .addto(map);      });        // change cursor pointer when mouse on places layer.      map.on('mouseenter', 'places', function () {          map.getcanvas().style.cursor = 'pointer';      });        // change pointer when leaves.      map.on('mouseleave', 'places', function () {          map.getcanvas().style.cursor = '';      });      </script>    </body>  </html>


Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more