Angularjs Directive for Neshan map (neshan.org) service - https://developers.neshan.org
- reverseGeocoding: get current details of marker point
- direction: get direction from point A to Z
- reverseDirection: reverse direction from Z to A
update night mode polyline change from blue
to white
<link href="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css" rel="stylesheet" type="text/css">
<script src="https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.js" type="text/javascript"></script>
<script src="Polyline.encoded.js"></script>
<script src="neshan.js"></script>
var app = angular.module("app", ["Neshan"]);
app.config(function(neshanProvider) {
neshanProvider.configs({
mapKey: "web.**",
serviceKey: "service.**",
defaultCenter: [35.6997793747305, 51.337409038769465],
mapType: "neshan",
timeoutReady: 0,
zoomControl: false,
searchPlaceholderText: "search",
zoom: 16,
activeMarker: true,
singleMarker: true,
search: true,
poi: true,
traffic: true,
//---v: 0.0.2
reverseGeocoding: true,
direction: false,
reverseDirection: false
});
});
config | description | type | default | required |
---|---|---|---|---|
mapKey | used for display neshan map for free (https://neshan.org) | string | - | true |
defaultCenter | used for display map center on view | array | - | true |
serviceKey | used for calling neshan api (primary) | string | - | false |
mapType | used for map style (Types: [dreamy, dreamy-gold, neshan, standard-day, standard-night, osm-bright]) | string | 'standard-day' | true |
poi | show/hide points on map | bool | false | false |
traffic | show/hide traffic roads on map | bool | false | false |
zoom | used for default zoom on map | int | 12 | false |
zoomControl | show/hide (+/-) zoom control from the map | bool | true | false |
activeMarker | active/deactive markers from the map | bool | false | false |
singleMarker | activeMarker should be true! it able to make you have multiple marker or single marker | bool false: multiple true: single |
false: multiple | false |
search | you need a serviceKey! active search bar on map | bool | false | false |
timeoutReady | used for map compiler and some other settings, may you need display the map after 20 secound | int | 0 secound | false |
searchPlaceholderText | used for search input text box placeholder | string | 'place' | false |
reverseGeocoding | get current point details of the marker | bool | false | false |
direction | get direction from point A to Z | bool | false | false |
reverseDirection | reverse direction from point Z to A | bool | false | false |
#Html
<neshan map-id="map"
watch-map-type="watchMapType"
output="map"
add-marker="[35.6997793747305, 51.337409038769465]"></neshan>
#Controller
app.controller("ctrl", function ($scope) {
$scope.map = {};
$scope.watchMapType = null;
var hour = (new Date()).getHours();
if (hour >= 19) {
$scope.watchMapType = "standard-night";
}
$scope.$watch("map", function (value) {
console.log(value);
}, true);
});
directive key | description | default | required |
---|---|---|---|
map-id | define id to map container | map | false |
output | return all changes in the map, for example: return lat and lng | - | true |
add-marker | add a default marker | - | false |
watch-map-type | may you want to change map to night or another types with conditions | - | false |
In our example we define $scope.map = {};
as output.
If we set map configs singleMarker = true
(single marker) output will return object.
If we set map configs singleMarker = false
(multiple markers) output will return array.
$scope.$watch("map", function (value) {
//return output from directive
console.log(value);
}, true);
If you need to change map type from day to night, you need to use this attr:
In your controller:
//get current hour:
var hour = (new Date()).getHours();
//if hour is bigger than 19 change mapType to your valid value
if (hour >= 19) {
$scope.watchMapType = "standard-night";
}