Link textual content to map marker and viceversa

ionic-v1
1

Hallo
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

2

Hi,
@en_j

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>  .

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

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

Here,
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.

3

Sure you help me!
Specially, you led me to this project https://github.com/GreenInfo-Network/IonicMapStarter