mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
Fix icons for lines that use maki (fixes #1371)
Generate a single feature-icons.json and feature-icons.css. In the JSON, features with a line icon are indicated by the presence of a `line` property. PresetIcon looks for this to determine whether or not to add the `preset-icon-line` class. New line icons may be added by editing line-icons.json.
This commit is contained in:
John Firebaugh
2
Makefile
2
Makefile
@@ -71,7 +71,7 @@ dist/iD.min.js: dist/iD.js Makefile
|
||||
node_modules/.bin/uglifyjs $< -c -m -o $@
|
||||
|
||||
dist/iD.css: css/*.css
|
||||
cat css/reset.css css/map.css css/app.css css/line-presets.css css/maki-sprite.css > $@
|
||||
cat css/reset.css css/map.css css/app.css css/feature-icons.css > $@
|
||||
|
||||
node_modules/.install: package.json
|
||||
npm install && touch node_modules/.install
|
||||
|
||||
2
build.js
2
build.js
@@ -122,7 +122,7 @@ fs.writeFileSync('data/data.js', 'iD.data = ' + stringify({
|
||||
fields: rp('fields.json')
|
||||
},
|
||||
imperial: r('imperial.json'),
|
||||
maki: r('maki-sprite.json'),
|
||||
featureIcons: r('feature-icons.json'),
|
||||
operations: r('operations-sprite.json'),
|
||||
locales: r('locales.json'),
|
||||
en: read('dist/locales/en.json')
|
||||
|
||||
129
css/feature-icons.css
Normal file
129
css/feature-icons.css
Normal file
@@ -0,0 +1,129 @@
|
||||
/* This file is generated by make. Do NOT edit manually. */
|
||||
|
||||
.preset-icon{background-image:url(img/maki-sprite.png);background-repeat:no-repeat;width:24px;height:24px;}
|
||||
.preset-icon-line{background-image:url(img/line-presets.png);background-repeat:no-repeat;width:60px;height:60px;}
|
||||
.feature-airfield{background-position:-0px -34px;}
|
||||
.feature-airport{background-position:-0px -94px;}
|
||||
.feature-alcohol-shop{background-position:-0px -154px;}
|
||||
.feature-america-football{background-position:-0px -214px;}
|
||||
.feature-art-gallery{background-position:-0px -274px;}
|
||||
.feature-bank{background-position:-0px -334px;}
|
||||
.feature-bar{background-position:-0px -394px;}
|
||||
.feature-baseball{background-position:-0px -454px;}
|
||||
.feature-basketball{background-position:-0px -514px;}
|
||||
.feature-beer{background-position:-0px -574px;}
|
||||
.feature-bicycle{background-position:-0px -634px;}
|
||||
.feature-building{background-position:-0px -694px;}
|
||||
.feature-bus{background-position:-0px -754px;}
|
||||
.feature-cafe{background-position:-0px -814px;}
|
||||
.feature-campsite{background-position:-0px -874px;}
|
||||
.feature-cemetery{background-position:-0px -934px;}
|
||||
.feature-cinema{background-position:-0px -994px;}
|
||||
.feature-circle{background-position:-0px -1054px;}
|
||||
.feature-circle-stroked{background-position:-0px -1114px;}
|
||||
.feature-college{background-position:-0px -1174px;}
|
||||
.feature-commercial{background-position:-0px -1234px;}
|
||||
.feature-cricket{background-position:-0px -1294px;}
|
||||
.feature-cross{background-position:-0px -1354px;}
|
||||
.feature-dam{background-position:-0px -1414px;}
|
||||
.feature-danger{background-position:-0px -1474px;}
|
||||
.feature-disability{background-position:-0px -1534px;}
|
||||
.feature-embassy{background-position:-0px -1594px;}
|
||||
.feature-emergency-telephone{background-position:-0px -1654px;}
|
||||
.feature-fast-food{background-position:-0px -1714px;}
|
||||
.feature-ferry{background-position:-0px -1774px;}
|
||||
.feature-fire-station{background-position:-0px -1834px;}
|
||||
.feature-fuel{background-position:-0px -1894px;}
|
||||
.feature-garden{background-position:-0px -1954px;}
|
||||
.feature-golf{background-position:-0px -2014px;}
|
||||
.feature-grocery{background-position:-0px -2074px;}
|
||||
.feature-harbor{background-position:-0px -2134px;}
|
||||
.feature-heliport{background-position:-0px -2194px;}
|
||||
.feature-hospital{background-position:-0px -2254px;}
|
||||
.feature-industrial{background-position:-0px -2314px;}
|
||||
.feature-library{background-position:-0px -2374px;}
|
||||
.feature-lodging{background-position:-0px -2434px;}
|
||||
.feature-logging{background-position:-0px -2494px;}
|
||||
.feature-marker{background-position:-0px -2554px;}
|
||||
.feature-marker-stroked{background-position:-0px -2614px;}
|
||||
.feature-monument{background-position:-0px -2674px;}
|
||||
.feature-museum{background-position:-0px -2734px;}
|
||||
.feature-music{background-position:-0px -2794px;}
|
||||
.feature-oil-well{background-position:-0px -2854px;}
|
||||
.feature-park{background-position:-0px -2914px;}
|
||||
.feature-park2{background-position:-0px -2974px;}
|
||||
.feature-parking{background-position:-0px -3034px;}
|
||||
.feature-parking-garage{background-position:-0px -3094px;}
|
||||
.feature-pharmacy{background-position:-0px -3154px;}
|
||||
.feature-pitch{background-position:-0px -3214px;}
|
||||
.feature-place-of-worship{background-position:-0px -3274px;}
|
||||
.feature-police{background-position:-0px -3334px;}
|
||||
.feature-post{background-position:-0px -3394px;}
|
||||
.feature-prison{background-position:-0px -3454px;}
|
||||
.feature-rail{background-position:-0px -3514px;}
|
||||
.feature-rail-above{background-position:-0px -3574px;}
|
||||
.feature-rail-underground{background-position:-0px -3634px;}
|
||||
.feature-religious-christian{background-position:-0px -3694px;}
|
||||
.feature-religious-jewish{background-position:-0px -3754px;}
|
||||
.feature-religious-muslim{background-position:-0px -3814px;}
|
||||
.feature-restaurant{background-position:-0px -3874px;}
|
||||
.feature-roadblock{background-position:-0px -3934px;}
|
||||
.feature-school{background-position:-0px -3994px;}
|
||||
.feature-shop{background-position:-0px -4054px;}
|
||||
.feature-skiing{background-position:-0px -4114px;}
|
||||
.feature-slaughterhouse{background-position:-0px -4174px;}
|
||||
.feature-soccer{background-position:-0px -4234px;}
|
||||
.feature-square{background-position:-0px -4294px;}
|
||||
.feature-square-stroked{background-position:-0px -4354px;}
|
||||
.feature-star{background-position:-0px -4414px;}
|
||||
.feature-star-stroked{background-position:-0px -4474px;}
|
||||
.feature-swimming{background-position:-0px -4534px;}
|
||||
.feature-telephone{background-position:-0px -4594px;}
|
||||
.feature-tennis{background-position:-0px -4654px;}
|
||||
.feature-theatre{background-position:-0px -4714px;}
|
||||
.feature-toilets{background-position:-0px -4774px;}
|
||||
.feature-town-hall{background-position:-0px -4834px;}
|
||||
.feature-triangle{background-position:-0px -4894px;}
|
||||
.feature-triangle-stroked{background-position:-0px -4954px;}
|
||||
.feature-warehouse{background-position:-0px -5014px;}
|
||||
.feature-waste-basket{background-position:-0px -5074px;}
|
||||
.feature-water{background-position:-0px -5134px;}
|
||||
.feature-wetland{background-position:-0px -5194px;}
|
||||
.feature-zoo{background-position:-0px -5254px;}
|
||||
.preset-icon-line.feature-highway-motorway{background-position:-20px -25px;}
|
||||
.preset-icon-line.feature-highway-trunk{background-position:-80px -25px;}
|
||||
.preset-icon-line.feature-highway-primary{background-position:-140px -25px;}
|
||||
.preset-icon-line.feature-highway-secondary{background-position:-200px -25px;}
|
||||
.preset-icon-line.feature-highway-tertiary{background-position:-260px -25px;}
|
||||
.preset-icon-line.feature-highway-motorway-link{background-position:-320px -25px;}
|
||||
.preset-icon-line.feature-highway-trunk-link{background-position:-380px -25px;}
|
||||
.preset-icon-line.feature-highway-primary-link{background-position:-440px -25px;}
|
||||
.preset-icon-line.feature-highway-secondary-link{background-position:-500px -25px;}
|
||||
.preset-icon-line.feature-highway-tertiary-link{background-position:-560px -25px;}
|
||||
.preset-icon-line.feature-highway-residential{background-position:-620px -25px;}
|
||||
.preset-icon-line.feature-highway-unclassified{background-position:-680px -25px;}
|
||||
.preset-icon-line.feature-highway-service{background-position:-740px -25px;}
|
||||
.preset-icon-line.feature-highway-road{background-position:-800px -25px;}
|
||||
.preset-icon-line.feature-highway-track{background-position:-860px -25px;}
|
||||
.preset-icon-line.feature-highway-living-street{background-position:-920px -25px;}
|
||||
.preset-icon-line.feature-highway-path{background-position:-980px -25px;}
|
||||
.preset-icon-line.feature-highway-cycleway{background-position:-1040px -25px;}
|
||||
.preset-icon-line.feature-highway-footway{background-position:-1100px -25px;}
|
||||
.preset-icon-line.feature-highway-bridleway{background-position:-1160px -25px;}
|
||||
.preset-icon-line.feature-highway-steps{background-position:-1220px -25px;}
|
||||
.preset-icon-line.feature-railway-rail{background-position:-1280px -25px;}
|
||||
.preset-icon-line.feature-railway-disused{background-position:-1340px -25px;}
|
||||
.preset-icon-line.feature-railway-abandoned{background-position:-1400px -25px;}
|
||||
.preset-icon-line.feature-railway-subway{background-position:-1460px -25px;}
|
||||
.preset-icon-line.feature-railway-light-rail{background-position:-1520px -25px;}
|
||||
.preset-icon-line.feature-railway-monorail{background-position:-1580px -25px;}
|
||||
.preset-icon-line.feature-waterway-river{background-position:-1640px -25px;}
|
||||
.preset-icon-line.feature-waterway-stream{background-position:-1700px -25px;}
|
||||
.preset-icon-line.feature-waterway-canal{background-position:-1760px -25px;}
|
||||
.preset-icon-line.feature-waterway-ditch{background-position:-1820px -25px;}
|
||||
.preset-icon-line.feature-power-line{background-position:-1880px -25px;}
|
||||
.preset-icon-line.feature-other-line{background-position:-1940px -25px;}
|
||||
.preset-icon-line.feature-category-roads{background-position:-2000px -25px;}
|
||||
.preset-icon-line.feature-category-rail{background-position:-2060px -25px;}
|
||||
.preset-icon-line.feature-category-path{background-position:-2120px -25px;}
|
||||
.preset-icon-line.feature-category-water{background-position:-2180px -25px;}
|
||||
@@ -1,54 +0,0 @@
|
||||
.preset-line-icon {
|
||||
background-image: url(img/line-presets.png);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
|
||||
/* Roads */
|
||||
.preset-line-icon.highway-motorway { background-position: -20px -25px;}
|
||||
.preset-line-icon.highway-trunk { background-position: -80px -25px;}
|
||||
.preset-line-icon.highway-primary { background-position: -140px -25px;}
|
||||
.preset-line-icon.highway-secondary { background-position: -200px -25px;}
|
||||
.preset-line-icon.highway-tertiary { background-position: -260px -25px;}
|
||||
.preset-line-icon.highway-motorway-link { background-position: -320px -25px;}
|
||||
.preset-line-icon.highway-trunk-link { background-position: -380px -25px;}
|
||||
.preset-line-icon.highway-primary-link { background-position: -440px -25px;}
|
||||
.preset-line-icon.highway-secondary-link { background-position: -500px -25px;}
|
||||
.preset-line-icon.highway-tertiary-link { background-position: -560px -25px;}
|
||||
.preset-line-icon.highway-residential { background-position: -620px -25px;}
|
||||
.preset-line-icon.highway-unclassified { background-position: -680px -25px;}
|
||||
.preset-line-icon.highway-service { background-position: -740px -25px;}
|
||||
.preset-line-icon.highway-road { background-position: -800px -25px;}
|
||||
.preset-line-icon.highway-track { background-position: -860px -25px;}
|
||||
.preset-line-icon.highway-living-street { background-position: -920px -25px;}
|
||||
.preset-line-icon.highway-path { background-position: -980px -25px;}
|
||||
.preset-line-icon.highway-cycleway { background-position: -1040px -25px;}
|
||||
.preset-line-icon.highway-footway { background-position: -1100px -25px;}
|
||||
.preset-line-icon.highway-bridleway { background-position: -1160px -25px;}
|
||||
.preset-line-icon.highway-steps { background-position: -1220px -25px;}
|
||||
|
||||
/* Railway */
|
||||
.preset-line-icon.railway-rail { background-position: -1280px -25px;}
|
||||
.preset-line-icon.railway-disused { background-position: -1340px -25px;}
|
||||
.preset-line-icon.railway-abandoned { background-position: -1400px -25px;}
|
||||
.preset-line-icon.railway-subway { background-position: -1460px -25px;}
|
||||
.preset-line-icon.railway-light-rail { background-position: -1520px -25px;}
|
||||
.preset-line-icon.railway-monorail { background-position: -1580px -25px;}
|
||||
|
||||
/* Waterway */
|
||||
.preset-line-icon.waterway-river { background-position: -1640px -25px;}
|
||||
.preset-line-icon.waterway-stream { background-position: -1700px -25px;}
|
||||
.preset-line-icon.waterway-canal { background-position: -1760px -25px;}
|
||||
.preset-line-icon.waterway-ditch { background-position: -1820px -25px;}
|
||||
|
||||
.preset-line-icon.power-line { background-position: -1880px -25px;}
|
||||
|
||||
.preset-line-icon.other-line { background-position: -1940px -25px;}
|
||||
|
||||
.preset-line-icon.category-roads { background-position: -2000px -25px;}
|
||||
.preset-line-icon.category-rail { background-position: -2060px -25px;}
|
||||
.preset-line-icon.category-path { background-position: -2120px -25px;}
|
||||
.preset-line-icon.category-water { background-position: -2180px -25px;}
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
/* This file is generated by make. Do NOT edit manually. */
|
||||
|
||||
.maki-icon{background-image:url(img/maki-sprite.png);background-repeat:no-repeat;}
|
||||
.maki-airfield{background-position:-0px -34px;width:24px;height:24px;}
|
||||
.maki-airport{background-position:-0px -94px;width:24px;height:24px;}
|
||||
.maki-alcohol-shop{background-position:-0px -154px;width:24px;height:24px;}
|
||||
.maki-america-football{background-position:-0px -214px;width:24px;height:24px;}
|
||||
.maki-art-gallery{background-position:-0px -274px;width:24px;height:24px;}
|
||||
.maki-bank{background-position:-0px -334px;width:24px;height:24px;}
|
||||
.maki-bar{background-position:-0px -394px;width:24px;height:24px;}
|
||||
.maki-baseball{background-position:-0px -454px;width:24px;height:24px;}
|
||||
.maki-basketball{background-position:-0px -514px;width:24px;height:24px;}
|
||||
.maki-beer{background-position:-0px -574px;width:24px;height:24px;}
|
||||
.maki-bicycle{background-position:-0px -634px;width:24px;height:24px;}
|
||||
.maki-building{background-position:-0px -694px;width:24px;height:24px;}
|
||||
.maki-bus{background-position:-0px -754px;width:24px;height:24px;}
|
||||
.maki-cafe{background-position:-0px -814px;width:24px;height:24px;}
|
||||
.maki-campsite{background-position:-0px -874px;width:24px;height:24px;}
|
||||
.maki-cemetery{background-position:-0px -934px;width:24px;height:24px;}
|
||||
.maki-cinema{background-position:-0px -994px;width:24px;height:24px;}
|
||||
.maki-circle{background-position:-0px -1054px;width:24px;height:24px;}
|
||||
.maki-circle-stroked{background-position:-0px -1114px;width:24px;height:24px;}
|
||||
.maki-college{background-position:-0px -1174px;width:24px;height:24px;}
|
||||
.maki-commercial{background-position:-0px -1234px;width:24px;height:24px;}
|
||||
.maki-cricket{background-position:-0px -1294px;width:24px;height:24px;}
|
||||
.maki-cross{background-position:-0px -1354px;width:24px;height:24px;}
|
||||
.maki-dam{background-position:-0px -1414px;width:24px;height:24px;}
|
||||
.maki-danger{background-position:-0px -1474px;width:24px;height:24px;}
|
||||
.maki-disability{background-position:-0px -1534px;width:24px;height:24px;}
|
||||
.maki-embassy{background-position:-0px -1594px;width:24px;height:24px;}
|
||||
.maki-emergency-telephone{background-position:-0px -1654px;width:24px;height:24px;}
|
||||
.maki-fast-food{background-position:-0px -1714px;width:24px;height:24px;}
|
||||
.maki-ferry{background-position:-0px -1774px;width:24px;height:24px;}
|
||||
.maki-fire-station{background-position:-0px -1834px;width:24px;height:24px;}
|
||||
.maki-fuel{background-position:-0px -1894px;width:24px;height:24px;}
|
||||
.maki-garden{background-position:-0px -1954px;width:24px;height:24px;}
|
||||
.maki-golf{background-position:-0px -2014px;width:24px;height:24px;}
|
||||
.maki-grocery{background-position:-0px -2074px;width:24px;height:24px;}
|
||||
.maki-harbor{background-position:-0px -2134px;width:24px;height:24px;}
|
||||
.maki-heliport{background-position:-0px -2194px;width:24px;height:24px;}
|
||||
.maki-hospital{background-position:-0px -2254px;width:24px;height:24px;}
|
||||
.maki-industrial{background-position:-0px -2314px;width:24px;height:24px;}
|
||||
.maki-library{background-position:-0px -2374px;width:24px;height:24px;}
|
||||
.maki-lodging{background-position:-0px -2434px;width:24px;height:24px;}
|
||||
.maki-logging{background-position:-0px -2494px;width:24px;height:24px;}
|
||||
.maki-marker{background-position:-0px -2554px;width:24px;height:24px;}
|
||||
.maki-marker-stroked{background-position:-0px -2614px;width:24px;height:24px;}
|
||||
.maki-monument{background-position:-0px -2674px;width:24px;height:24px;}
|
||||
.maki-museum{background-position:-0px -2734px;width:24px;height:24px;}
|
||||
.maki-music{background-position:-0px -2794px;width:24px;height:24px;}
|
||||
.maki-oil-well{background-position:-0px -2854px;width:24px;height:24px;}
|
||||
.maki-park{background-position:-0px -2914px;width:24px;height:24px;}
|
||||
.maki-park2{background-position:-0px -2974px;width:24px;height:24px;}
|
||||
.maki-parking{background-position:-0px -3034px;width:24px;height:24px;}
|
||||
.maki-parking-garage{background-position:-0px -3094px;width:24px;height:24px;}
|
||||
.maki-pharmacy{background-position:-0px -3154px;width:24px;height:24px;}
|
||||
.maki-pitch{background-position:-0px -3214px;width:24px;height:24px;}
|
||||
.maki-place-of-worship{background-position:-0px -3274px;width:24px;height:24px;}
|
||||
.maki-police{background-position:-0px -3334px;width:24px;height:24px;}
|
||||
.maki-post{background-position:-0px -3394px;width:24px;height:24px;}
|
||||
.maki-prison{background-position:-0px -3454px;width:24px;height:24px;}
|
||||
.maki-rail{background-position:-0px -3514px;width:24px;height:24px;}
|
||||
.maki-rail-above{background-position:-0px -3574px;width:24px;height:24px;}
|
||||
.maki-rail-underground{background-position:-0px -3634px;width:24px;height:24px;}
|
||||
.maki-religious-christian{background-position:-0px -3694px;width:24px;height:24px;}
|
||||
.maki-religious-jewish{background-position:-0px -3754px;width:24px;height:24px;}
|
||||
.maki-religious-muslim{background-position:-0px -3814px;width:24px;height:24px;}
|
||||
.maki-restaurant{background-position:-0px -3874px;width:24px;height:24px;}
|
||||
.maki-roadblock{background-position:-0px -3934px;width:24px;height:24px;}
|
||||
.maki-school{background-position:-0px -3994px;width:24px;height:24px;}
|
||||
.maki-shop{background-position:-0px -4054px;width:24px;height:24px;}
|
||||
.maki-skiing{background-position:-0px -4114px;width:24px;height:24px;}
|
||||
.maki-slaughterhouse{background-position:-0px -4174px;width:24px;height:24px;}
|
||||
.maki-soccer{background-position:-0px -4234px;width:24px;height:24px;}
|
||||
.maki-square{background-position:-0px -4294px;width:24px;height:24px;}
|
||||
.maki-square-stroked{background-position:-0px -4354px;width:24px;height:24px;}
|
||||
.maki-star{background-position:-0px -4414px;width:24px;height:24px;}
|
||||
.maki-star-stroked{background-position:-0px -4474px;width:24px;height:24px;}
|
||||
.maki-swimming{background-position:-0px -4534px;width:24px;height:24px;}
|
||||
.maki-telephone{background-position:-0px -4594px;width:24px;height:24px;}
|
||||
.maki-tennis{background-position:-0px -4654px;width:24px;height:24px;}
|
||||
.maki-theatre{background-position:-0px -4714px;width:24px;height:24px;}
|
||||
.maki-toilets{background-position:-0px -4774px;width:24px;height:24px;}
|
||||
.maki-town-hall{background-position:-0px -4834px;width:24px;height:24px;}
|
||||
.maki-triangle{background-position:-0px -4894px;width:24px;height:24px;}
|
||||
.maki-triangle-stroked{background-position:-0px -4954px;width:24px;height:24px;}
|
||||
.maki-warehouse{background-position:-0px -5014px;width:24px;height:24px;}
|
||||
.maki-waste-basket{background-position:-0px -5074px;width:24px;height:24px;}
|
||||
.maki-water{background-position:-0px -5134px;width:24px;height:24px;}
|
||||
.maki-wetland{background-position:-0px -5194px;width:24px;height:24px;}
|
||||
.maki-zoo{background-position:-0px -5254px;width:24px;height:24px;}
|
||||
@@ -14,7 +14,7 @@ iD.data = {
|
||||
path + 'data/presets/categories.json',
|
||||
path + 'data/presets/fields.json',
|
||||
path + 'data/imperial.json',
|
||||
path + 'data/maki-sprite.json',
|
||||
path + 'data/feature-icons.json',
|
||||
path + 'data/operations-sprite.json',
|
||||
path + 'data/locales.json',
|
||||
path + 'dist/locales/en.json'
|
||||
@@ -32,7 +32,7 @@ iD.data = {
|
||||
fields: data[7]
|
||||
},
|
||||
imperial: data[8],
|
||||
maki: data[9],
|
||||
featureIcons: data[9],
|
||||
operations: data[10],
|
||||
locales: data[11],
|
||||
en: data[12]
|
||||
|
||||
File diff suppressed because one or more lines are too long
44
data/line-icons.json
Normal file
44
data/line-icons.json
Normal file
@@ -0,0 +1,44 @@
|
||||
{
|
||||
"highway-motorway": [20, 25],
|
||||
"highway-trunk": [80, 25],
|
||||
"highway-primary": [140, 25],
|
||||
"highway-secondary": [200, 25],
|
||||
"highway-tertiary": [260, 25],
|
||||
"highway-motorway-link": [320, 25],
|
||||
"highway-trunk-link": [380, 25],
|
||||
"highway-primary-link": [440, 25],
|
||||
"highway-secondary-link": [500, 25],
|
||||
"highway-tertiary-link": [560, 25],
|
||||
"highway-residential": [620, 25],
|
||||
"highway-unclassified": [680, 25],
|
||||
"highway-service": [740, 25],
|
||||
"highway-road": [800, 25],
|
||||
"highway-track": [860, 25],
|
||||
"highway-living-street": [920, 25],
|
||||
"highway-path": [980, 25],
|
||||
"highway-cycleway": [1040, 25],
|
||||
"highway-footway": [1100, 25],
|
||||
"highway-bridleway": [1160, 25],
|
||||
"highway-steps": [1220, 25],
|
||||
|
||||
"railway-rail": [1280, 25],
|
||||
"railway-disused": [1340, 25],
|
||||
"railway-abandoned": [1400, 25],
|
||||
"railway-subway": [1460, 25],
|
||||
"railway-light-rail": [1520, 25],
|
||||
"railway-monorail": [1580, 25],
|
||||
|
||||
"waterway-river": [1640, 25],
|
||||
"waterway-stream": [1700, 25],
|
||||
"waterway-canal": [1760, 25],
|
||||
"waterway-ditch": [1820, 25],
|
||||
|
||||
"power-line": [1880, 25],
|
||||
|
||||
"other-line": [1940, 25],
|
||||
|
||||
"category-roads": [2000, 25],
|
||||
"category-rail": [2060, 25],
|
||||
"category-path": [2120, 25],
|
||||
"category-water": [2180, 25]
|
||||
}
|
||||
@@ -1,8 +1,10 @@
|
||||
var fs = require('fs');
|
||||
var path = require('path');
|
||||
var sprite = require('node-sprite');
|
||||
var _ = require('../js/lib/lodash');
|
||||
|
||||
var makipath = './node_modules/maki';
|
||||
var lineIcons = require('./line-icons.json');
|
||||
|
||||
sprite.sprite('renders', { path: makipath }, function(err, makiSprite) {
|
||||
if (err) process.exit(1);
|
||||
@@ -11,30 +13,38 @@ sprite.sprite('renders', { path: makipath }, function(err, makiSprite) {
|
||||
fs.renameSync(path.join(makipath, makiSprite.filename()), './dist/img/maki-sprite.png');
|
||||
|
||||
// Generate CSS
|
||||
var template = '.maki-{name}{background-position:{x} {y};width:{w};height:{h};}\n';
|
||||
var template = '.feature-{name}{background-position:-{x}px -{y}px;}\n';
|
||||
var css = "/* This file is generated by make. Do NOT edit manually. */\n\n";
|
||||
css += ".maki-icon{background-image:url(img/maki-sprite.png);background-repeat:no-repeat;}\n";
|
||||
css += ".preset-icon{background-image:url(img/maki-sprite.png);background-repeat:no-repeat;width:24px;height:24px;}\n";
|
||||
css += ".preset-icon-line{background-image:url(img/line-presets.png);background-repeat:no-repeat;width:60px;height:60px;}\n";
|
||||
|
||||
makiSprite.images.forEach(function(image) {
|
||||
if (image.width !== 24) return;
|
||||
css += template.replace('{name}', image.name.replace('-24', ''))
|
||||
.replace('{x}', '-' + image.positionX + 'px')
|
||||
.replace('{y}', '-' + image.positionY + 'px')
|
||||
.replace('{w}', image.width + 'px')
|
||||
.replace('{h}', image.height + 'px');
|
||||
});
|
||||
|
||||
fs.writeFileSync('./css/maki-sprite.css', css);
|
||||
|
||||
// Generate JSON
|
||||
var images = {};
|
||||
|
||||
makiSprite.images.forEach(function(image) {
|
||||
var match = image.name.match(/(.*)-(12|18|24)/),
|
||||
name = match[1],
|
||||
size = match[2],
|
||||
group = images[name] = images[name] || {};
|
||||
group[size] = [image.positionX, image.positionY];
|
||||
|
||||
if (image.width === 24) {
|
||||
css += template.replace('{name}', image.name.replace('-24', ''))
|
||||
.replace('{x}', image.positionX)
|
||||
.replace('{y}', image.positionY);
|
||||
}
|
||||
});
|
||||
|
||||
fs.writeFileSync('./data/maki-sprite.json', JSON.stringify(images));
|
||||
template = '.preset-icon-line.feature-{name}{background-position:-{x}px -{y}px;}\n';
|
||||
|
||||
_.forEach(lineIcons, function(position, name) {
|
||||
css += template.replace('{name}', name)
|
||||
.replace('{x}', position[0])
|
||||
.replace('{y}', position[1]);
|
||||
|
||||
images[name] = images[name] || {};
|
||||
images[name].line = position;
|
||||
});
|
||||
|
||||
fs.writeFileSync('./css/feature-icons.css', css);
|
||||
fs.writeFileSync('./data/feature-icons.json', JSON.stringify(images));
|
||||
});
|
||||
|
||||
BIN
dist/img/maki-sprite.png
vendored
BIN
dist/img/maki-sprite.png
vendored
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 82 KiB |
@@ -6,8 +6,7 @@
|
||||
<link rel='stylesheet' href='css/reset.css'>
|
||||
<link rel='stylesheet' href='css/map.css'>
|
||||
<link rel='stylesheet' href='css/app.css'>
|
||||
<link rel='stylesheet' href='css/line-presets.css'>
|
||||
<link rel='stylesheet' href='css/maki-sprite.css'>
|
||||
<link rel='stylesheet' href='css/feature-icons.css'>
|
||||
|
||||
<!-- mobile devices -->
|
||||
<meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
|
||||
|
||||
@@ -90,10 +90,12 @@ iD.svg.Surface = function(context) {
|
||||
.attr('height', function(d) { return d; });
|
||||
|
||||
var maki = [];
|
||||
_.forEach(iD.data.maki, function(dimensions, name) {
|
||||
maki.push({key: 'maki-' + name + '-12', value: dimensions['12']});
|
||||
maki.push({key: 'maki-' + name + '-18', value: dimensions['18']});
|
||||
maki.push({key: 'maki-' + name + '-24', value: dimensions['24']});
|
||||
_.forEach(iD.data.featureIcons, function(dimensions, name) {
|
||||
if (dimensions['12'] && dimensions['18'] && dimensions['24']) {
|
||||
maki.push({key: 'maki-' + name + '-12', value: dimensions['12']});
|
||||
maki.push({key: 'maki-' + name + '-18', value: dimensions['18']});
|
||||
maki.push({key: 'maki-' + name + '-24', value: dimensions['24']});
|
||||
}
|
||||
});
|
||||
|
||||
defs.call(SpriteDefinition(
|
||||
|
||||
@@ -13,9 +13,15 @@ iD.ui.PresetIcon = function(geometry) {
|
||||
|
||||
selection.append('div')
|
||||
.attr('class', function(preset) {
|
||||
return (geometry === 'line' ? 'preset-line-icon ' : 'maki-icon maki-') +
|
||||
(preset.icon || fallbackIcon) +
|
||||
' preset-icon preset-icon-' + geometry;
|
||||
var icon = preset.icon || fallbackIcon,
|
||||
klass = 'feature-' + icon + ' preset-icon';
|
||||
|
||||
icon = iD.data.featureIcons[icon];
|
||||
if (geometry === 'line' && icon && icon.line) {
|
||||
klass += ' preset-icon-line';
|
||||
}
|
||||
|
||||
return klass;
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user