angularjs - How to redirect to next page on click of marker and displaying details about the marker? -
i using leaflet display map in hybrid app. in map have multiple markers. want redirect next page when user click on marker , display details regarding marker. below json data getting lat , long marker.
below json data
[{"store_id":"1","store_name":"wall mart","store_address":"forum mall, kormangala","store_latitude":"12.929328","store_longitude":" 77.605117","store_phone":"9848484848"}, {"store_id":"2","store_name":"lifestyle","store_address":"k r pooram","store_latitude":"12.961398","store_longitude":"77.553128","store_phone":"858585858"}, {"store_id":"3","store_name":"more","store_address":"katriguppe","store_latitude":"12.989943","store_longitude":"77.689106","store_phone":"8796543210"}] html code
<div id="map" style="width: 100%; height: 100%"></div> controller
var map = l.map('map', { center: new l.latlng(12.96340871,77.59699345), zoom: 12, maxzoom: 18, minzoom: 6 }); maplink = '<a href="http://openstreetmap.org">openstreetmap</a>'; l.tilelayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© ' + maplink + ' contributors', maxzoom: 18, }).addto(map); $http.get('json.php').success(function(data) { // loop through 'locations' , place markers on map console.log(json.stringify(data)); angular.foreach(data, function(location, key){ // alert(location.store_name); var marker = l.marker([location.store_latitude, location.store_longitude]).addto(map); }); }); thanks
you should use marker's click event bind ridirect functionality. routing manipulation can achivied of $location service in angular:
angular.foreach(data, function(location, key){ var marker = l.marker([location.store_latitude, location.store_longitude]).addto(map); marker.click(function(e) { $location.path('/some_route'); }) });
Comments
Post a Comment