Skip to content

cedarmaps-sdk-web-public
cedarmaps-sdk-web-public
Commit 5b2811f7 authored by Deployer's avatar Deployer
Browse files
Options

Improved reverse geocode and address locator demo

parent df77a376
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 244 additions and 69 deletions
README.md
View file @ 5b2811f7
This diff is collapsed.
demos/address-locator.html
View file @ 5b2811f7
......@@ -45,7 +45,10 @@
</div>
<div class="form-component">
<label for="streets">معبر</label>
<input type="text" id="streets" name="streets" placeholder="شروع به تایپ کنید...">
<input type="text" id="streets" name="streets" placeholder="شروع به تایپ کنید..." disabled="disabled">
</div>
<div class="form-component">
<input type="checkbox" id="toggle-checkbox" onchange="toggleLayer();">نمایش محدوده جستجو روی نقشه
</div>
</div>
......@@ -57,22 +60,25 @@
'Send us an email to <info@cedar.ir>');
}
// Setting up our DOM elements.
// Setting up our DOM elements and global scope variables.
var form = document.getElementById('form'),
provincesList = document.getElementById('provinces'),
citiesList = document.getElementById('cities'),
localitiesList = document.getElementById('localities'),
streetsInput = document.getElementById('streets'),
toggleCheckbox = document.getElementById('toggle-checkbox'),
loading = document.getElementById('loading'),
globalSearchBoundingBox = {},
marker;
globalSearchBoundingBox = {sw: [24.827, 44.011], ne:[39.724, 63.325]}, // Bounding box of Iran
marker,
rectagle;
var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken;
// Initializing our map using some options
var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true,
minZoom: 6
maxZoom: 17,
minZoom: 6,
}).setView([35.757552763570196, 51.41000747680664], 7);
// Adding locate control to map
......@@ -124,12 +130,29 @@
localitiesList.disabled = true;
streetsInput.disabled = true;
var value = selectedOption.value;
if (!value) return;
var value = selectedOption.value,
sw, ne;
if (!value) {
citiesList.value = "";
localitiesList.value = "";
citiesList.disabled = true;
localitiesList.disabled = true;
sw = [24.827, 44.011], // Bounding box of Iran
ne = [39.724, 63.325],
globalSearchBoundingBox = {sw: sw, ne:ne};
drawBoundary();
map.flyToBounds([sw,ne]);
return;
}
var sw = provincesList.options[provincesList.selectedIndex].getAttribute('data-sw').split(','),
ne = provincesList.options[provincesList.selectedIndex].getAttribute('data-ne').split(',');
globalSearchBoundingBox = {sw: sw, ne: ne};
drawBoundary();
map.flyToBounds([sw,ne]);
loading.style.visibility = 'visible';
......@@ -144,14 +167,29 @@
localitiesList.disabled = false;
streetsInput.disabled = false;
var value = selectedOption.value;
if (!value) return;
var value = selectedOption.value,
sw, ne;
var sw = citiesList.options[citiesList.selectedIndex].getAttribute('data-sw').split(','),
ne = citiesList.options[citiesList.selectedIndex].getAttribute('data-ne').split(',');
if (!value) {
localitiesList.value = "";
localitiesList.disabled = true;
streetsInput.disabled = true;
streetsInput.value = "";
sw = provincesList.options[provincesList.selectedIndex].getAttribute('data-sw').split(','),
ne = provincesList.options[provincesList.selectedIndex].getAttribute('data-ne').split(',');
globalSearchBoundingBox = {sw: sw, ne: ne};
drawBoundary();
map.flyToBounds([sw,ne]);
return;
}
sw = citiesList.options[citiesList.selectedIndex].getAttribute('data-sw').split(','),
ne = citiesList.options[citiesList.selectedIndex].getAttribute('data-ne').split(',');
map.flyToBounds([sw,ne]);
globalSearchBoundingBox = {sw: sw, ne: ne};
drawBoundary();
loading.style.visibility = 'visible';
locator.query('locality', value, function(err, json){
......@@ -166,15 +204,23 @@
var selectLocality = function(selectedOption) {
streetsInput.disabled = false;
var value = selectedOption.value;
if (!value) return;
if (!value) {
sw = citiesList.options[citiesList.selectedIndex].getAttribute('data-sw').split(','),
ne = citiesList.options[citiesList.selectedIndex].getAttribute('data-ne').split(',');
globalSearchBoundingBox = {sw: sw, ne: ne};
drawBoundary();
map.flyToBounds([sw,ne]);
return;
}
var sw = localitiesList.options[localitiesList.selectedIndex].getAttribute('data-sw').split(','),
ne = localitiesList.options[localitiesList.selectedIndex].getAttribute('data-ne').split(',');
map.flyToBounds([sw,ne]);
globalSearchBoundingBox = {sw: sw, ne: ne};
drawBoundary();
};
var buildOptionsList = function(list) {
......@@ -209,6 +255,23 @@
// Flying to the center point in zoom 15
map.flyTo(latLng, 16);
};
var toggleLayer = function(){
if (toggleCheckbox.checked) {
drawBoundary();
} else {
if (rectagle) map.removeLayer(rectagle);
}
};
var drawBoundary = function(){
if (toggleCheckbox.checked) {
// If any, removing the previously added rectagle of the map
if (rectagle) map.removeLayer(rectagle);
// create an orange rectangle
var bounds = [globalSearchBoundingBox.sw, globalSearchBoundingBox.ne];
rectagle = L.rectangle(bounds, {color: "#12132a", weight: 0}).addTo(map);
}
};
var autoFillForm = function(address) {
loading.style.visibility = 'visible';
......
demos/css/address-locator.css
View file @ 5b2811f7
......@@ -42,7 +42,7 @@ body {
label {
float: right;
}
select, input {
select, input[type="text"] {
display: block;
width: 73%;
margin-right: 50px;
......
demos/css/reverse-geocoder.css 0 → 100644
View file @ 5b2811f7
body {
margin: 0;
padding: 0;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#results {
width: 400px;
position: absolute;
top: 20px;
left: 50px;
background-color: rgba(255, 255, 255, .95);
border-radius: 5px;
padding: 10px;
font-size: 13px;
}
#loading {
visibility: hidden;
}
#parsed-response {
margin: 20px 0;
direction: rtl;
font: 12px/1.8em;
font-family: Tahoma;
background-color: #f1f1f1;
padding: 10px;
display: none;
}
#raw-response {
margin-top: 20px;
direction: rtl;
font: 12px/1.8em;
padding: 10px;
display: none;
text-align: left;
direction: ltr;
background: #272822;
height: 350px;
overflow: scroll;
color: #fff;
}
pre {
white-space: pre-wrap;
/* css-3 */
white-space: -moz-pre-wrap;
/* Mozilla, since 1999 */
white-space: -pre-wrap;
/* Opera 4-6 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* Internet Explorer 5.5+ */
}
.string { color: #a6e22e; }
.number { color: #ae81ff; }
.boolean { color: #f92672; }
.null { color: magenta; }
.key { color: #e6db74; }
\ No newline at end of file
demos/reverse-geocoder.html
View file @ 5b2811f7
......@@ -7,57 +7,22 @@
<script src='../dist/v1.7.0/cedarmaps.js'></script>
<script src='../access-token.js'></script>
<script src='./js/L.Control.Locate.min.js'></script>
<link href='../dist/v1.7.0/cedarmaps.css' rel='stylesheet' />
<link href='./css/address-locator.css' rel='stylesheet' />
<link href='./css/L.Control.Locate.min.css' rel='stylesheet' />
<link href='./css/reverse-geocoder.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#results {
width: 300px;
height: 500px;
position: absolute;
top: 50px;
right: 50px;
background-color: rgba(255,255,255,.95);
border-radius: 5px;
padding: 10px;
font-family: "Times New Roman";
font-size: 13px;
}
#loading {
visibility: hidden;
}
#response {
margin-top: 20px;
direction: rtl;
font: 11px/1.8em Tahoma;
background-color: #f1f1f1;
padding: 10px;
}
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
</head>
<body>
<div id='map' class='map'> </div>
<div id="results">
<h2>Click somewhere on map!</h2><div id="loading"><img src="../dist/v1.7.0/images/loading-14-white.gif" width="14" height="14"> Loading...</div>
<h2 style="text-align: center;">Click somewhere on the map!</h2><div id="loading"><img src="../dist/v1.7.0/images/loading-14-blue.gif" width="14" height="14"> Loading...</div>
<div id="latlng"></div>
<div id="response"></div>
<div id="parsed-response"></div>
<div id="raw-response"></div>
</div>
<script>
try {
......@@ -69,7 +34,8 @@
}
var tileJSONUrl = 'https://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token='+ L.cedarmaps.accessToken,
marker;
marker,
syntaxHighlight;
// Initializing our map
var map = L.cedarmaps.map('map', tileJSONUrl, {
......@@ -79,7 +45,8 @@
// Setting up our DOM elements.
var resultsContainer = document.getElementById('results'),
latLngContainer = document.getElementById('latlng'),
responseContainer = document.getElementById('response'),
parsedResponseContainer = document.getElementById('parsed-response'),
rawResponseContainer = document.getElementById('raw-response'),
loadingIndicator = document.getElementById('loading');
// We need to introduce our index to geocoder module. "cedarmaps.streets" in this case.
......@@ -94,14 +61,43 @@
geocoder.reverseQuery(e.latlng, function callback(err, res){
loading.style.visibility = 'hidden';
parsedResponseContainer.style.display = 'block';
rawResponseContainer.style.display = 'block';
var resultHTML = '<p>شهر: ' + res.result.city + '<br>' +
'محله: ' + res.result.locality + '<br>' +
'خیابان: ' + res.result.address + '</p>';
var parsedResponse = '<ul>'+
'<li><strong>استان:</strong> ' + res.result.province + '</li>' +
'<li><strong>شهر:</strong> ' + res.result.city + '</li>' +
'<li><strong>محله:</strong> ' + res.result.locality + '</li>' +
'<li><strong>خیابان:</strong> ' + res.result.address + '</li>' +
'<li><strong>در منطقه طرح ترافیک:</strong> ' + (res.result.traffic_zone.in_central ? 'بله' : 'خیر' ) + '</li>' +
'<li><strong>در منطقه زوج و فرد:</strong> ' + (res.result.traffic_zone.in_evenodd ? 'بله' : 'خیر' ) + '</li>' +
'</ul>';
var rawResponse = '<pre class="language-javascript">'+ syntaxHighlight(JSON.stringify(res, undefined, 2)) + '</pre>'
responseContainer.innerHTML = resultHTML + '<pre>'+ JSON.stringify(res) + '</pre>';
parsedResponseContainer.innerHTML = parsedResponse;
rawResponseContainer.innerHTML = rawResponse;
});
});
syntaxHighlight = function(json) {
json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '<span class="' + cls + '">' + match + '</span>';
});
}
</script>
</body>
......
src/geocoder.js
View file @ 5b2811f7
......@@ -71,11 +71,6 @@ module.exports = function(url, options) {
}
}
if (isObject && _.proximity) {
var proximity = roundTo(L.latLng(_.proximity), 3);
url += '&proximity=' + proximity.lng + ',' + proximity.lat;
}
return url;
};
......
theme/images/cedarmaps.svg 0 → 100644
View file @ 5b2811f7
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="162px" height="44px" viewBox="0 0 162 44" enable-background="new 0 0 162 44" xml:space="preserve">
<g>
<ellipse opacity="0.08" enable-background="new " cx="143.858" cy="41.112" rx="18.018" ry="2.795"/>
<ellipse opacity="0.15" enable-background="new " cx="144.285" cy="40.364" rx="11.224" ry="1.662"/>
<path fill="#19B3BB" d="M160.045,11.099c0,11.761-13.69,25.58-14.27,26.16c-1.049,1.052-2.753,1.055-3.806,0.005
c-0.002-0.002-0.004-0.004-0.005-0.005c-0.583-0.58-14.27-14.399-14.27-26.16c0-14.484,32.35-14.484,32.35,0L160.045,11.099z"/>
<path fill="#FFFFFF" d="M136.977,10.912c0-1.571,0.946-3.581,2.517-3.581c1.65,0,3.349,1.984,3.349,3.607s-1.335,2.88-2.959,2.88
c-1.602,0.004-2.903-1.291-2.907-2.893C136.977,10.921,136.977,10.916,136.977,10.912z M143.755,9.94
c0-1.102,1.173-2.511,2.275-2.511c1.158,0,1.839,1.391,1.839,2.53c0,1.138-0.937,2.02-2.076,2.02
c-1.123,0.002-2.036-0.907-2.038-2.03C143.755,9.946,143.755,9.943,143.755,9.94z M145.224,23.698
c-2.555,0.937-5.713,1.05-8.757-0.913c-0.5-0.373-1.01-1.165-1.168-1.76c-0.102-0.385-0.072-1.405,0.751-1.702
c0.585-0.21,13.728-5.206,14.24-5.39c1.226-0.442,1.735,1.1,1.876,1.634C152.292,16.042,152.42,21.057,145.224,23.698
L145.224,23.698z"/>
<path opacity="0.3" fill="#0D8383" enable-background="new " d="M143.253,36.899c-0.46-0.57-12.182-14.678-12.182-26.212
c0-2.763,0.253-5.467,2.227-6.997c-3.406,1.4-4.862,4.512-4.862,8.222c0,11.097,12.936,24.118,13.396,24.666
c0.413,0.497,0.782,1.092,1.325,1.092c0.519,0,0,0,0.407-0.452C143.451,37.122,143.347,37.015,143.253,36.899L143.253,36.899z"/>
<ellipse opacity="0.15" enable-background="new " cx="143.77" cy="40.114" rx="4.77" ry="0.707"/>
<path fill="#FEFCFB" d="M15.78,34.563c0.927,0,1.781,0.779,1.781,1.78c0,1.003-0.854,1.782-1.782,1.782
c-1.04,0-1.856-0.78-1.856-1.781c0-1.002,0.817-1.781,1.856-1.781L15.78,34.563z M13.292,36.343c0,1.003-0.78,1.782-1.782,1.782
s-1.818-0.78-1.818-1.781c0-1.002,0.816-1.781,1.818-1.781C12.513,34.563,13.292,35.342,13.292,36.343z M13.589,38.385
c0.928,0,1.782,0.779,1.782,1.781s-0.854,1.781-1.782,1.781c-1.04,0-1.856-0.78-1.856-1.781
C11.733,39.164,12.55,38.385,13.589,38.385z M39.5,16.639c4.008,0,6.792,3.044,6.792,7.534c0,5.12-2.673,8.202-6.793,8.202
c-2.153,0-3.972-0.89-5.234-2.337c-1.15,1.559-2.932,2.304-5.605,2.304c-0.074,0-0.148-0.031-0.297-0.031h-1.15
c-1.522,0-2.747-0.557-3.6-1.484h-0.15c-0.779,0.927-1.892,1.484-3.377,1.484H7.39c-4.64,0-7.015-4.305-7.015-8.164
c0-4.527,2.115-6.123,4.231-6.123h1.262c0,0-2.635,1.689-2.635,5.436c0,2.005,0.854,5.697,4.194,5.697h11.841
c1.745,0,2.79-0.754,2.79-2.758v-6.705h1.033c1.67,0,2.19,0.674,2.19,2.456c0,1.261-0.036,2.232-0.036,2.974
c0,3.414,0.853,4.033,2.783,4.033h0.594c3.267,0,3.824-1.212,3.824-4.404c0-5.046,2.746-8.114,7.052-8.114L39.5,16.639z
M39.76,29.367c2.263,0,3.525-1.93,3.526-4.638c0-3.34-1.448-5.084-4.084-5.084c-2.227,0-3.674,1.744-3.674,4.601
C35.528,27.364,37.049,29.367,39.76,29.367L39.76,29.367z M54.866,19.694c1.67,0,2.272,0.619,2.272,2.4V34.08
c0,2.45-2.227,4.713-5.16,4.713c-1.522,0-2.635-0.63-2.635-1.707v-0.854c0.371,0.038,0.594,0.075,0.89,0.075
c4.195,0,3.564-2.412,3.564-7.274v-9.34L54.866,19.694L54.866,19.694z M60.769,9.86c0.779,0,1.566,0.693,1.566,1.584v20.867h-1.047
c-1.188,0-1.923-0.68-1.923-2.238V9.86C59.365,9.86,60.769,9.86,60.769,9.86z M88.348,34.563c0.928,0,1.781,0.779,1.781,1.78
c0,1.003-0.853,1.782-1.781,1.782c-1.04,0-1.856-0.78-1.856-1.781C86.492,35.342,87.308,34.563,88.348,34.563z M84.078,34.563
c1.003,0,1.783,0.779,1.783,1.78c0,1.003-0.78,1.782-1.782,1.782s-1.819-0.78-1.819-1.781
C82.26,35.342,83.077,34.563,84.078,34.563L84.078,34.563z M115.222,17.838c1.67,0,2.235,0.62,2.235,2.4v4.899
c0,4.75-2.398,7.165-5.628,7.165c-3.786,0-5.219-1.259-5.404-1.407c-0.891,0.89-2.042,1.416-3.527,1.416h-12.62
c-1.522,0-2.747-0.557-3.6-1.41c-0.891,0.853-2.08,1.41-3.601,1.41h-1.625v-0.016c-1.671-0.036-2.935-0.564-3.4-1.03
c-0.892,0.854-2.325,1.046-4.737,1.046H66.15c-0.891,0-1.59-0.866-1.59-1.645v-1.51h11.018c-0.334-5.01-3.193-9.042-7.424-9.042
c-1.225,0-1.893,0.383-1.893,0.383l0.52-0.965c0.667-1.262,1.893-1.968,3.786-1.968c0,0,1.93-0.003,3.711,1.258
c2.524,1.522,3.935,5.56,4.343,8.64c0.297,1.262,1.337,1.695,2.673,1.695h0.965c1.745,0,2.718-0.754,2.903-2.758v-6.705h0.92
c1.67,0,2.235,0.656,2.235,2.438v4.453c0,1.855,1.069,2.572,2.776,2.572h4.463V17.839h0.994c1.67,0,2.16,0.619,2.16,2.4v8.918h3.37
c1.745,0,2.755-0.754,2.755-2.758v-8.56h1.069c1.67,0,2.195,0.662,2.195,2.443c0,0,0.005,6.45,0.042,6.525
c-0.026,0.512-0.097,1.021-0.212,1.521c1.188,0.706,2.36,0.965,3.361,0.965c2.264,0,2.825-1.187,3.01-2.894v-8.56h0.92
L115.222,17.838z"/>
</g>
</svg>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment