Neshan-Map | v: 0.0.2

Angularjs Directive for Neshan map (neshan.org) service - https://developers.neshan.org

New: all updates need service key *

- reverseGeocoding: get current details of marker point
- direction: get direction from point A to Z
- reverseDirection: reverse direction from Z to A

update:

update night mode polyline change from blue to white

Step 1: sources

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

Step 2: define app & add Neshan Directive

var app = angular.module("app", ["Neshan"]);

Step 3: configs your map

    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

Step 4: insert the neshan directive

#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

output:

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);

watch-map-type:

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";
  }