Skip to content

Angularjs Directive for Neshan map (neshan.org) service

Notifications You must be signed in to change notification settings

maherAshori/Neshan-Map

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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