Skip to content

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

Added CedarMaps geocoder and geocoder control

parent fcd8bf50
Show whitespace changes
Inline Side-by-side
Showing with 341 additions and 25 deletions
demos/geocoder-control.html 0 → 100644
View file @ f720b3c3
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Reverse Geocoding Testing Environment</title>
<script src='../dist/v1.0.0/cedarmaps.js'></script>
<script src='../access-token.js'></script>
<link href='../dist/v1.0.0/cedarmaps.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>
<script>
window.L.Icon.Default.imagePath = '../dist/v1.0.0/images/images';
try {
L.cedarmaps.accessToken = accessToken;
} catch (err) {
throw new Error('You need to get an access token to be able to use cedarmaps SDK. ' +
'Send us an email to <info@cedar.ir>');
}
var tileJSONUrl = 'http://api.cedarmaps.com/v1/tiles/cedarmaps.streets.json?access_token=' + L.cedarmaps.accessToken,
marker;
// Initializing our map
var map = L.cedarmaps.map('map', tileJSONUrl, {
scrollWheelZoom: true,
maxZoom: 17
}).addControl(L.cedarmaps.geocoderControl('cedarmaps.streets', {
keepOpen: true,
autocomplete: true
})).setView([35.757552763570196, 51.41000747680664], 15);
</script>
</body>
</html>
src/cedarmaps.js
View file @ f720b3c3
'use strict'; 'use strict';
var map = require('./map'), var map = require('./map'),
tileLayer = require('./tile_layer'); tileLayer = require('./tile_layer'),
geocoderControl = require('./geocoder_control');
L.cedarmaps = L.mapbox; L.cedarmaps = L.mapbox;
...@@ -12,6 +13,8 @@ L.cedarmaps.map = map.map; ...@@ -12,6 +13,8 @@ L.cedarmaps.map = map.map;
L.cedarmaps.Map = map.Map; L.cedarmaps.Map = map.Map;
L.cedarmaps.tileLayer = tileLayer.tileLayer; L.cedarmaps.tileLayer = tileLayer.tileLayer;
L.cedarmaps.TileLayer = tileLayer.TileLayer; L.cedarmaps.TileLayer = tileLayer.TileLayer;
L.cedarmaps.geocoderControl = geocoderControl.geocoderControl;
L.cedarmaps.GeocoderControl = geocoderControl.GeocoderControl;
module.exports = L.cedarmaps; module.exports = L.cedarmaps;
......
src/geocoder.js
View file @ f720b3c3
...@@ -41,21 +41,8 @@ module.exports = function(url, options) { ...@@ -41,21 +41,8 @@ module.exports = function(url, options) {
geocoder.query = function(_, callback) { geocoder.query = function(_, callback) {
util.strict(callback, 'function'); util.strict(callback, 'function');
request(geocoder.queryURL(_), function(err, json) { request(geocoder.queryURL(_), function(err, json) {
if (json && (json.length || json.features)) { if (json && (json.length || json.results)) {
var res = { callback(null, json);
results: json
};
if (json.features && json.features.length) {
res.latlng = [
json.features[0].center[1],
json.features[0].center[0]];
if (json.features[0].bbox) {
res.bounds = json.features[0].bbox;
res.lbounds = util.lbounds(res.bounds);
}
}
callback(null, res);
} else callback(err || true); } else callback(err || true);
}); });
......
src/geocoder_control.js 0 → 100644
View file @ f720b3c3
'use strict';
var geocoder = require('./geocoder'),
util = require('../mapbox.js/src/util');
var GeocoderControl = L.Control.extend({
includes: L.Mixin.Events,
options: {
position: 'topright',
pointZoom: 16,
keepOpen: false,
autocomplete: false
},
initialize: function(_, options) {
L.Util.setOptions(this, options);
this.setURL(_);
this._updateSubmit = L.bind(this._updateSubmit, this);
this._updateAutocomplete = L.bind(this._updateAutocomplete, this);
this._chooseResult = L.bind(this._chooseResult, this);
},
setURL: function(_) {
this.geocoder = geocoder(_, {accessToken: this.options.accessToken});
return this;
},
getURL: function() {
return this.geocoder.getURL();
},
setID: function(_) {
return this.setURL(_);
},
setTileJSON: function(_) {
return this.setURL(_.geocoder);
},
_toggle: function(e) {
if (e) L.DomEvent.stop(e);
if (L.DomUtil.hasClass(this._container, 'active')) {
L.DomUtil.removeClass(this._container, 'active');
this._results.innerHTML = '';
this._input.blur();
} else {
L.DomUtil.addClass(this._container, 'active');
this._input.focus();
this._input.select();
}
},
_closeIfOpen: function(e) {
if (L.DomUtil.hasClass(this._container, 'active') &&
!this.options.keepOpen) {
L.DomUtil.removeClass(this._container, 'active');
this._results.innerHTML = '';
this._input.blur();
}
},
onAdd: function(map) {
var container = L.DomUtil.create('div', 'leaflet-control-mapbox-geocoder leaflet-bar leaflet-control'),
link = L.DomUtil.create('a', 'leaflet-control-mapbox-geocoder-toggle mapbox-icon mapbox-icon-geocoder', container),
results = L.DomUtil.create('div', 'leaflet-control-mapbox-geocoder-results', container),
wrap = L.DomUtil.create('div', 'leaflet-control-mapbox-geocoder-wrap', container),
form = L.DomUtil.create('form', 'leaflet-control-mapbox-geocoder-form', wrap),
input = L.DomUtil.create('input', '', form);
link.href = '#';
link.innerHTML = '&nbsp;';
input.type = 'text';
input.setAttribute('placeholder', 'Search');
L.DomEvent.addListener(form, 'submit', this._geocode, this);
L.DomEvent.addListener(input, 'keyup', this._autocomplete, this);
L.DomEvent.disableClickPropagation(container);
this._map = map;
this._results = results;
this._input = input;
this._form = form;
if (this.options.keepOpen) {
L.DomUtil.addClass(container, 'active');
} else {
this._map.on('click', this._closeIfOpen, this);
L.DomEvent.addListener(link, 'click', this._toggle, this);
}
return container;
},
_updateSubmit: function(err, resp) {
L.DomUtil.removeClass(this._container, 'searching');
this._results.innerHTML = '';
if (err || !resp) {
this.fire('error', {error: err});
} else {
var features = [];
if (resp.results && resp.results.length) {
features = resp.results;
}
if (features.length === 1) {
this.fire('autoselect', { feature: features[0] });
this.fire('found', {results: resp.results});
this._chooseResult(features[0]);
this._closeIfOpen();
} else if (features.length > 1) {
this.fire('found', {results: resp.results});
this._displayResults(features);
} else {
this._displayResults(features);
}
}
},
_updateAutocomplete: function(err, resp) {
this._results.innerHTML = '';
if (err || !resp) {
this.fire('error', {error: err});
} else {
var features = [];
if (resp.results && resp.results.length) {
features = resp.results;
}
if (features.length) {
this.fire('found', {results: resp.results});
}
this._displayResults(features);
}
},
_displayResults: function(features) {
for (var i = 0, l = Math.min(features.length, 10); i < l; i++) {
var feature = features[i];
var name = feature.name;
var address = feature.address;
if (!name.length) continue;
var r = L.DomUtil.create('a', '', this._results);
var meta = L.DomUtil.create('span', 'meta');
var nameText = ('innerText' in r) ? 'innerText' : 'textContent';
var addressText = ('innerText' in meta) ? 'innerText' : 'textContent';
meta[addressText] = address;
r[nameText] = name;
r.appendChild(meta);
r.href = '#';
(L.bind(function(feature) {
L.DomEvent.addListener(r, 'click', function(e) {
this._chooseResult(feature);
L.DomEvent.stop(e);
this.fire('select', { feature: feature });
}, this);
}, this))(feature);
}
if (features.length > 10) {
var outof = L.DomUtil.create('span', '', this._results);
outof.innerHTML = 'Top 10 of ' + features.length + ' results';
}
},
_chooseResult: function(result) {
if (result.location.bb) {
this._map.fitBounds(L.latLngBounds(
[result.location.bb.ne.split(',')[0], result.location.bb.ne.split(',')[1]],
[result.location.bb.sw.split(',')[0], result.location.bb.sw.split(',')[1]]
));
} else if (result.location.center) {
this._map.setView([result.location.center[1], result.location.center[0]], (this._map.getZoom() === undefined) ?
this.options.pointZoom :
Math.max(this._map.getZoom(), this.options.pointZoom));
}
},
_geocode: function(e) {
L.DomEvent.preventDefault(e);
if (this._input.value === '') return this._updateSubmit();
L.DomUtil.addClass(this._container, 'searching');
this.geocoder.query(this._input.value, this._updateSubmit);
},
_autocomplete: function(e) {
if (!this.options.autocomplete) return;
if (this._input.value === '') return this._updateAutocomplete();
this.geocoder.query(this._input.value, this._updateAutocomplete);
}
});
module.exports.GeocoderControl = GeocoderControl;
module.exports.geocoderControl = function(_, options) {
return new GeocoderControl(_, options);
};
theme/style.css
View file @ f720b3c3
.mapbox-logo.leaflet-control { .mapbox-logo.leaflet-control {
margin-bottom: 0 margin-bottom: 0
} }
/**
* Geocoder Control
*/
.leaflet-control-mapbox-geocoder .leaflet-control-mapbox-geocoder-form input {
background: transparent;
border: 0;
width: 180px;
padding: 0 10px 0 0;
height: 26px;
outline: none;
direction: rtl;
text-align: right;
}
.leaflet-control-mapbox-geocoder-results a,
.leaflet-control-mapbox-geocoder-results span {
padding:0 10px;
text-overflow:ellipsis;
white-space:nowrap;
display:block;
width:100%;
font-size:12px;
line-height:26px;
text-align:left;
overflow:visible;
direction: rtl;
text-align: right;
}
.leaflet-control-mapbox-geocoder-results span.meta {
color: #ccc;
display: inline-block;
}
/* CedarMaps Logo /* CedarMaps Logo
------------------------------------------------------- */ ------------------------------------------------------- */
.cedarmaps-logo-true:before { .cedarmaps-logo-true:before {
content:''; content: '';
display:inline-block; display: inline-block;
width:158px; width: 158px;
height:22px; height: 22px;
vertical-align:middle; vertical-align: middle;
} }
.cedarmaps-logo-true { .cedarmaps-logo-true {
display: block; display: block;
background-repeat:no-repeat; background-repeat: no-repeat;
background-size:158px 22px; background-size: 158px 22px;
width:158px; width: 158px;
height:22px; height: 22px;
background-image: url(data:image/png;base64,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); background-image: url(data:image/png;base64,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);
cursor: pointer; cursor: pointer;
} }
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