Needed to render a mapael map to plot points(based on city lat,longs)in a portal that is using Angularjs. This is working fine if angular-route library is not used. But as soon as the routes are configured, the map is not rendered. It throws no error, but while debugging, I find that the class selector in the 'jquery.mapael.js' file is not returning the element.
The html snippet is as follows :
<div class="mapContainer" ng-show="isCurrentViewMap()">
<div class="map">Alternative content</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" charset="utf-8" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="js/india.js" charset="utf-8" ></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js" charset="utf-8" ></script>
<script src="js/jquery.mapael.js" charset="utf-8" ></script>
<script src="js/mapConfig.js"></script>
The mapConfig.js is as follows :
$(function(){
$(".mapContainer").mapael({
map : {
// Set the name of the map to display
name : "india"
, defaultPlot : {
type: "circle",
size:5,
attrs : {
fill: "#000"
, opacity : 0.6
}
, text : {
attrs : {
fill : "#fff"
}
, attrsHover : {
fill : "#000"
}
}
}
, defaultArea: {
attrs : {
fill : "#fff"
, stroke: "#aaa"
}
, attrsHover : {
fill: "#fff"
}
, text : {
attrs : {
fill : "#000"
}
, attrsHover : {
fill : "#000"
}
}
}
},
// Add some plots on the map
plots : {
// Plot positioned by x and y instead of latitude, longitude
'Delhi' : {
latitude :28.613939,
longitude: 77.209021,
href:"NewFile.html",
text : {content : "Delhi"}
},
}
});
});
I do get to see the Alternative content, but not the map. Please help me with some pointers.
