I am new to AngularJS, and I have a Leaflet application downloaded through the directive. The flyer configuration is shamelessly taken from http://leafletjs.com/examples/choropleth.html , which downloads a map with highlighted zip codes.
My question is: I want to load the url from an ajax call that returns the Plotly url. How to replace a map with an iframe embedded in Angular.
Warning, the code is very rude and basically pure javascript with the directive:
Controller:
app.controller('MapController', ['$scope', '$http', function($scope, $http) { $scope.data = ''; $scope.getData = function(URL) { $http.get(URL).success(function(data) { $scope.data = data; }) return $scope.data; } }]);
Directive
app.directive('map', function() { var linker = function (scope, element, attrs) { var geojson; var info; var zip_data = $.getJSON("data/live", function(data){on_json_received(data)}) function on_json_received(data){ L.mapbox.accessToken = 'token'; var map = L.mapbox.map('map', 'xxx.xx') .setView([37.760, -122.435], 13); info = L.control(); info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info" this.update(); return this._div; }; // method that we will use to update the control based on feature properties passed info.update = function (e) { if(e) this._div.innerHTML = '<h4>'+e.target.feature.id+', Sentiment</h4>' + e.target.feature.sentiment else this._div.innerHTML = '<h4>Zipcode, Sentiment</h4>' }; info.addTo(map); var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [-1,-.7, -.5, -.3, 0, .3, .5, .7,1], labels = []; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+</br>'); } return div; }; legend.addTo(map); geojson = L.geoJson(data,{style: style,onEachFeature: onEachFeature}).addTo(map); } function getColor(d) { return d > .7 ? '#800026' : d > .5 ? '#BD0026' : d > .3 ? '#E31A1C' : d > 0 ? '#FC4E2A' : d > -.3 ? '#FD8D3C' : d > -.5 ? '#FEB24C' : d > -.7 ? '#FED976' : '#FFEDA0'; } function style(feature) { return { fillColor: getColor(feature.sentiment), weight: 2, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.7 }; } function highlightFeature(e) { var layer = e.target; layer.setStyle({ weight: 5, color: '#666', dashArray: '', fillOpacity: 0.7 }); if (!L.Browser.ie && !L.Browser.opera) { layer.bringToFront(); } info.update(e); } function resetHighlight(e) { geojson.resetStyle(e.target); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: regionClicked }); info.update(); } function regionClicked(e) { var zipcode = e.target.feature.id; var url = "/data/zipcode/"+zipcode; return alert(scope.getData(url)); } }; return { restrict: 'A', template: "<div id=\"map\"></div>", link: linker }; });
regionClicked (e) is a function in which the function acts with a click of the mouse and makes an ajax call to return the Plotly url.
I follow the principles of AngularJS, but with LeafletJS it is very difficult for me to make this Angular-like application.
EDIT: I redesigned the code to make it more presentable. Now I have a controller that returns a url. To be clear, I would like to replace the template with iframe plotly embed housing, which received the URL from the ajax call.