<!DOCTYPE html>    <html lang="en">  <head>  <meta charset="utf-8"> <meta name="description" content=""> <link rel="stylesheet" type="text/css" href="http://poi.visicom.ua/styles/reset.css" media="screen, projection"> <link rel="stylesheet" type="text/css" href="http://poi.visicom.ua/styles/layout.css" media="screen, projection">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> #title_wrapper { background-color: #0074b8; } #logo { height: 45px; display: inline-block; } #logo img { margin-top: 13px; margin-left: 36px; } @font-face { font-family: "DIN Pro"; src: local("DIN Pro"), url("http://poi.visicom.ua/styles/fonts/din-pro.woff") format("woff"); font-weight: 400; font-style: normal; font-display: auto; } body { font-family: "DIN Pro", sans-serif; } </style> </head> <body> <div id="title_wrapper"> <div id="logo_wrapper"> <a id="logo" href="http://maps.visicom.ua"><img alt="袙褨蟹褨泻芯屑" title="袙懈蟹懈泻芯屑" height="17" width="123" src="http://poi.visicom.ua/styles/images/visicom_logo_uk_light.svg"></a> </div> </div> <link rel="stylesheet" href="https://static.visicom.ua/css/reset-grid,leaflet-0.7.2,visicom-leaflet.css"> <style> .grid{ padding: 14px; } .row { padding-bottom: 7px; } .end, label { cursor: pointer; } .error { color: #EE5757; font-size: smaller; } input.ng-invalid{ border-bottom: 1px #EE5757 solid; } input::placeholder { color: #C0C0C0; } .title { font-weight: 500; font-size: 90%; } a { color: #0173B9; text-decoration: none; } a:hover { text-decoration: underline; } #map { height: 550px; border: solid 1px #E5E5E5; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; } @media screen and (max-width: 400px) { #map { height: 350px; } } </style> <div class="grid" ng-app ng-controller="PageController"> <div class="row"> <h1>袛芯写邪褌懈芯褉谐邪薪褨蟹邪褑褨褞</h1> <div class="s4 c4 " ng-show="message" style="display: none" > <div>袛褟泻褍褦屑芯, 写邪薪褨锌褉芯泻芯屑锌邪薪褨褞褍褋锌褨褕薪芯锌械褉械写邪薪褨薪邪褉芯蟹谐谢褟写.</div> <a href="#" ng-click="clear()">袛芯写邪褌懈薪芯胁褍</a> </div> <div class="s4 c4" ng-show="error" style="display: none"> <div class="error"> {{error}} </div> </div> </div> <div class="row"> <div class="c7" ng-hide="message"> <form name="CompanyForm"> <div class="row"> <div class="c12"> <div class="title">袧邪蟹胁邪</div> <input type="text" ng-model="model.name" placeholder="袗孝袙褨蟹褨泻芯屑" required/> </div> </div> <div class="row"> <div class="c12"> <div class="title">袨褋薪芯胁薪懈泄胁懈写写褨褟谢褜薪芯褋褌褨</div> <input type="text" ng-model="model.primary_activity" placeholder="笑懈褎褉芯胁邪泻邪褉褌芯谐褉邪褎褨褟, 蟹斜褨褉写邪薪懈褏" /> </div> </div> <div class="row"> <div class="c12"> <div class="title">袛芯写邪褌泻芯胁褨胁懈写懈写褨褟谢褜薪芯褋褌褨</div> <input type="text" ng-model="model.secondary_activity" placeholder="袪芯蟹褉芯斜泻邪袩袟" /> </div> </div> <div class="row"> <div class="c7"> <div class="title">袗写褉械褋邪</div> <input type="text" ng-model="model.address" placeholder="屑. 袣懈褩胁, 胁褍谢. 袙械谢懈泻邪袞懈褌芯屑懈褉褋褜泻邪, 25/2"/> <div> <span class="error">{{model.adrerror}}</span> <a ng-click="onGeocode()" class="end" ng-show="model.address">袨褌褉懈屑邪褌懈泻芯芯褉写懈薪邪褌懈</a> </div> </div> <div class="c5 end"> <div class="title">楔懈褉芯褌邪, 写芯胁谐芯褌邪</div> <input type="text" ng-model="model.coords" placeholder="50.45496, 30.51123" required/> <div> <span class="error" >{{model.coordserror}}</span>  <a ng-click="onParseCoord(true)" class="end" ng-show="model.coords">袨褌褉懈屑邪褌懈邪写褉械褋褍</a> </div> </div> </div> <div class="row"> <div class="c7"> <div class="title">小邪泄褌</div> <input type="text" ng-model="model.site" placeholder="visicom.ua"/> </div> <div class="c5 end"> <div class="title">Email</div> <input type="email" ng-model="model.email" placeholder="web-maps@visi.com.ua"/> </div> </div> <div class="row"> <div class="c12"> <div class="title">孝械谢械褎芯薪懈</div> <input type="text" ng-model="model.phones" placeholder="+380 44 201-00-26"/> </div> </div> <div class="row"> <div class="c12"> <div class="title">袙邪褕 email (薪械芯斜芯胁'褟蟹泻芯胁芯)</div> <input type="email" ng-model="model.owner_email" placeholder="web-maps@visi.com.ua"/> </div> </div> <div class="row"> <div class="c12"> <input id="who_post" type="checkbox" ng-model="model.who_post" style="width:auto;"> <label for="who_post" class="title">袛芯写邪胁锌褉械写褋褌邪胁薪懈泻泻芯屑锌邪薪褨褩</label> </div> </div> <div class="row"> <div class="c3 end"> <input class="end" type="submit" value="袛芯写邪褌懈" ng-click="submit()" ng-disabled="CompanyForm.$invalid"> </div> </div> </form> </div> <div class="c5" ng-hide="message"> <div id="map"></div> </div> </div> </div> <script src="https://static.visicom.ua/js/leaflet-0.7.2,underscore-1.6.0,visicom-leaflet,visicom-geometry,visicom-dataapi.js"></script> <script src="https://static.visicom.ua/js/angular.js"></script> <script> var error_coords = "袧械胁写邪谢芯褋褟褉芯蟹锌褨蟹薪邪褌懈"; var error_address = "袗写褉械褋褍薪械蟹薪邪泄写械薪芯"; var error_many_address = "袟薪邪泄写械薪芯写械泻褨谢褜泻邪邪写褉械褋"; var map = L.visicom.map('map', {zoom: 15}); map.addControl(new L.visicom.LocationCtrl()); var marker = L.marker([0,0],{ draggable: true, icon: L.icon({iconUrl: "http://poi.visicom.ua/styles/images/marker-red-ws.png",iconSize: [30, 28]}) }).addTo(map); function PageController($scope, $http){ try { var owner_email = localStorage.getItem("owner_email"); } catch(e){} $scope.model = { name: null, coords: null, owner_email: owner_email }; $scope.onGeocode = function(){ var adr = $scope.model.address; if(!adr) return; $http.post("http://poi.visicom.ua/en/add|geocode", adr) .success(function(data){ if(!data || !data[0]) return; var status = data[0].status; if(status === "OK_ADR") { var result = data[0].result_adr[0]; $scope.model.address = result.name; $scope.model.coords = result.geo; $scope.onParseCoord(); } else if(status === "ERR_FAIL") { $scope.model.adrerror = error_address; } else if(status === "ERR_MANY" || status === "ERR_TMANY") $scope.model.adrerror = error_many_address; }); } $scope.onParseCoord = function(filladdress){ var lnglat = validateCoords(); if(!lnglat) return; map.setView(lnglat, map.getZoom()); marker.setLatLng(lnglat); if(filladdress) { var coord = lnglat.toString(false); $http.get("http://poi.visicom.ua/api/ru/search/adr_address.json?r=2&l=1&n=" + coord) .then(function(r){ return r.data.properties ? r : $http.get("http://poi.visicom.ua/api/ru/search/adr_street.json?r=50&l=1&n=" + coord); }) .then(function(r){ var adr = L.visicom.api.featureName(r.data); if(adr) $scope.model.address = adr; }); } }; $scope.clear = function(){ $scope.model = { owner_email: $scope.model.owner_email}; $scope.message = null; }; $scope.submit=function(){ if(!validateCoords()) return; try { localStorage.setItem("owner_email", $scope.model.owner_email ); } catch(e){} $http.post("http://poi.visicom.ua/en/add", $scope.model) .success(function(){ $scope.message = "袛褟泻褍褦屑芯." }) .error(function(d){ $scope.error = d; }); }; $scope.$watch("model.coords+model.name+model.address", function(){ $scope.error = null; $scope.model.adrerror = null; $scope.model.coordserror = null; }); function validateCoords(){ if(!$scope.model.coords) return null; var lnglat = L.visicom.geocoordParse($scope.model.coords); if(lnglat) { $scope.model.coords.toString(true,', '); return lnglat; } $scope.model.coordserror = error_coords; return null; } marker.on("dragend", function(){ $scope.$apply(function(){ $scope.model.coords = marker.getLatLng().toString(true,', '); }); }); map.on("click locationfound", function(e){ $scope.$apply(function(){ $scope.model.coords = e.latlng.toString(true, ', '); $scope.onParseCoord(); }); }); } </script> </body> </html>

CINXE.COM