diff --git a/Makefile b/Makefile index f3c230dda..dabf0639b 100644 --- a/Makefile +++ b/Makefile @@ -1,31 +1,30 @@ # See the README for installation instructions. all: \ - $(MAKI_TARGETS) \ $(BUILDJS_TARGETS) \ dist/iD.css \ dist/iD.js \ dist/iD.min.js \ - dist/img/iD-sprite.svg + dist/img/iD-sprite.svg \ + dist/img/maki-sprite.svg -MAKI_TARGETS = \ - css/feature-icons.css \ - data/feature-icons.json -MAKI_SOURCES = \ - node_modules/maki/www/maki-sprite.json \ - dist/img/maki-sprite.png - -$(MAKI_TARGETS): $(MAKI_SOURCES) data/maki_sprite.js - node data/maki_sprite.js +MAKI_SOURCES = node_modules/maki/src/*.svg +MAKI_SPRITE = svg/maki-sprite.src.svg $(MAKI_SOURCES): node_modules/.install -dist/img/maki-sprite.png: node_modules/maki/www/images/maki-sprite.png - cp $< $@ +$(MAKI_SPRITE): $(MAKI_SOURCES) Makefile + svg-sprite --symbol --symbol-inline --symbol-dest . --symbol-sprite $(MAKI_SPRITE) $(MAKI_SOURCES) -dist/img/iD-sprite.svg: svg/iD-sprite.svg svg/iD-sprite.json - node svg/spriteify.js --svg svg/iD-sprite.svg --json svg/iD-sprite.json > dist/img/iD-sprite.svg +data/feature-icons.json: $(MAKI_SOURCES) + cp -f node_modules/maki/www/maki-sprite.json $@ + +dist/img/maki-sprite.svg: $(MAKI_SPRITE) $(MAKI_SOURCES) + node svg/spriteify.js --svg $(MAKI_SPRITE) > $@ + +dist/img/iD-sprite.svg: svg/iD-sprite.src.svg svg/iD-sprite.json + node svg/spriteify.js --svg svg/iD-sprite.src.svg --json svg/iD-sprite.json > $@ BUILDJS_TARGETS = \ data/presets/categories.json \ @@ -40,6 +39,7 @@ BUILDJS_TARGETS = \ BUILDJS_SOURCES = \ $(filter-out $(BUILDJS_TARGETS), $(shell find data -type f -name '*.json')) \ + data/feature-icons.json \ data/core.yaml $(BUILDJS_TARGETS): $(BUILDJS_SOURCES) build.js @@ -107,14 +107,14 @@ dist/iD.min.js: dist/iD.js Makefile @rm -f $@ node_modules/.bin/uglifyjs $< -c -m -o $@ -dist/iD.css: $(MAKI_TARGETS) css/*.css - cat css/reset.css css/map.css css/app.css css/feature-icons.css > $@ +dist/iD.css: css/*.css + cat css/reset.css css/map.css css/app.css > $@ node_modules/.install: package.json npm install && touch node_modules/.install clean: - rm -f $(MAKI_TARGETS) $(BUILDJS_TARGETS) dist/iD*.js dist/iD.css + rm -f $(BUILDJS_TARGETS) $(MAKI_SPRITE) data/feature-icons.json dist/iD*.js dist/iD.css dist/img/*.svg translations: node data/update_locales diff --git a/css/app.css b/css/app.css index 2b9d865b5..5f2cf7d54 100644 --- a/css/app.css +++ b/css/app.css @@ -801,17 +801,10 @@ button.save.has-count .count::before { background: #ececec; } -.preset-icon { - position: absolute; - top: 0px; - left: 0px; - margin: auto; -} - .preset-icon-fill-area { cursor: inherit; - height: 39px; - width: 39px; + height: 40px; + width: 40px; margin: auto; position: absolute; left: 10px; @@ -822,17 +815,38 @@ button.save.has-count .count::before { position: absolute; top: 7px; left: 7px; + height: 42px; + width: 42px; margin: auto; } -.preset-icon .icon { +.preset-icon-frame .icon { + width: 46px; + height: 46px; +} + +.preset-icon-60 { + position: absolute; + top: 0px; + left: 0px; + margin: auto; +} + +.preset-icon-60 .icon { width: 60px; height: 60px; } -.preset-icon-frame .icon { - width: 45px; - height: 45px; +.preset-icon-32 { + position: absolute; + top: 14px; + left: 14px; + margin: auto; +} + +.preset-icon-32 .icon { + width: 32px; + height: 32px; } .preset-list-button .label { diff --git a/css/feature-icons.css b/css/feature-icons.css deleted file mode 100644 index bf5542f0b..000000000 --- a/css/feature-icons.css +++ /dev/null @@ -1,118 +0,0 @@ -/* This file is generated by make. Do NOT edit manually. */ - -.feature-circle-stroked{background-position:-0px -0px;} -.feature-circle{background-position:-54px -0px;} -.feature-square-stroked{background-position:-108px -0px;} -.feature-square{background-position:-162px -0px;} -.feature-triangle-stroked{background-position:-216px -0px;} -.feature-triangle{background-position:-0px -24px;} -.feature-star-stroked{background-position:-54px -24px;} -.feature-star{background-position:-108px -24px;} -.feature-cross{background-position:-162px -24px;} -.feature-marker-stroked{background-position:-216px -24px;} -.feature-marker{background-position:-0px -48px;} -.feature-religious-jewish{background-position:-54px -48px;} -.feature-religious-christian{background-position:-108px -48px;} -.feature-religious-muslim{background-position:-162px -48px;} -.feature-cemetery{background-position:-216px -48px;} -.feature-rocket{background-position:-0px -72px;} -.feature-airport{background-position:-54px -72px;} -.feature-heliport{background-position:-108px -72px;} -.feature-rail{background-position:-162px -72px;} -.feature-rail-metro{background-position:-216px -72px;} -.feature-rail-light{background-position:-0px -96px;} -.feature-bus{background-position:-54px -96px;} -.feature-fuel{background-position:-108px -96px;} -.feature-parking{background-position:-162px -96px;} -.feature-parking-garage{background-position:-216px -96px;} -.feature-airfield{background-position:-0px -120px;} -.feature-roadblock{background-position:-54px -120px;} -.feature-ferry{background-position:-108px -120px;} -.feature-harbor{background-position:-162px -120px;} -.feature-bicycle{background-position:-216px -120px;} -.feature-park{background-position:-0px -144px;} -.feature-park2{background-position:-54px -144px;} -.feature-museum{background-position:-108px -144px;} -.feature-lodging{background-position:-162px -144px;} -.feature-monument{background-position:-216px -144px;} -.feature-zoo{background-position:-0px -168px;} -.feature-garden{background-position:-54px -168px;} -.feature-campsite{background-position:-108px -168px;} -.feature-theatre{background-position:-162px -168px;} -.feature-art-gallery{background-position:-216px -168px;} -.feature-pitch{background-position:-0px -192px;} -.feature-soccer{background-position:-54px -192px;} -.feature-america-football{background-position:-108px -192px;} -.feature-tennis{background-position:-162px -192px;} -.feature-basketball{background-position:-216px -192px;} -.feature-baseball{background-position:-0px -216px;} -.feature-golf{background-position:-54px -216px;} -.feature-swimming{background-position:-108px -216px;} -.feature-cricket{background-position:-162px -216px;} -.feature-skiing{background-position:-216px -216px;} -.feature-school{background-position:-0px -240px;} -.feature-college{background-position:-54px -240px;} -.feature-library{background-position:-108px -240px;} -.feature-post{background-position:-162px -240px;} -.feature-fire-station{background-position:-216px -240px;} -.feature-town-hall{background-position:-0px -264px;} -.feature-police{background-position:-54px -264px;} -.feature-prison{background-position:-108px -264px;} -.feature-embassy{background-position:-162px -264px;} -.feature-beer{background-position:-216px -264px;} -.feature-restaurant{background-position:-0px -288px;} -.feature-cafe{background-position:-54px -288px;} -.feature-shop{background-position:-108px -288px;} -.feature-fast-food{background-position:-162px -288px;} -.feature-bar{background-position:-216px -288px;} -.feature-bank{background-position:-0px -312px;} -.feature-grocery{background-position:-54px -312px;} -.feature-cinema{background-position:-108px -312px;} -.feature-pharmacy{background-position:-162px -312px;} -.feature-hospital{background-position:-216px -312px;} -.feature-danger{background-position:-0px -336px;} -.feature-industrial{background-position:-54px -336px;} -.feature-warehouse{background-position:-108px -336px;} -.feature-commercial{background-position:-162px -336px;} -.feature-building{background-position:-216px -336px;} -.feature-place-of-worship{background-position:-0px -360px;} -.feature-alcohol-shop{background-position:-54px -360px;} -.feature-logging{background-position:-108px -360px;} -.feature-oil-well{background-position:-162px -360px;} -.feature-slaughterhouse{background-position:-216px -360px;} -.feature-dam{background-position:-0px -384px;} -.feature-water{background-position:-54px -384px;} -.feature-wetland{background-position:-108px -384px;} -.feature-disability{background-position:-162px -384px;} -.feature-telephone{background-position:-216px -384px;} -.feature-emergency-telephone{background-position:-0px -408px;} -.feature-toilets{background-position:-54px -408px;} -.feature-waste-basket{background-position:-108px -408px;} -.feature-music{background-position:-162px -408px;} -.feature-land-use{background-position:-216px -408px;} -.feature-city{background-position:-0px -432px;} -.feature-town{background-position:-54px -432px;} -.feature-village{background-position:-108px -432px;} -.feature-farm{background-position:-162px -432px;} -.feature-bakery{background-position:-216px -432px;} -.feature-dog-park{background-position:-0px -456px;} -.feature-lighthouse{background-position:-54px -456px;} -.feature-clothing-store{background-position:-108px -456px;} -.feature-polling-place{background-position:-162px -456px;} -.feature-playground{background-position:-216px -456px;} -.feature-entrance{background-position:-0px -480px;} -.feature-heart{background-position:-54px -480px;} -.feature-london-underground{background-position:-108px -480px;} -.feature-minefield{background-position:-162px -480px;} -.feature-rail-underground{background-position:-216px -480px;} -.feature-rail-above{background-position:-0px -504px;} -.feature-camera{background-position:-54px -504px;} -.feature-laundry{background-position:-108px -504px;} -.feature-car{background-position:-162px -504px;} -.feature-suitcase{background-position:-216px -504px;} -.feature-hairdresser{background-position:-0px -528px;} -.feature-chemist{background-position:-54px -528px;} -.feature-mobilephone{background-position:-108px -528px;} -.feature-scooter{background-position:-162px -528px;} -.feature-gift{background-position:-216px -528px;} -.feature-ice-cream{background-position:-0px -552px;} diff --git a/data/feature-icons.json b/data/feature-icons.json index 31b51dd52..537d7a1bf 100644 --- a/data/feature-icons.json +++ b/data/feature-icons.json @@ -1 +1,349 @@ -{"circle-stroked":{"12":[42,0],"18":[24,0],"24":[0,0]},"circle":{"12":[96,0],"18":[78,0],"24":[54,0]},"square-stroked":{"12":[150,0],"18":[132,0],"24":[108,0]},"square":{"12":[204,0],"18":[186,0],"24":[162,0]},"triangle-stroked":{"12":[258,0],"18":[240,0],"24":[216,0]},"triangle":{"12":[42,24],"18":[24,24],"24":[0,24]},"star-stroked":{"12":[96,24],"18":[78,24],"24":[54,24]},"star":{"12":[150,24],"18":[132,24],"24":[108,24]},"cross":{"12":[204,24],"18":[186,24],"24":[162,24]},"marker-stroked":{"12":[258,24],"18":[240,24],"24":[216,24]},"marker":{"12":[42,48],"18":[24,48],"24":[0,48]},"religious-jewish":{"12":[96,48],"18":[78,48],"24":[54,48]},"religious-christian":{"12":[150,48],"18":[132,48],"24":[108,48]},"religious-muslim":{"12":[204,48],"18":[186,48],"24":[162,48]},"cemetery":{"12":[258,48],"18":[240,48],"24":[216,48]},"rocket":{"12":[42,72],"18":[24,72],"24":[0,72]},"airport":{"12":[96,72],"18":[78,72],"24":[54,72]},"heliport":{"12":[150,72],"18":[132,72],"24":[108,72]},"rail":{"12":[204,72],"18":[186,72],"24":[162,72]},"rail-metro":{"12":[258,72],"18":[240,72],"24":[216,72]},"rail-light":{"12":[42,96],"18":[24,96],"24":[0,96]},"bus":{"12":[96,96],"18":[78,96],"24":[54,96]},"fuel":{"12":[150,96],"18":[132,96],"24":[108,96]},"parking":{"12":[204,96],"18":[186,96],"24":[162,96]},"parking-garage":{"12":[258,96],"18":[240,96],"24":[216,96]},"airfield":{"12":[42,120],"18":[24,120],"24":[0,120]},"roadblock":{"12":[96,120],"18":[78,120],"24":[54,120]},"ferry":{"12":[150,120],"18":[132,120],"24":[108,120]},"harbor":{"12":[204,120],"18":[186,120],"24":[162,120]},"bicycle":{"12":[258,120],"18":[240,120],"24":[216,120]},"park":{"12":[42,144],"18":[24,144],"24":[0,144]},"park2":{"12":[96,144],"18":[78,144],"24":[54,144]},"museum":{"12":[150,144],"18":[132,144],"24":[108,144]},"lodging":{"12":[204,144],"18":[186,144],"24":[162,144]},"monument":{"12":[258,144],"18":[240,144],"24":[216,144]},"zoo":{"12":[42,168],"18":[24,168],"24":[0,168]},"garden":{"12":[96,168],"18":[78,168],"24":[54,168]},"campsite":{"12":[150,168],"18":[132,168],"24":[108,168]},"theatre":{"12":[204,168],"18":[186,168],"24":[162,168]},"art-gallery":{"12":[258,168],"18":[240,168],"24":[216,168]},"pitch":{"12":[42,192],"18":[24,192],"24":[0,192]},"soccer":{"12":[96,192],"18":[78,192],"24":[54,192]},"america-football":{"12":[150,192],"18":[132,192],"24":[108,192]},"tennis":{"12":[204,192],"18":[186,192],"24":[162,192]},"basketball":{"12":[258,192],"18":[240,192],"24":[216,192]},"baseball":{"12":[42,216],"18":[24,216],"24":[0,216]},"golf":{"12":[96,216],"18":[78,216],"24":[54,216]},"swimming":{"12":[150,216],"18":[132,216],"24":[108,216]},"cricket":{"12":[204,216],"18":[186,216],"24":[162,216]},"skiing":{"12":[258,216],"18":[240,216],"24":[216,216]},"school":{"12":[42,240],"18":[24,240],"24":[0,240]},"college":{"12":[96,240],"18":[78,240],"24":[54,240]},"library":{"12":[150,240],"18":[132,240],"24":[108,240]},"post":{"12":[204,240],"18":[186,240],"24":[162,240]},"fire-station":{"12":[258,240],"18":[240,240],"24":[216,240]},"town-hall":{"12":[42,264],"18":[24,264],"24":[0,264]},"police":{"12":[96,264],"18":[78,264],"24":[54,264]},"prison":{"12":[150,264],"18":[132,264],"24":[108,264]},"embassy":{"12":[204,264],"18":[186,264],"24":[162,264]},"beer":{"12":[258,264],"18":[240,264],"24":[216,264]},"restaurant":{"12":[42,288],"18":[24,288],"24":[0,288]},"cafe":{"12":[96,288],"18":[78,288],"24":[54,288]},"shop":{"12":[150,288],"18":[132,288],"24":[108,288]},"fast-food":{"12":[204,288],"18":[186,288],"24":[162,288]},"bar":{"12":[258,288],"18":[240,288],"24":[216,288]},"bank":{"12":[42,312],"18":[24,312],"24":[0,312]},"grocery":{"12":[96,312],"18":[78,312],"24":[54,312]},"cinema":{"12":[150,312],"18":[132,312],"24":[108,312]},"pharmacy":{"12":[204,312],"18":[186,312],"24":[162,312]},"hospital":{"12":[258,312],"18":[240,312],"24":[216,312]},"danger":{"12":[42,336],"18":[24,336],"24":[0,336]},"industrial":{"12":[96,336],"18":[78,336],"24":[54,336]},"warehouse":{"12":[150,336],"18":[132,336],"24":[108,336]},"commercial":{"12":[204,336],"18":[186,336],"24":[162,336]},"building":{"12":[258,336],"18":[240,336],"24":[216,336]},"place-of-worship":{"12":[42,360],"18":[24,360],"24":[0,360]},"alcohol-shop":{"12":[96,360],"18":[78,360],"24":[54,360]},"logging":{"12":[150,360],"18":[132,360],"24":[108,360]},"oil-well":{"12":[204,360],"18":[186,360],"24":[162,360]},"slaughterhouse":{"12":[258,360],"18":[240,360],"24":[216,360]},"dam":{"12":[42,384],"18":[24,384],"24":[0,384]},"water":{"12":[96,384],"18":[78,384],"24":[54,384]},"wetland":{"12":[150,384],"18":[132,384],"24":[108,384]},"disability":{"12":[204,384],"18":[186,384],"24":[162,384]},"telephone":{"12":[258,384],"18":[240,384],"24":[216,384]},"emergency-telephone":{"12":[42,408],"18":[24,408],"24":[0,408]},"toilets":{"12":[96,408],"18":[78,408],"24":[54,408]},"waste-basket":{"12":[150,408],"18":[132,408],"24":[108,408]},"music":{"12":[204,408],"18":[186,408],"24":[162,408]},"land-use":{"12":[258,408],"18":[240,408],"24":[216,408]},"city":{"12":[42,432],"18":[24,432],"24":[0,432]},"town":{"12":[96,432],"18":[78,432],"24":[54,432]},"village":{"12":[150,432],"18":[132,432],"24":[108,432]},"farm":{"12":[204,432],"18":[186,432],"24":[162,432]},"bakery":{"12":[258,432],"18":[240,432],"24":[216,432]},"dog-park":{"12":[42,456],"18":[24,456],"24":[0,456]},"lighthouse":{"12":[96,456],"18":[78,456],"24":[54,456]},"clothing-store":{"12":[150,456],"18":[132,456],"24":[108,456]},"polling-place":{"12":[204,456],"18":[186,456],"24":[162,456]},"playground":{"12":[258,456],"18":[240,456],"24":[216,456]},"entrance":{"12":[42,480],"18":[24,480],"24":[0,480]},"heart":{"12":[96,480],"18":[78,480],"24":[54,480]},"london-underground":{"12":[150,480],"18":[132,480],"24":[108,480]},"minefield":{"12":[204,480],"18":[186,480],"24":[162,480]},"rail-underground":{"12":[258,480],"18":[240,480],"24":[216,480]},"rail-above":{"12":[42,504],"18":[24,504],"24":[0,504]},"camera":{"12":[96,504],"18":[78,504],"24":[54,504]},"laundry":{"12":[150,504],"18":[132,504],"24":[108,504]},"car":{"12":[204,504],"18":[186,504],"24":[162,504]},"suitcase":{"12":[258,504],"18":[240,504],"24":[216,504]},"hairdresser":{"12":[42,528],"18":[24,528],"24":[0,528]},"chemist":{"12":[96,528],"18":[78,528],"24":[54,528]},"mobilephone":{"12":[150,528],"18":[132,528],"24":[108,528]},"scooter":{"12":[204,528],"18":[186,528],"24":[162,528]},"gift":{"12":[258,528],"18":[240,528],"24":[216,528]},"ice-cream":{"12":[42,552],"18":[24,552],"24":[0,552]}} \ No newline at end of file +{ +"circle-stroked-24": { "x": 0, "y": 0, "width": 24, "height": 24 }, +"circle-stroked-18": { "x": 24, "y": 0, "width": 18, "height": 18 }, +"circle-stroked-12": { "x": 42, "y": 0, "width": 12, "height": 12 }, +"circle-24": { "x": 54, "y": 0, "width": 24, "height": 24 }, +"circle-18": { "x": 78, "y": 0, "width": 18, "height": 18 }, +"circle-12": { "x": 96, "y": 0, "width": 12, "height": 12 }, +"square-stroked-24": { "x": 108, "y": 0, "width": 24, "height": 24 }, +"square-stroked-18": { "x": 132, "y": 0, "width": 18, "height": 18 }, +"square-stroked-12": { "x": 150, "y": 0, "width": 12, "height": 12 }, +"square-24": { "x": 162, "y": 0, "width": 24, "height": 24 }, +"square-18": { "x": 186, "y": 0, "width": 18, "height": 18 }, +"square-12": { "x": 204, "y": 0, "width": 12, "height": 12 }, +"triangle-stroked-24": { "x": 216, "y": 0, "width": 24, "height": 24 }, +"triangle-stroked-18": { "x": 240, "y": 0, "width": 18, "height": 18 }, +"triangle-stroked-12": { "x": 258, "y": 0, "width": 12, "height": 12 }, +"triangle-24": { "x": 0, "y": 24, "width": 24, "height": 24 }, +"triangle-18": { "x": 24, "y": 24, "width": 18, "height": 18 }, +"triangle-12": { "x": 42, "y": 24, "width": 12, "height": 12 }, +"star-stroked-24": { "x": 54, "y": 24, "width": 24, "height": 24 }, +"star-stroked-18": { "x": 78, "y": 24, "width": 18, "height": 18 }, +"star-stroked-12": { "x": 96, "y": 24, "width": 12, "height": 12 }, +"star-24": { "x": 108, "y": 24, "width": 24, "height": 24 }, +"star-18": { "x": 132, "y": 24, "width": 18, "height": 18 }, +"star-12": { "x": 150, "y": 24, "width": 12, "height": 12 }, +"cross-24": { "x": 162, "y": 24, "width": 24, "height": 24 }, +"cross-18": { "x": 186, "y": 24, "width": 18, "height": 18 }, +"cross-12": { "x": 204, "y": 24, "width": 12, "height": 12 }, +"marker-stroked-24": { "x": 216, "y": 24, "width": 24, "height": 24 }, +"marker-stroked-18": { "x": 240, "y": 24, "width": 18, "height": 18 }, +"marker-stroked-12": { "x": 258, "y": 24, "width": 12, "height": 12 }, +"marker-24": { "x": 0, "y": 48, "width": 24, "height": 24 }, +"marker-18": { "x": 24, "y": 48, "width": 18, "height": 18 }, +"marker-12": { "x": 42, "y": 48, "width": 12, "height": 12 }, +"religious-jewish-24": { "x": 54, "y": 48, "width": 24, "height": 24 }, +"religious-jewish-18": { "x": 78, "y": 48, "width": 18, "height": 18 }, +"religious-jewish-12": { "x": 96, "y": 48, "width": 12, "height": 12 }, +"religious-christian-24": { "x": 108, "y": 48, "width": 24, "height": 24 }, +"religious-christian-18": { "x": 132, "y": 48, "width": 18, "height": 18 }, +"religious-christian-12": { "x": 150, "y": 48, "width": 12, "height": 12 }, +"religious-muslim-24": { "x": 162, "y": 48, "width": 24, "height": 24 }, +"religious-muslim-18": { "x": 186, "y": 48, "width": 18, "height": 18 }, +"religious-muslim-12": { "x": 204, "y": 48, "width": 12, "height": 12 }, +"cemetery-24": { "x": 216, "y": 48, "width": 24, "height": 24 }, +"cemetery-18": { "x": 240, "y": 48, "width": 18, "height": 18 }, +"cemetery-12": { "x": 258, "y": 48, "width": 12, "height": 12 }, +"rocket-24": { "x": 0, "y": 72, "width": 24, "height": 24 }, +"rocket-18": { "x": 24, "y": 72, "width": 18, "height": 18 }, +"rocket-12": { "x": 42, "y": 72, "width": 12, "height": 12 }, +"airport-24": { "x": 54, "y": 72, "width": 24, "height": 24 }, +"airport-18": { "x": 78, "y": 72, "width": 18, "height": 18 }, +"airport-12": { "x": 96, "y": 72, "width": 12, "height": 12 }, +"heliport-24": { "x": 108, "y": 72, "width": 24, "height": 24 }, +"heliport-18": { "x": 132, "y": 72, "width": 18, "height": 18 }, +"heliport-12": { "x": 150, "y": 72, "width": 12, "height": 12 }, +"rail-24": { "x": 162, "y": 72, "width": 24, "height": 24 }, +"rail-18": { "x": 186, "y": 72, "width": 18, "height": 18 }, +"rail-12": { "x": 204, "y": 72, "width": 12, "height": 12 }, +"rail-metro-24": { "x": 216, "y": 72, "width": 24, "height": 24 }, +"rail-metro-18": { "x": 240, "y": 72, "width": 18, "height": 18 }, +"rail-metro-12": { "x": 258, "y": 72, "width": 12, "height": 12 }, +"rail-light-24": { "x": 0, "y": 96, "width": 24, "height": 24 }, +"rail-light-18": { "x": 24, "y": 96, "width": 18, "height": 18 }, +"rail-light-12": { "x": 42, "y": 96, "width": 12, "height": 12 }, +"bus-24": { "x": 54, "y": 96, "width": 24, "height": 24 }, +"bus-18": { "x": 78, "y": 96, "width": 18, "height": 18 }, +"bus-12": { "x": 96, "y": 96, "width": 12, "height": 12 }, +"fuel-24": { "x": 108, "y": 96, "width": 24, "height": 24 }, +"fuel-18": { "x": 132, "y": 96, "width": 18, "height": 18 }, +"fuel-12": { "x": 150, "y": 96, "width": 12, "height": 12 }, +"parking-24": { "x": 162, "y": 96, "width": 24, "height": 24 }, +"parking-18": { "x": 186, "y": 96, "width": 18, "height": 18 }, +"parking-12": { "x": 204, "y": 96, "width": 12, "height": 12 }, +"parking-garage-24": { "x": 216, "y": 96, "width": 24, "height": 24 }, +"parking-garage-18": { "x": 240, "y": 96, "width": 18, "height": 18 }, +"parking-garage-12": { "x": 258, "y": 96, "width": 12, "height": 12 }, +"airfield-24": { "x": 0, "y": 120, "width": 24, "height": 24 }, +"airfield-18": { "x": 24, "y": 120, "width": 18, "height": 18 }, +"airfield-12": { "x": 42, "y": 120, "width": 12, "height": 12 }, +"roadblock-24": { "x": 54, "y": 120, "width": 24, "height": 24 }, +"roadblock-18": { "x": 78, "y": 120, "width": 18, "height": 18 }, +"roadblock-12": { "x": 96, "y": 120, "width": 12, "height": 12 }, +"ferry-24": { "x": 108, "y": 120, "width": 24, "height": 24 }, +"ferry-18": { "x": 132, "y": 120, "width": 18, "height": 18 }, +"ferry-12": { "x": 150, "y": 120, "width": 12, "height": 12 }, +"harbor-24": { "x": 162, "y": 120, "width": 24, "height": 24 }, +"harbor-18": { "x": 186, "y": 120, "width": 18, "height": 18 }, +"harbor-12": { "x": 204, "y": 120, "width": 12, "height": 12 }, +"bicycle-24": { "x": 216, "y": 120, "width": 24, "height": 24 }, +"bicycle-18": { "x": 240, "y": 120, "width": 18, "height": 18 }, +"bicycle-12": { "x": 258, "y": 120, "width": 12, "height": 12 }, +"park-24": { "x": 0, "y": 144, "width": 24, "height": 24 }, +"park-18": { "x": 24, "y": 144, "width": 18, "height": 18 }, +"park-12": { "x": 42, "y": 144, "width": 12, "height": 12 }, +"park2-24": { "x": 54, "y": 144, "width": 24, "height": 24 }, +"park2-18": { "x": 78, "y": 144, "width": 18, "height": 18 }, +"park2-12": { "x": 96, "y": 144, "width": 12, "height": 12 }, +"museum-24": { "x": 108, "y": 144, "width": 24, "height": 24 }, +"museum-18": { "x": 132, "y": 144, "width": 18, "height": 18 }, +"museum-12": { "x": 150, "y": 144, "width": 12, "height": 12 }, +"lodging-24": { "x": 162, "y": 144, "width": 24, "height": 24 }, +"lodging-18": { "x": 186, "y": 144, "width": 18, "height": 18 }, +"lodging-12": { "x": 204, "y": 144, "width": 12, "height": 12 }, +"monument-24": { "x": 216, "y": 144, "width": 24, "height": 24 }, +"monument-18": { "x": 240, "y": 144, "width": 18, "height": 18 }, +"monument-12": { "x": 258, "y": 144, "width": 12, "height": 12 }, +"zoo-24": { "x": 0, "y": 168, "width": 24, "height": 24 }, +"zoo-18": { "x": 24, "y": 168, "width": 18, "height": 18 }, +"zoo-12": { "x": 42, "y": 168, "width": 12, "height": 12 }, +"garden-24": { "x": 54, "y": 168, "width": 24, "height": 24 }, +"garden-18": { "x": 78, "y": 168, "width": 18, "height": 18 }, +"garden-12": { "x": 96, "y": 168, "width": 12, "height": 12 }, +"campsite-24": { "x": 108, "y": 168, "width": 24, "height": 24 }, +"campsite-18": { "x": 132, "y": 168, "width": 18, "height": 18 }, +"campsite-12": { "x": 150, "y": 168, "width": 12, "height": 12 }, +"theatre-24": { "x": 162, "y": 168, "width": 24, "height": 24 }, +"theatre-18": { "x": 186, "y": 168, "width": 18, "height": 18 }, +"theatre-12": { "x": 204, "y": 168, "width": 12, "height": 12 }, +"art-gallery-24": { "x": 216, "y": 168, "width": 24, "height": 24 }, +"art-gallery-18": { "x": 240, "y": 168, "width": 18, "height": 18 }, +"art-gallery-12": { "x": 258, "y": 168, "width": 12, "height": 12 }, +"pitch-24": { "x": 0, "y": 192, "width": 24, "height": 24 }, +"pitch-18": { "x": 24, "y": 192, "width": 18, "height": 18 }, +"pitch-12": { "x": 42, "y": 192, "width": 12, "height": 12 }, +"soccer-24": { "x": 54, "y": 192, "width": 24, "height": 24 }, +"soccer-18": { "x": 78, "y": 192, "width": 18, "height": 18 }, +"soccer-12": { "x": 96, "y": 192, "width": 12, "height": 12 }, +"america-football-24": { "x": 108, "y": 192, "width": 24, "height": 24 }, +"america-football-18": { "x": 132, "y": 192, "width": 18, "height": 18 }, +"america-football-12": { "x": 150, "y": 192, "width": 12, "height": 12 }, +"tennis-24": { "x": 162, "y": 192, "width": 24, "height": 24 }, +"tennis-18": { "x": 186, "y": 192, "width": 18, "height": 18 }, +"tennis-12": { "x": 204, "y": 192, "width": 12, "height": 12 }, +"basketball-24": { "x": 216, "y": 192, "width": 24, "height": 24 }, +"basketball-18": { "x": 240, "y": 192, "width": 18, "height": 18 }, +"basketball-12": { "x": 258, "y": 192, "width": 12, "height": 12 }, +"baseball-24": { "x": 0, "y": 216, "width": 24, "height": 24 }, +"baseball-18": { "x": 24, "y": 216, "width": 18, "height": 18 }, +"baseball-12": { "x": 42, "y": 216, "width": 12, "height": 12 }, +"golf-24": { "x": 54, "y": 216, "width": 24, "height": 24 }, +"golf-18": { "x": 78, "y": 216, "width": 18, "height": 18 }, +"golf-12": { "x": 96, "y": 216, "width": 12, "height": 12 }, +"swimming-24": { "x": 108, "y": 216, "width": 24, "height": 24 }, +"swimming-18": { "x": 132, "y": 216, "width": 18, "height": 18 }, +"swimming-12": { "x": 150, "y": 216, "width": 12, "height": 12 }, +"cricket-24": { "x": 162, "y": 216, "width": 24, "height": 24 }, +"cricket-18": { "x": 186, "y": 216, "width": 18, "height": 18 }, +"cricket-12": { "x": 204, "y": 216, "width": 12, "height": 12 }, +"skiing-24": { "x": 216, "y": 216, "width": 24, "height": 24 }, +"skiing-18": { "x": 240, "y": 216, "width": 18, "height": 18 }, +"skiing-12": { "x": 258, "y": 216, "width": 12, "height": 12 }, +"school-24": { "x": 0, "y": 240, "width": 24, "height": 24 }, +"school-18": { "x": 24, "y": 240, "width": 18, "height": 18 }, +"school-12": { "x": 42, "y": 240, "width": 12, "height": 12 }, +"college-24": { "x": 54, "y": 240, "width": 24, "height": 24 }, +"college-18": { "x": 78, "y": 240, "width": 18, "height": 18 }, +"college-12": { "x": 96, "y": 240, "width": 12, "height": 12 }, +"library-24": { "x": 108, "y": 240, "width": 24, "height": 24 }, +"library-18": { "x": 132, "y": 240, "width": 18, "height": 18 }, +"library-12": { "x": 150, "y": 240, "width": 12, "height": 12 }, +"post-24": { "x": 162, "y": 240, "width": 24, "height": 24 }, +"post-18": { "x": 186, "y": 240, "width": 18, "height": 18 }, +"post-12": { "x": 204, "y": 240, "width": 12, "height": 12 }, +"fire-station-24": { "x": 216, "y": 240, "width": 24, "height": 24 }, +"fire-station-18": { "x": 240, "y": 240, "width": 18, "height": 18 }, +"fire-station-12": { "x": 258, "y": 240, "width": 12, "height": 12 }, +"town-hall-24": { "x": 0, "y": 264, "width": 24, "height": 24 }, +"town-hall-18": { "x": 24, "y": 264, "width": 18, "height": 18 }, +"town-hall-12": { "x": 42, "y": 264, "width": 12, "height": 12 }, +"police-24": { "x": 54, "y": 264, "width": 24, "height": 24 }, +"police-18": { "x": 78, "y": 264, "width": 18, "height": 18 }, +"police-12": { "x": 96, "y": 264, "width": 12, "height": 12 }, +"prison-24": { "x": 108, "y": 264, "width": 24, "height": 24 }, +"prison-18": { "x": 132, "y": 264, "width": 18, "height": 18 }, +"prison-12": { "x": 150, "y": 264, "width": 12, "height": 12 }, +"embassy-24": { "x": 162, "y": 264, "width": 24, "height": 24 }, +"embassy-18": { "x": 186, "y": 264, "width": 18, "height": 18 }, +"embassy-12": { "x": 204, "y": 264, "width": 12, "height": 12 }, +"beer-24": { "x": 216, "y": 264, "width": 24, "height": 24 }, +"beer-18": { "x": 240, "y": 264, "width": 18, "height": 18 }, +"beer-12": { "x": 258, "y": 264, "width": 12, "height": 12 }, +"restaurant-24": { "x": 0, "y": 288, "width": 24, "height": 24 }, +"restaurant-18": { "x": 24, "y": 288, "width": 18, "height": 18 }, +"restaurant-12": { "x": 42, "y": 288, "width": 12, "height": 12 }, +"cafe-24": { "x": 54, "y": 288, "width": 24, "height": 24 }, +"cafe-18": { "x": 78, "y": 288, "width": 18, "height": 18 }, +"cafe-12": { "x": 96, "y": 288, "width": 12, "height": 12 }, +"shop-24": { "x": 108, "y": 288, "width": 24, "height": 24 }, +"shop-18": { "x": 132, "y": 288, "width": 18, "height": 18 }, +"shop-12": { "x": 150, "y": 288, "width": 12, "height": 12 }, +"fast-food-24": { "x": 162, "y": 288, "width": 24, "height": 24 }, +"fast-food-18": { "x": 186, "y": 288, "width": 18, "height": 18 }, +"fast-food-12": { "x": 204, "y": 288, "width": 12, "height": 12 }, +"bar-24": { "x": 216, "y": 288, "width": 24, "height": 24 }, +"bar-18": { "x": 240, "y": 288, "width": 18, "height": 18 }, +"bar-12": { "x": 258, "y": 288, "width": 12, "height": 12 }, +"bank-24": { "x": 0, "y": 312, "width": 24, "height": 24 }, +"bank-18": { "x": 24, "y": 312, "width": 18, "height": 18 }, +"bank-12": { "x": 42, "y": 312, "width": 12, "height": 12 }, +"grocery-24": { "x": 54, "y": 312, "width": 24, "height": 24 }, +"grocery-18": { "x": 78, "y": 312, "width": 18, "height": 18 }, +"grocery-12": { "x": 96, "y": 312, "width": 12, "height": 12 }, +"cinema-24": { "x": 108, "y": 312, "width": 24, "height": 24 }, +"cinema-18": { "x": 132, "y": 312, "width": 18, "height": 18 }, +"cinema-12": { "x": 150, "y": 312, "width": 12, "height": 12 }, +"pharmacy-24": { "x": 162, "y": 312, "width": 24, "height": 24 }, +"pharmacy-18": { "x": 186, "y": 312, "width": 18, "height": 18 }, +"pharmacy-12": { "x": 204, "y": 312, "width": 12, "height": 12 }, +"hospital-24": { "x": 216, "y": 312, "width": 24, "height": 24 }, +"hospital-18": { "x": 240, "y": 312, "width": 18, "height": 18 }, +"hospital-12": { "x": 258, "y": 312, "width": 12, "height": 12 }, +"danger-24": { "x": 0, "y": 336, "width": 24, "height": 24 }, +"danger-18": { "x": 24, "y": 336, "width": 18, "height": 18 }, +"danger-12": { "x": 42, "y": 336, "width": 12, "height": 12 }, +"industrial-24": { "x": 54, "y": 336, "width": 24, "height": 24 }, +"industrial-18": { "x": 78, "y": 336, "width": 18, "height": 18 }, +"industrial-12": { "x": 96, "y": 336, "width": 12, "height": 12 }, +"warehouse-24": { "x": 108, "y": 336, "width": 24, "height": 24 }, +"warehouse-18": { "x": 132, "y": 336, "width": 18, "height": 18 }, +"warehouse-12": { "x": 150, "y": 336, "width": 12, "height": 12 }, +"commercial-24": { "x": 162, "y": 336, "width": 24, "height": 24 }, +"commercial-18": { "x": 186, "y": 336, "width": 18, "height": 18 }, +"commercial-12": { "x": 204, "y": 336, "width": 12, "height": 12 }, +"building-24": { "x": 216, "y": 336, "width": 24, "height": 24 }, +"building-18": { "x": 240, "y": 336, "width": 18, "height": 18 }, +"building-12": { "x": 258, "y": 336, "width": 12, "height": 12 }, +"place-of-worship-24": { "x": 0, "y": 360, "width": 24, "height": 24 }, +"place-of-worship-18": { "x": 24, "y": 360, "width": 18, "height": 18 }, +"place-of-worship-12": { "x": 42, "y": 360, "width": 12, "height": 12 }, +"alcohol-shop-24": { "x": 54, "y": 360, "width": 24, "height": 24 }, +"alcohol-shop-18": { "x": 78, "y": 360, "width": 18, "height": 18 }, +"alcohol-shop-12": { "x": 96, "y": 360, "width": 12, "height": 12 }, +"logging-24": { "x": 108, "y": 360, "width": 24, "height": 24 }, +"logging-18": { "x": 132, "y": 360, "width": 18, "height": 18 }, +"logging-12": { "x": 150, "y": 360, "width": 12, "height": 12 }, +"oil-well-24": { "x": 162, "y": 360, "width": 24, "height": 24 }, +"oil-well-18": { "x": 186, "y": 360, "width": 18, "height": 18 }, +"oil-well-12": { "x": 204, "y": 360, "width": 12, "height": 12 }, +"slaughterhouse-24": { "x": 216, "y": 360, "width": 24, "height": 24 }, +"slaughterhouse-18": { "x": 240, "y": 360, "width": 18, "height": 18 }, +"slaughterhouse-12": { "x": 258, "y": 360, "width": 12, "height": 12 }, +"dam-24": { "x": 0, "y": 384, "width": 24, "height": 24 }, +"dam-18": { "x": 24, "y": 384, "width": 18, "height": 18 }, +"dam-12": { "x": 42, "y": 384, "width": 12, "height": 12 }, +"water-24": { "x": 54, "y": 384, "width": 24, "height": 24 }, +"water-18": { "x": 78, "y": 384, "width": 18, "height": 18 }, +"water-12": { "x": 96, "y": 384, "width": 12, "height": 12 }, +"wetland-24": { "x": 108, "y": 384, "width": 24, "height": 24 }, +"wetland-18": { "x": 132, "y": 384, "width": 18, "height": 18 }, +"wetland-12": { "x": 150, "y": 384, "width": 12, "height": 12 }, +"disability-24": { "x": 162, "y": 384, "width": 24, "height": 24 }, +"disability-18": { "x": 186, "y": 384, "width": 18, "height": 18 }, +"disability-12": { "x": 204, "y": 384, "width": 12, "height": 12 }, +"telephone-24": { "x": 216, "y": 384, "width": 24, "height": 24 }, +"telephone-18": { "x": 240, "y": 384, "width": 18, "height": 18 }, +"telephone-12": { "x": 258, "y": 384, "width": 12, "height": 12 }, +"emergency-telephone-24": { "x": 0, "y": 408, "width": 24, "height": 24 }, +"emergency-telephone-18": { "x": 24, "y": 408, "width": 18, "height": 18 }, +"emergency-telephone-12": { "x": 42, "y": 408, "width": 12, "height": 12 }, +"toilets-24": { "x": 54, "y": 408, "width": 24, "height": 24 }, +"toilets-18": { "x": 78, "y": 408, "width": 18, "height": 18 }, +"toilets-12": { "x": 96, "y": 408, "width": 12, "height": 12 }, +"waste-basket-24": { "x": 108, "y": 408, "width": 24, "height": 24 }, +"waste-basket-18": { "x": 132, "y": 408, "width": 18, "height": 18 }, +"waste-basket-12": { "x": 150, "y": 408, "width": 12, "height": 12 }, +"music-24": { "x": 162, "y": 408, "width": 24, "height": 24 }, +"music-18": { "x": 186, "y": 408, "width": 18, "height": 18 }, +"music-12": { "x": 204, "y": 408, "width": 12, "height": 12 }, +"land-use-24": { "x": 216, "y": 408, "width": 24, "height": 24 }, +"land-use-18": { "x": 240, "y": 408, "width": 18, "height": 18 }, +"land-use-12": { "x": 258, "y": 408, "width": 12, "height": 12 }, +"city-24": { "x": 0, "y": 432, "width": 24, "height": 24 }, +"city-18": { "x": 24, "y": 432, "width": 18, "height": 18 }, +"city-12": { "x": 42, "y": 432, "width": 12, "height": 12 }, +"town-24": { "x": 54, "y": 432, "width": 24, "height": 24 }, +"town-18": { "x": 78, "y": 432, "width": 18, "height": 18 }, +"town-12": { "x": 96, "y": 432, "width": 12, "height": 12 }, +"village-24": { "x": 108, "y": 432, "width": 24, "height": 24 }, +"village-18": { "x": 132, "y": 432, "width": 18, "height": 18 }, +"village-12": { "x": 150, "y": 432, "width": 12, "height": 12 }, +"farm-24": { "x": 162, "y": 432, "width": 24, "height": 24 }, +"farm-18": { "x": 186, "y": 432, "width": 18, "height": 18 }, +"farm-12": { "x": 204, "y": 432, "width": 12, "height": 12 }, +"bakery-24": { "x": 216, "y": 432, "width": 24, "height": 24 }, +"bakery-18": { "x": 240, "y": 432, "width": 18, "height": 18 }, +"bakery-12": { "x": 258, "y": 432, "width": 12, "height": 12 }, +"dog-park-24": { "x": 0, "y": 456, "width": 24, "height": 24 }, +"dog-park-18": { "x": 24, "y": 456, "width": 18, "height": 18 }, +"dog-park-12": { "x": 42, "y": 456, "width": 12, "height": 12 }, +"lighthouse-24": { "x": 54, "y": 456, "width": 24, "height": 24 }, +"lighthouse-18": { "x": 78, "y": 456, "width": 18, "height": 18 }, +"lighthouse-12": { "x": 96, "y": 456, "width": 12, "height": 12 }, +"clothing-store-24": { "x": 108, "y": 456, "width": 24, "height": 24 }, +"clothing-store-18": { "x": 132, "y": 456, "width": 18, "height": 18 }, +"clothing-store-12": { "x": 150, "y": 456, "width": 12, "height": 12 }, +"polling-place-24": { "x": 162, "y": 456, "width": 24, "height": 24 }, +"polling-place-18": { "x": 186, "y": 456, "width": 18, "height": 18 }, +"polling-place-12": { "x": 204, "y": 456, "width": 12, "height": 12 }, +"playground-24": { "x": 216, "y": 456, "width": 24, "height": 24 }, +"playground-18": { "x": 240, "y": 456, "width": 18, "height": 18 }, +"playground-12": { "x": 258, "y": 456, "width": 12, "height": 12 }, +"entrance-24": { "x": 0, "y": 480, "width": 24, "height": 24 }, +"entrance-18": { "x": 24, "y": 480, "width": 18, "height": 18 }, +"entrance-12": { "x": 42, "y": 480, "width": 12, "height": 12 }, +"heart-24": { "x": 54, "y": 480, "width": 24, "height": 24 }, +"heart-18": { "x": 78, "y": 480, "width": 18, "height": 18 }, +"heart-12": { "x": 96, "y": 480, "width": 12, "height": 12 }, +"london-underground-24": { "x": 108, "y": 480, "width": 24, "height": 24 }, +"london-underground-18": { "x": 132, "y": 480, "width": 18, "height": 18 }, +"london-underground-12": { "x": 150, "y": 480, "width": 12, "height": 12 }, +"minefield-24": { "x": 162, "y": 480, "width": 24, "height": 24 }, +"minefield-18": { "x": 186, "y": 480, "width": 18, "height": 18 }, +"minefield-12": { "x": 204, "y": 480, "width": 12, "height": 12 }, +"rail-underground-24": { "x": 216, "y": 480, "width": 24, "height": 24 }, +"rail-underground-18": { "x": 240, "y": 480, "width": 18, "height": 18 }, +"rail-underground-12": { "x": 258, "y": 480, "width": 12, "height": 12 }, +"rail-above-24": { "x": 0, "y": 504, "width": 24, "height": 24 }, +"rail-above-18": { "x": 24, "y": 504, "width": 18, "height": 18 }, +"rail-above-12": { "x": 42, "y": 504, "width": 12, "height": 12 }, +"camera-24": { "x": 54, "y": 504, "width": 24, "height": 24 }, +"camera-18": { "x": 78, "y": 504, "width": 18, "height": 18 }, +"camera-12": { "x": 96, "y": 504, "width": 12, "height": 12 }, +"laundry-24": { "x": 108, "y": 504, "width": 24, "height": 24 }, +"laundry-18": { "x": 132, "y": 504, "width": 18, "height": 18 }, +"laundry-12": { "x": 150, "y": 504, "width": 12, "height": 12 }, +"car-24": { "x": 162, "y": 504, "width": 24, "height": 24 }, +"car-18": { "x": 186, "y": 504, "width": 18, "height": 18 }, +"car-12": { "x": 204, "y": 504, "width": 12, "height": 12 }, +"suitcase-24": { "x": 216, "y": 504, "width": 24, "height": 24 }, +"suitcase-18": { "x": 240, "y": 504, "width": 18, "height": 18 }, +"suitcase-12": { "x": 258, "y": 504, "width": 12, "height": 12 }, +"hairdresser-24": { "x": 0, "y": 528, "width": 24, "height": 24 }, +"hairdresser-18": { "x": 24, "y": 528, "width": 18, "height": 18 }, +"hairdresser-12": { "x": 42, "y": 528, "width": 12, "height": 12 }, +"chemist-24": { "x": 54, "y": 528, "width": 24, "height": 24 }, +"chemist-18": { "x": 78, "y": 528, "width": 18, "height": 18 }, +"chemist-12": { "x": 96, "y": 528, "width": 12, "height": 12 }, +"mobilephone-24": { "x": 108, "y": 528, "width": 24, "height": 24 }, +"mobilephone-18": { "x": 132, "y": 528, "width": 18, "height": 18 }, +"mobilephone-12": { "x": 150, "y": 528, "width": 12, "height": 12 }, +"scooter-24": { "x": 162, "y": 528, "width": 24, "height": 24 }, +"scooter-18": { "x": 186, "y": 528, "width": 18, "height": 18 }, +"scooter-12": { "x": 204, "y": 528, "width": 12, "height": 12 }, +"gift-24": { "x": 216, "y": 528, "width": 24, "height": 24 }, +"gift-18": { "x": 240, "y": 528, "width": 18, "height": 18 }, +"gift-12": { "x": 258, "y": 528, "width": 12, "height": 12 }, +"ice-cream-24": { "x": 0, "y": 552, "width": 24, "height": 24 }, +"ice-cream-18": { "x": 24, "y": 552, "width": 18, "height": 18 }, +"ice-cream-12": { "x": 42, "y": 552, "width": 12, "height": 12 }} diff --git a/data/maki_sprite.js b/data/maki_sprite.js deleted file mode 100644 index 7bf6def2e..000000000 --- a/data/maki_sprite.js +++ /dev/null @@ -1,26 +0,0 @@ -var fs = require('fs'); -var _ = require('../js/lib/lodash'); - -var maki = require('maki/www/maki-sprite.json'); - -// Generate CSS -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"; -var images = {}; - -_.forEach(maki, function(dimensions, name) { - var match = name.match(/(.*)-(12|18|24)/), - name = match[1], - size = match[2], - group = images[name] = images[name] || {}; - group[size] = [dimensions.x, dimensions.y]; - - if (dimensions.width === 24) { - css += template.replace('{name}', name.replace('-24', '')) - .replace('{x}', dimensions.x) - .replace('{y}', dimensions.y); - } -}); - -fs.writeFileSync('./css/feature-icons.css', css); -fs.writeFileSync('./data/feature-icons.json', JSON.stringify(images)); diff --git a/dist/img/maki-sprite.png b/dist/img/maki-sprite.png deleted file mode 100644 index a65f10470..000000000 Binary files a/dist/img/maki-sprite.png and /dev/null differ diff --git a/dist/img/maki-sprite.svg b/dist/img/maki-sprite.svg new file mode 100644 index 000000000..cac0e8ed3 --- /dev/null +++ b/dist/img/maki-sprite.svg @@ -0,0 +1,4063 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index f7de9a3d1..24410198f 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,6 @@ - diff --git a/js/id/svg/defs.js b/js/id/svg/defs.js index 60e642dff..a9a5660f3 100644 --- a/js/id/svg/defs.js +++ b/js/id/svg/defs.js @@ -3,16 +3,6 @@ used once globally, since defs IDs must be unique within a document. */ iD.svg.Defs = function(context) { - function autosize(image) { - var img = document.createElement('img'); - img.src = image.attr('xlink:href'); - img.onload = function() { - image.attr({ - width: img.width, - height: img.height - }); - }; - } function SVGSpriteDefinition(id, href) { return function(defs) { @@ -25,22 +15,6 @@ iD.svg.Defs = function(context) { }; } - function ImageSpriteDefinition(id, href, data) { - return function(defs) { - defs.append('image') - .attr('id', id) - .attr('xlink:href', href) - .call(autosize); - - defs.selectAll() - .data(data) - .enter().append('use') - .attr('id', function(d) { return d.key; }) - .attr('transform', function(d) { return 'translate(-' + d.value[0] + ',-' + d.value[1] + ')'; }) - .attr('xlink:href', '#' + id); - }; - } - return function (selection) { var defs = selection.append('defs'); @@ -121,23 +95,12 @@ iD.svg.Defs = function(context) { return d; }); - // maki - var maki = []; - _.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(SVGSpriteDefinition( 'iD-sprite', context.imagePath('iD-sprite.svg'))); - defs.call(ImageSpriteDefinition( + defs.call(SVGSpriteDefinition( 'maki-sprite', - context.imagePath('maki-sprite.png'), - maki)); + context.imagePath('maki-sprite.svg'))); }; }; diff --git a/js/id/svg/icon.js b/js/id/svg/icon.js index b394b25bb..3c8d2f02a 100644 --- a/js/id/svg/icon.js +++ b/js/id/svg/icon.js @@ -4,7 +4,7 @@ iD.svg.Icon = function(name, svgklass, useklass) { .data([0]) .enter() .append('svg') - .attr('class', 'icon ' + svgklass) + .attr('class', 'icon ' + (svgklass || '')) .append('use') .attr('xlink:href', name) .attr('class', useklass); diff --git a/js/id/svg/labels.js b/js/id/svg/labels.js index b5e1cce05..e9ac1d458 100644 --- a/js/id/svg/labels.js +++ b/js/id/svg/labels.js @@ -161,19 +161,18 @@ iD.svg.Labels = function(projection, context) { } function drawAreaIcons(group, entities, filter, classes, labels) { - var icons = group.selectAll('use') .filter(filter) .data(entities, iD.Entity.key); icons.enter() .append('use') - .attr('clip-path', 'url(#clip-square-18)') - .attr('class', 'icon'); + .attr('width', '18px') + .attr('height', '18px'); icons.attr('transform', get(labels, 'transform')) .attr('xlink:href', function(d) { - return '#maki-' + context.presets().match(d, context.graph()).icon + '-18'; + return '#' + context.presets().match(d, context.graph()).icon + '-18'; }); diff --git a/js/id/svg/points.js b/js/id/svg/points.js index a0581c903..378b52d49 100644 --- a/js/id/svg/points.js +++ b/js/id/svg/points.js @@ -35,9 +35,10 @@ iD.svg.Points = function(projection, context) { .call(markerPath, 'stroke'); group.append('use') - .attr('class', 'icon') .attr('transform', 'translate(-6, -20)') - .attr('clip-path', 'url(#clip-square-12)'); + .attr('class', 'icon') + .attr('width', '12px') + .attr('height', '12px'); groups.attr('transform', iD.svg.PointTransform(projection)) .call(iD.svg.TagClasses()); @@ -49,7 +50,7 @@ iD.svg.Points = function(projection, context) { groups.select('.icon') .attr('xlink:href', function(entity) { var preset = context.presets().match(entity, context.graph()); - return preset.icon ? '#maki-' + preset.icon + '-12' : ''; + return preset.icon ? '#' + preset.icon + '-12' : ''; }); groups.exit() diff --git a/js/id/svg/vertices.js b/js/id/svg/vertices.js index bc41c1ba7..8739c8280 100644 --- a/js/id/svg/vertices.js +++ b/js/id/svg/vertices.js @@ -119,8 +119,9 @@ iD.svg.Vertices = function(projection, context) { enter.filter(function(d) { return icon(d); }) .append('use') .attr('transform', 'translate(-6, -6)') - .attr('clip-path', 'url(#clip-square-12)') - .attr('xlink:href', function(d) { return '#maki-' + icon(d) + '-12'; }); + .attr('xlink:href', function(d) { return '#' + icon(d) + '-12'; }) + .attr('width', '12px') + .attr('height', '12px'); // Vertices with tags get a fill. enter.filter(function(d) { return d.hasInterestingTags(); }) diff --git a/js/id/ui/preset_icon.js b/js/id/ui/preset_icon.js index fd8da4350..a055b3f28 100644 --- a/js/id/ui/preset_icon.js +++ b/js/id/ui/preset_icon.js @@ -8,7 +8,9 @@ iD.ui.PresetIcon = function() { function setup() { var selection = d3.select(this), p = preset.apply(this, arguments), - geom = geometry.apply(this, arguments); + geom = geometry.apply(this, arguments), + icon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'), + isMaki = iD.data.featureIcons.hasOwnProperty(icon + '-24'); var $fill = selection.selectAll('.preset-icon-fill') .data([0]); @@ -43,11 +45,12 @@ iD.ui.PresetIcon = function() { .attr('class', 'preset-icon') .call(iD.svg.Icon('')); + $icon + .classed('preset-icon-60', !isMaki) + .classed('preset-icon-32', isMaki); + $icon.selectAll('use') - .attr('href', function() { - var icon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'); - return '#' + icon; - }); + .attr('href', function() { return '#' + icon + (isMaki ? '-24' : ''); }); } presetIcon.preset = function(_) { diff --git a/package.json b/package.json index deb4d0db8..e34c9b1b3 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "smash": "0.0", "lodash-cli": "3.9.3", "uglify-js": "~2.4.16", - "maki": "0.4.5", + "maki": "0.5.0", "eslint": "~1.2.1", "mocha": "~1.21.5", "mocha-phantomjs": "~3.5.3", @@ -40,7 +40,8 @@ "name-suggestion-index": "0.0.1", "minimist": "~1.2.0", "xml2js": "~0.4.13", - "xmlbuilder": "~3.1.0" + "xmlbuilder": "~3.1.0", + "svg-sprite": "~1.2.12" }, "engines": { "node": ">=0.10.0" diff --git a/svg/iD-sprite.idraw b/svg/iD-sprite.src.idraw similarity index 99% rename from svg/iD-sprite.idraw rename to svg/iD-sprite.src.idraw index 02cb69456..40db00886 100644 Binary files a/svg/iD-sprite.idraw and b/svg/iD-sprite.src.idraw differ diff --git a/svg/iD-sprite.svg b/svg/iD-sprite.src.svg similarity index 100% rename from svg/iD-sprite.svg rename to svg/iD-sprite.src.svg diff --git a/svg/maki-sprite.src.svg b/svg/maki-sprite.src.svg new file mode 100644 index 000000000..aaad158c5 --- /dev/null +++ b/svg/maki-sprite.src.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svg/spriteify.js b/svg/spriteify.js index 4b93083b2..902f2f56e 100755 --- a/svg/spriteify.js +++ b/svg/spriteify.js @@ -3,12 +3,12 @@ 'use strict'; var argv = require('minimist')(process.argv.slice(2)); -if (argv.help || argv.h || !argv.svg || !argv.json) { +if (argv.help || argv.h || !argv.svg) { return help(); } var fs = require('fs'); -var json = JSON.parse(fs.readFileSync(argv.json)); +var json = (argv.json ? JSON.parse(fs.readFileSync(argv.json)) : {}); var _ = require('../js/lib/lodash.js'); var xml2js = require('xml2js'); @@ -43,14 +43,14 @@ function xmlToJs(filename, cb) { function jsToXml(obj, cb) { - var json = transform(obj.svg); + var src = transform(obj.svg); var builder = require('xmlbuilder'); var doc = builder.create('svg', { version: '1.0', encoding: 'UTF-8' }, { pubID: '-//W3C//DTD SVG 1.1//EN', sysID: 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'} ); - doc = build(doc, json); + doc = build(doc, src); process.stdout.write(doc.end({ pretty: true }), 'utf8', cb); } @@ -101,7 +101,14 @@ function build(doc, source) { doc = build(doc, source['#child'][i]); } } - if (!isRoot) { + + if (isRoot) { + doc = doc.att({ + 'version': "1.1", + 'xmlns': "http://www.w3.org/2000/svg", + 'xmlns:xlink': "http://www.w3.org/1999/xlink" + }); + } else { doc = doc.up(); } } diff --git a/test/rendering.html b/test/rendering.html index c9f97bdd6..c6a7f9437 100644 --- a/test/rendering.html +++ b/test/rendering.html @@ -4,7 +4,6 @@ Rendering Tests -