0x2620/oxjs
2
0
Fork 2
Code Issues 172 Pull requests Releases Wiki Activity

geo/map bugfixes

Browse source
This commit is contained in:
rolux 2011-11-24 19:38:10 +01:00
commit dfd2787438
14 changed files with 892 additions and 809 deletions
Download patch file Download diff file Expand all files Collapse all files

5
demos/listmap/index.html
View file

@ -1,10 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<title>ox.js listmap demo</title
<title>OxJS ListMap Demo</title
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="../../build/Ox.js"></script>
<script type="text/javascript" src="../../source/_/ox.map.js"></script>
<script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/listmap.js"></script>
</head>
<body>

109
demos/listmap/js/listmap.js
View file

@ -1,52 +1,71 @@
Ox.load('UI', {
debug: true,
theme: 'modern'
}, function() {
Ox.load({UI: {}, Geo: {}}, function() {
Ox.load('Geo', function() {
var markerColor = {
'Northern America': [64, 64, 255],
'Central America': [0, 0, 255],
'Caribbean': [0, 0, 128],
'Southern America': [0, 255, 0],
'Northern Europe': [255, 255, 192],
'Western Europe': [255, 255, 0],
'Eastern Europe': [255, 128, 0],
'Southern Europe': [128, 128, 0],
'Northern Africa': [128, 128, 128],
'Western Africa': [64, 64, 128],
'Middle Africa': [64, 64, 64],
'Eastern Africa': [128, 64, 64],
'Southern Africa': [64, 128, 64],
'Western Asia': [255, 128, 128],
'Central Asia': [255, 0, 0],
'Eastern Asia': [128, 0, 0],
'Southern Asia': [255, 0, 255],
'South-Eastern Asia': [128, 0, 128],
'Australia and New Zealand': [0, 128, 128],
'Micronesia': [192, 255, 255],
'Melanesia': [0, 255, 255],
'Polynesia': [128, 128, 255],
'Antarctica': [192, 192, 192]
},
var listmap = new Ox.ListMap({
height: window.innerHeight,
places: Ox.map(Ox.COUNTRIES, function(place) {
return {
alternativeNames: place.googleName ? [place.googleName] : [],
area: place.area,
countryCode: place.code,
editable: true,
flag: place.code,
geoname: place.name,
id: place.code,
name: place.name,
type: 'country',
lat: place.lat,
lng: place.lng,
south: place.south,
west: place.west,
north: place.north,
east: place.east
};
}),
showTypes: true,
width: window.innerWidth
})
.bindEvent({
geocode: function(event, data) {
Ox.print(event)
Ox.print(JSON.stringify(data))
}
})
.appendTo(Ox.UI.$body);
$listmap = new Ox.ListMap({
height: window.innerHeight,
places: Ox.COUNTRIES.map(function(place) {
return {
alternativeNames: Ox.compact([place.google, place.imdb, place.wikipedia]),
area: place.area,
countryCode: place.code,
editable: true,
flag: place.code,
geoname: place.name,
id: place.code,
markerColor: markerColor[place.region] || [128,128,128],
name: place.name,
type: 'country',
lat: place.lat,
lng: place.lng,
south: place.south,
west: place.west,
north: place.north,
east: place.east
};
}),
width: window.innerWidth
})
.bindEvent({
geocode: function(event, data) {
Ox.print(event)
Ox.print(JSON.stringify(data))
}
})
.appendTo(Ox.UI.$body);
$(window).resize(function() {
Ox.print('RESIZE', window.innerHeight)
listmap.options({
height: window.innerHeight,
width: window.innerWidth
});
$(window).resize(function() {
Ox.print('RESIZE', window.innerHeight)
$listmap.options({
height: window.innerHeight,
width: window.innerWidth
});
window.listmap = listmap;
});
window.$listmap = $listmap;
});

40
demos/listmap2/js/listmap.js
View file

@ -1,36 +1,33 @@
Ox.load('UI', {
Ox.load({UI: {
debug: true,
hideScreen: true,
showScreen: true,
theme: 'modern'
}, function() {
Ox.load('Geo', function() {
}, Geo: {}}, function() {
Ox.getJSON('json/cities50000.json', function(cities) {
var places = cities.map(function(city, i) {
var countryCode = city.country_code == 'XK' ? 'RS-KO' : city.country_code,
marker = city.population > 10000000 ? {size: 24, color: [255, 0, 0]} :
city.population > 5000000 ? {size: 22, color: [255, 32, 0]} :
city.population > 2000000 ? {size: 20, color: [255, 64, 0]} :
city.population > 1000000 ? {size: 18, color: [255, 96, 0]} :
city.population > 500000 ? {size: 16, color: [255, 128, 0]} :
city.population > 200000 ? {size: 14, color: [255, 160, 0]} :
city.population > 100000 ? {size: 12, color: [255, 192, 0]} :
city.population > 50000 ? {size: 10, color: [255, 224, 0]} :
{size: 8, color: [255, 255, 0]},
area = Math.max(city.population, 1) * 100,
var area = Math.max(city.population, 1) * 100,
geoname = city.name + ', ' + Ox.getCountryByCode(city.country_code).name,
latSize = Math.sqrt(area) / Ox.EARTH_CIRCUMFERENCE * 360,
lngSize = Math.sqrt(area) * Ox.getDegreesPerMeter(city.latitude);
lngSize = Math.sqrt(area) * Ox.getDegreesPerMeter(city.latitude),
marker = city.population > 10000000 ? {size: 24, color: [255, 0, 0]}
: city.population > 5000000 ? {size: 22, color: [255, 32, 0]}
: city.population > 2000000 ? {size: 20, color: [255, 64, 0]}
: city.population > 1000000 ? {size: 18, color: [255, 96, 0]}
: city.population > 500000 ? {size: 16, color: [255, 128, 0]}
: city.population > 200000 ? {size: 14, color: [255, 160, 0]}
: city.population > 100000 ? {size: 12, color: [255, 192, 0]}
: city.population > 50000 ? {size: 10, color: [255, 224, 0]}
: {size: 8, color: [255, 255, 0]};
return {
alternativeNames: [],
area: area,
countryCode: countryCode,
countryCode: city.country_code,
editable: true,
flag: countryCode,
geoname: city.name + ', ' + Ox.getCountryByCode(countryCode).name,
geonameSort: getGeonameSort(city.name + ', ' + Ox.getCountryByCode(countryCode).name),
geoname: geoname,
geonameSort: getGeonameSort(geoname),
id: Ox.encodeBase32(Ox.uid()),
markerColor: marker.color,
markerSize: marker.size,
@ -206,6 +203,5 @@ Ox.load('Geo', function() {
}
});
});
});