Link textual content to map marker and viceversa

I am planning to write an application consisting of a map and some textual information (cards) related to places on the map.
Is it possible to “link” a piece of information to a marker on the map, so that when the user clicks on the link the map is shown and is panned to/centered on the related marker?
And viceversa, when the user clicks on the marker he/she gets redirected to the page containing related information.
Would this link be handled by a route, as usual?

Thanks in advance


For installing map first you will update your bower and install leaflet libraries using below mentioned command. This command will help you installing leaflet map in your application.

$ bower install leaflet

         <link rel="stylesheet" href="lib/leaflet/dist/leaflet.css" />
         <script src="lib/leaflet/dist/leaflet.js"></script>    
         <script src="lib/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js"></script>
         <script src="lib/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>  .

     	<leaflet if-center="xyz"  markers="markers" height="100%" width="100%"></leaflet>

        var mymarker={
        	    lat :23.02850605221088,
                    lng: 72.55897879600525,
                    focus : true,
                    message: '<a href="#/app/tab/article-feed/111">Click here</a>'
        	angular.extend ($scope,{
        	lat: 23.0225,
        	lng: 72.5714,
        	zoom: 8
        	      markers : {
        	                mymarker :angular.copy(mymarker)

message: '<a href="#/app/tab/article-feed/111">’ Click here’
You would add your link where you were redirect in application.

Hope this answer helps you in getting your solution.

1 Like

Sure you help me!
Specially, you led me to this project