2018-04-12 2nd taniguchi_ba Follow 2018-04-12 15:18:46 License: MIT License Fork1 Fav0 View28 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 414 lines HTML 10 lines CSS 4 lines 2018-04-12 2nd $('#ui').append(create_select('elementType', getMapTypeStyleElementType(), '対象物の異なる表現を区別します')); $('#ui').append(create_select('featureType', getMapTypeStyleFeatureType(), '対象物タイプに使用できる値です')); $('#ui').append(create_range('gamma', '0.01', '10', '0.01', '1', 'ガンマ。明度を指定された倍率にまで高めて、ガンマを修正します。有効な値は浮動小数点値 [0.01, 10] で、1.0 の場合は変化はありません')); $('#ui').append(create_range('lightness', '-100', '100', '1', '0', '明度。減少させる場合は元の値のパーセントで、増加させる場合は補数値のパーセントで、色の明度を変更します。有効な値は、[-100, 100] です')); $('#ui').append(create_range('saturation', '-100', '100', '1', '0', '彩度。減少させる場合は元の値のパーセントで、増加させる場合は補数値のパーセントで、色の彩度を変更します。有効な値は、[-100, 100] です')); $('#ui').append(create_select('visibility', getVisibility(), '表示状態: 有効な値は、「on」、「off」、または「simplifed」です')); $('#ui').append(create_select('invert_lightness', getInvertLightness(), '明度を反転します。値が true の場合、対象物の明度を反転し、色相と彩度は維持されます')); $('#ui').append('<span title="対象物の色相を設定し、指定された色の色相に一致させます。対象物の彩度と明度は維持されるため、対象物は指定された色とは完全に一致しません。有効な値は、"#ff0000" などの RGB 16 進文字列です。">hue : <input type="color" name="hue"></span><br />'); $('#ui').append('<button>add style</button>'); $('input[type="range"], input[type="number"]').bind('change click blur', function () { $(this).siblings('input').val($(this).val()); }); $('button').click(function () { var json = JSON.parse($('#json').val() || '[]'); json.unshift({ 'featureType' : 'all', 'elementType' : 'all', 'stylers' : [] }); $('#json').val(JSON.stringify(json, undefined, '\t')); }).click(); $('[name="hue"]').live('change', function () { $(this).val($(this).val().replace(/rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)/, function (_, r, g, b) { return '#' + H2D(r) + H2D(g) + H2D(b); })); }); function H2D (h) { return ('0' + parseInt(h).toString(16)).replace(/^\w+(\w\w)$/, '$1'); }; $('input, select, textarea').live('change blur focus click', $.debounce(1000, function () { var current = { 'stylers' : [] }; _(['elementType', 'featureType']).each(function (name) { current[name] = $('[name="'+name+'"]').val(); }); _(['visibility', 'hue']).each(function (name) { var val = $('[name="'+name+'"]').val(); if (!val) { return; }; add_stylers(name, val); }); _(['gamma', 'lightness', 'saturation']).each(function (name) { var elem = $('[name="'+name+'"]'); var val = elem.val() - 0; if (elem.closest('span').data().default == val) { return; }; add_stylers(name, val); }); _(['invert_lightness']).each(function (name) { if ($('[name="'+name+'"]').val() !== '1') { return; }; add_stylers(name, true); }); var json = JSON.parse($('#json').val() || '[]'); json[0] = current; $('#json').val(JSON.stringify(json, undefined, '\t')); set_style(); function add_stylers (name, val) { var style = {}; style[name] = val; current.stylers.push(style); }; })); var color_name = 'Styled'; function set_style () { var gmap = $('#map').data('gmap'); var GMap = google.maps; var style = JSON.parse($('#json').val() || '[]'); var StyledMapType = new GMap.StyledMapType(style, { 'name' : color_name }); gmap.mapTypes.set(color_name, StyledMapType); }; function load_script (url) { var script = document.createElement('script'); script.type = 'text/javascript'; script.async = 'async'; script.defer = 'defer'; script.charset = 'UTF-8'; script.src = url; var head = document.getElementsByTagName('head')[0]; head.appendChild(script); }; (function () { window.gmap_load = function () { var GMap = google.maps; var gmap = new GMap.Map($('#map').css({ 'width' : $(window).width() }).get(0), { 'zoom' : 15, 'mapTypeControlOptions': { 'mapTypeIds' : [color_name, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE] }, 'mapTypeId' : color_name, 'center' : new GMap.LatLng('35.057101', '136.715680') }); $('#map').data('gmap', gmap); set_style(); }; load_script('http://maps.google.com/maps/api/js?sensor=false&callback=gmap_load'); load_script('http://meta100.github.com/mColorPicker/javascripts/mColorPicker_min.js'); })(); function create_select (name, array, title) { var result = name + ' : <select name="'+name+'">\n'; _(array).each(function (type) { result += '<option value="'+type.name+'">'+type.lang.ja+'</option>\n'; }); result += '</select>'; return '<span title="'+title+'">' + result + '</span><br />\n'; }; function create_range (name, min, max, step, value, title) { var option = { 'name' : name, 'min' : min, 'max' : max, 'step' : step, 'value' : value, }; var range = $('<div>').append($('<input>').attr($.extend(option, { 'type' : 'range' }))).html(); var number = $('<div>').append($('<input>').attr($.extend(option, { 'type' : 'number', 'size' : '2' }))).html(); return '<span data-default="'+value+'" title="'+title+'">' + name + ' : ' + range + number + '</span><br />\n'; }; function getMapTypeStyleElementType () { return [ { 'name' : 'all', 'lang' : { 'ja' : 'すべてに適用します', 'en' : 'Apply the rule to all elements of the specified feature.' } }, { 'name' : 'geometry', 'lang' : { 'ja' : 'ジオメトリに適用します', 'en' : 'Apply the rule to the feature\'s geometry.' } }, { 'name' : 'labels', 'lang' : { 'ja' : 'ラベルに適用します', 'en' : 'Apply the rule to the feature\'s labels.' } } ]; }; function getMapTypeStyleFeatureType () { return [ { 'name' : 'all', 'lang' : { 'ja' : 'すべてに適用します', 'en' : 'Apply the rule to all selector types.' } }, { 'name' : 'water', 'lang' : { 'ja' : '水域に適用します', 'en' : 'Apply the rule to bodies of water.' } }, { 'name' : 'administrative', 'lang' : { 'ja' : '行政領域に適用します', 'en' : 'Apply the rule to administrative areas.' } }, { 'name' : 'administrative.country', 'lang' : { 'ja' : '国に適用します', 'en' : 'Apply the rule to countries.' } }, { 'name' : 'administrative.land_parcel', 'lang' : { 'ja' : '区画に適用します', 'en' : 'Apply the rule to land parcels.' } }, { 'name' : 'administrative.locality', 'lang' : { 'ja' : '地区に適用します', 'en' : 'Apply the rule to localities.' } }, { 'name' : 'administrative.neighborhood', 'lang' : { 'ja' : '周辺地域に適用します', 'en' : 'Apply the rule to neighborhoods.' } }, { 'name' : 'administrative.province', 'lang' : { 'ja' : '州に適用します', 'en' : 'Apply the rule to provinces.' } }, { 'name' : 'landscape', 'lang' : { 'ja' : '風景に適用します', 'en' : 'Apply the rule to landscapes.' } }, { 'name' : 'landscape.man_made', 'lang' : { 'ja' : '人造物に適用します', 'en' : 'Apply the rule to man made structures.' } }, { 'name' : 'landscape.natural', 'lang' : { 'ja' : '自然物に適用します', 'en' : 'Apply the rule to natural features.' } }, { 'name' : 'poi', 'lang' : { 'ja' : 'ランドマークに適用します', 'en' : 'Apply the rule to points of interest.' } }, { 'name' : 'poi.attraction', 'lang' : { 'ja' : '観光地に適用します', 'en' : 'Apply the rule to attractions for tourists.' } }, { 'name' : 'poi.business', 'lang' : { 'ja' : 'ビジネスに適用します', 'en' : 'Apply the rule to businesses.' } }, { 'name' : 'poi.government', 'lang' : { 'ja' : '政府機関に適用します', 'en' : 'Apply the rule to government buildings.' } }, { 'name' : 'poi.medical', 'lang' : { 'ja' : '病院、薬局、警察署、医院等に適用します', 'en' : 'Apply the rule to emergency services (hospitals, pharmacies, police, doctors, etc).' } }, { 'name' : 'poi.park', 'lang' : { 'ja' : '公園に適用します', 'en' : 'Apply the rule to parks.' } }, { 'name' : 'poi.place_of_worship', 'lang' : { 'ja' : '教会、寺院、モスク等に適用します', 'en' : 'Apply the rule to places of worship, such as church, temple, or mosque.' } }, { 'name' : 'poi.school', 'lang' : { 'ja' : '学校に適用します', 'en' : 'Apply the rule to schools.' } }, { 'name' : 'poi.sports_complex', 'lang' : { 'ja' : 'スポーツ施設に適用します', 'en' : 'Apply the rule to sports complexes.' } }, { 'name' : 'road', 'lang' : { 'ja' : 'すべての道路に適用します', 'en' : 'Apply the rule to all roads.' } }, { 'name' : 'road.arterial', 'lang' : { 'ja' : '幹線道路に適用します', 'en' : 'Apply the rule to arterial roads.' } }, { 'name' : 'road.highway', 'lang' : { 'ja' : '高速道路に適用します', 'en' : 'Apply the rule to highways.' } }, { 'name' : 'road.local', 'lang' : { 'ja' : '地方道に適用します', 'en' : 'Apply the rule to local roads.' } }, { 'name' : 'transit', 'lang' : { 'ja' : 'すべての交通機関の駅と路線に適用します', 'en' : 'Apply the rule to all transit stations and lines.' } }, { 'name' : 'transit.line', 'lang' : { 'ja' : '交通機関の路線に適用します', 'en' : 'Apply the rule to transit lines.' } }, { 'name' : 'transit.station', 'lang' : { 'ja' : 'すべての交通機関の駅に適用します', 'en' : 'Apply the rule to all transit stations.' } }, { 'name' : 'transit.station.airport', 'lang' : { 'ja' : '空港に適用します', 'en' : 'Apply the rule to airports.' } }, { 'name' : 'transit.station.bus', 'lang' : { 'ja' : 'バス停留所に適用します', 'en' : 'Apply the rule to bus stops.' } }, { 'name' : 'transit.station.rail', 'lang' : { 'ja' : '鉄道駅に適用します', 'en' : 'Apply the rule to rail stations.' } } ]; }; function getVisibility () { return [ { 'name' : '', 'lang' : { 'ja' : 'on', 'en' : 'on' } }, { 'name' : 'off', 'lang' : { 'ja' : 'off', 'en' : 'off' } }, { 'name' : 'simplifed', 'lang' : { 'ja' : 'simplifed', 'en' : 'simplifed' } } ]; }; function getInvertLightness () { return [ { 'name' : '', 'lang' : { 'ja' : 'off', 'en' : 'off' } }, { 'name' : '1', 'lang' : { 'ja' : 'on', 'en' : 'on' } } ]; }; <head> <script src="http://jsrun.it/assets/e/S/m/L/eSmLG"></script> <script src="http://jsrun.it/assets/4/B/B/s/4BBsa"></script> <script src="http://jsrun.it/assets/O/q/V/U/OqVUL"></script> </head> <div id="map"></div> <div id="ui"></div> <textarea rows="20" cols="50" wrap="off" id="json"></textarea> 2018-04-12 2nd #map { width: 700px; height: 400px; } $('#ui').append(create_select('elementType', getMapTypeStyleElementType(), '対象物の異なる表現を区別します')); $('#ui').append(create_select('featureType', getMapTypeStyleFeatureType(), '対象物タイプに使用できる値です')); $('#ui').append(create_range('gamma', '0.01', '10', '0.01', '1', 'ガンマ。明度を指定された倍率にまで高めて、ガンマを修正します。有効な値は浮動小数点値 [0.01, 10] で、1.0 の場合は変化はありません')); $('#ui').append(create_range('lightness', '-100', '100', '1', '0', '明度。減少させる場合は元の値のパーセントで、増加させる場合は補数値のパーセントで、色の明度を変更します。有効な値は、[-100, 100] です')); $('#ui').append(create_range('saturation', '-100', '100', '1', '0', '彩度。減少させる場合は元の値のパーセントで、増加させる場合は補数値のパーセントで、色の彩度を変更します。有効な値は、[-100, 100] です')); $('#ui').append(create_select('visibility', getVisibility(), '表示状態: 有効な値は、「on」、「off」、または「simplifed」です')); $('#ui').append(create_select('invert_lightness', getInvertLightness(), '明度を反転します。値が true の場合、対象物の明度を反転し、色相と彩度は維持されます')); $('#ui').append('<span title="対象物の色相を設定し、指定された色の色相に一致させます。対象物の彩度と明度は維持されるため、対象物は指定された色とは完全に一致しません。有効な値は、"#ff0000" などの RGB 16 進文字列です。">hue : <input type="color" name="hue"></span><br />'); $('#ui').append('<button>add style</button>'); $('input[type="range"], input[type="number"]').bind('change click blur', function () { $(this).siblings('input').val($(this).val()); }); $('button').click(function () { var json = JSON.parse($('#json').val() || '[]'); json.unshift({ 'featureType' : 'all', 'elementType' : 'all', 'stylers' : [] }); $('#json').val(JSON.stringify(json, undefined, '\t')); }).click(); $('[name="hue"]').live('change', function () { $(this).val($(this).val().replace(/rgb\(\s*(\d+),\s*(\d+),\s*(\d+)\s*\)/, function (_, r, g, b) { return '#' + H2D(r) + H2D(g) + H2D(b); })); }); function H2D (h) { return ('0' + parseInt(h).toString(16)).replace(/^\w+(\w\w)$/, '$1'); }; $('input, select, textarea').live('change blur focus click', $.debounce(1000, function () { var current = { 'stylers' : [] }; _(['elementType', 'featureType']).each(function (name) { current[name] = $('[name="'+name+'"]').val(); }); _(['visibility', 'hue']).each(function (name) { var val = $('[name="'+name+'"]').val(); if (!val) { return; }; add_stylers(name, val); }); _(['gamma', 'lightness', 'saturation']).each(function (name) { var elem = $('[name="'+name+'"]'); var val = elem.val() - 0; if (elem.closest('span').data().default == val) { return; }; add_stylers(name, val); }); _(['invert_lightness']).each(function (name) { if ($('[name="'+name+'"]').val() !== '1') { return; }; add_stylers(name, true); }); var json = JSON.parse($('#json').val() || '[]'); json[0] = current; $('#json').val(JSON.stringify(json, undefined, '\t')); set_style(); function add_stylers (name, val) { var style = {}; style[name] = val; current.stylers.push(style); }; })); var color_name = 'Styled'; function set_style () { var gmap = $('#map').data('gmap'); var GMap = google.maps; var style = JSON.parse($('#json').val() || '[]'); var StyledMapType = new GMap.StyledMapType(style, { 'name' : color_name }); gmap.mapTypes.set(color_name, StyledMapType); }; function load_script (url) { var script = document.createElement('script'); script.type = 'text/javascript'; script.async = 'async'; script.defer = 'defer'; script.charset = 'UTF-8'; script.src = url; var head = document.getElementsByTagName('head')[0]; head.appendChild(script); }; (function () { window.gmap_load = function () { var GMap = google.maps; var gmap = new GMap.Map($('#map').css({ 'width' : $(window).width() }).get(0), { 'zoom' : 15, 'mapTypeControlOptions': { 'mapTypeIds' : [color_name, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE] }, 'mapTypeId' : color_name, 'center' : new GMap.LatLng('35.057101', '136.715680') }); $('#map').data('gmap', gmap); set_style(); }; load_script('http://maps.google.com/maps/api/js?sensor=false&callback=gmap_load'); load_script('http://meta100.github.com/mColorPicker/javascripts/mColorPicker_min.js'); })(); function create_select (name, array, title) { var result = name + ' : <select name="'+name+'">\n'; _(array).each(function (type) { result += '<option value="'+type.name+'">'+type.lang.ja+'</option>\n'; }); result += '</select>'; return '<span title="'+title+'">' + result + '</span><br />\n'; }; function create_range (name, min, max, step, value, title) { var option = { 'name' : name, 'min' : min, 'max' : max, 'step' : step, 'value' : value, }; var range = $('<div>').append($('<input>').attr($.extend(option, { 'type' : 'range' }))).html(); var number = $('<div>').append($('<input>').attr($.extend(option, { 'type' : 'number', 'size' : '2' }))).html(); return '<span data-default="'+value+'" title="'+title+'">' + name + ' : ' + range + number + '</span><br />\n'; }; function getMapTypeStyleElementType () { return [ { 'name' : 'all', 'lang' : { 'ja' : 'すべてに適用します', 'en' : 'Apply the rule to all elements of the specified feature.' } }, { 'name' : 'geometry', 'lang' : { 'ja' : 'ジオメトリに適用します', 'en' : 'Apply the rule to the feature\'s geometry.' } }, { 'name' : 'labels', 'lang' : { 'ja' : 'ラベルに適用します', 'en' : 'Apply the rule to the feature\'s labels.' } } ]; }; function getMapTypeStyleFeatureType () { return [ { 'name' : 'all', 'lang' : { 'ja' : 'すべてに適用します', 'en' : 'Apply the rule to all selector types.' } }, { 'name' : 'water', 'lang' : { 'ja' : '水域に適用します', 'en' : 'Apply the rule to bodies of water.' } }, { 'name' : 'administrative', 'lang' : { 'ja' : '行政領域に適用します', 'en' : 'Apply the rule to administrative areas.' } }, { 'name' : 'administrative.country', 'lang' : { 'ja' : '国に適用します', 'en' : 'Apply the rule to countries.' } }, { 'name' : 'administrative.land_parcel', 'lang' : { 'ja' : '区画に適用します', 'en' : 'Apply the rule to land parcels.' } }, { 'name' : 'administrative.locality', 'lang' : { 'ja' : '地区に適用します', 'en' : 'Apply the rule to localities.' } }, { 'name' : 'administrative.neighborhood', 'lang' : { 'ja' : '周辺地域に適用します', 'en' : 'Apply the rule to neighborhoods.' } }, { 'name' : 'administrative.province', 'lang' : { 'ja' : '州に適用します', 'en' : 'Apply the rule to provinces.' } }, { 'name' : 'landscape', 'lang' : { 'ja' : '風景に適用します', 'en' : 'Apply the rule to landscapes.' } }, { 'name' : 'landscape.man_made', 'lang' : { 'ja' : '人造物に適用します', 'en' : 'Apply the rule to man made structures.' } }, { 'name' : 'landscape.natural', 'lang' : { 'ja' : '自然物に適用します', 'en' : 'Apply the rule to natural features.' } }, { 'name' : 'poi', 'lang' : { 'ja' : 'ランドマークに適用します', 'en' : 'Apply the rule to points of interest.' } }, { 'name' : 'poi.attraction', 'lang' : { 'ja' : '観光地に適用します', 'en' : 'Apply the rule to attractions for tourists.' } }, { 'name' : 'poi.business', 'lang' : { 'ja' : 'ビジネスに適用します', 'en' : 'Apply the rule to businesses.' } }, { 'name' : 'poi.government', 'lang' : { 'ja' : '政府機関に適用します', 'en' : 'Apply the rule to government buildings.' } }, { 'name' : 'poi.medical', 'lang' : { 'ja' : '病院、薬局、警察署、医院等に適用します', 'en' : 'Apply the rule to emergency services (hospitals, pharmacies, police, doctors, etc).' } }, { 'name' : 'poi.park', 'lang' : { 'ja' : '公園に適用します', 'en' : 'Apply the rule to parks.' } }, { 'name' : 'poi.place_of_worship', 'lang' : { 'ja' : '教会、寺院、モスク等に適用します', 'en' : 'Apply the rule to places of worship, such as church, temple, or mosque.' } }, { 'name' : 'poi.school', 'lang' : { 'ja' : '学校に適用します', 'en' : 'Apply the rule to schools.' } }, { 'name' : 'poi.sports_complex', 'lang' : { 'ja' : 'スポーツ施設に適用します', 'en' : 'Apply the rule to sports complexes.' } }, { 'name' : 'road', 'lang' : { 'ja' : 'すべての道路に適用します', 'en' : 'Apply the rule to all roads.' } }, { 'name' : 'road.arterial', 'lang' : { 'ja' : '幹線道路に適用します', 'en' : 'Apply the rule to arterial roads.' } }, { 'name' : 'road.highway', 'lang' : { 'ja' : '高速道路に適用します', 'en' : 'Apply the rule to highways.' } }, { 'name' : 'road.local', 'lang' : { 'ja' : '地方道に適用します', 'en' : 'Apply the rule to local roads.' } }, { 'name' : 'transit', 'lang' : { 'ja' : 'すべての交通機関の駅と路線に適用します', 'en' : 'Apply the rule to all transit stations and lines.' } }, { 'name' : 'transit.line', 'lang' : { 'ja' : '交通機関の路線に適用します', 'en' : 'Apply the rule to transit lines.' } }, { 'name' : 'transit.station', 'lang' : { 'ja' : 'すべての交通機関の駅に適用します', 'en' : 'Apply the rule to all transit stations.' } }, { 'name' : 'transit.station.airport', 'lang' : { 'ja' : '空港に適用します', 'en' : 'Apply the rule to airports.' } }, { 'name' : 'transit.station.bus', 'lang' : { 'ja' : 'バス停留所に適用します', 'en' : 'Apply the rule to bus stops.' } }, { 'name' : 'transit.station.rail', 'lang' : { 'ja' : '鉄道駅に適用します', 'en' : 'Apply the rule to rail stations.' } } ]; }; function getVisibility () { return [ { 'name' : '', 'lang' : { 'ja' : 'on', 'en' : 'on' } }, { 'name' : 'off', 'lang' : { 'ja' : 'off', 'en' : 'off' } }, { 'name' : 'simplifed', 'lang' : { 'ja' : 'simplifed', 'en' : 'simplifed' } } ]; }; function getInvertLightness () { return [ { 'name' : '', 'lang' : { 'ja' : 'off', 'en' : 'off' } }, { 'name' : '1', 'lang' : { 'ja' : 'on', 'en' : 'on' } } ]; }; <head> <script src="http://jsrun.it/assets/e/S/m/L/eSmLG"></script> <script src="http://jsrun.it/assets/4/B/B/s/4BBsa"></script> <script src="http://jsrun.it/assets/O/q/V/U/OqVUL"></script> </head> <div id="map"></div> <div id="ui"></div> <textarea rows="20" cols="50" wrap="off" id="json"></textarea> #map { width: 700px; height: 400px; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author taniguchi_base Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/2pvX/js"></script> html5_elements&api Discussion Questions on this code? Tags html5_elements&api Forked sort by latest page views favorite forked forked: 2018-04-12 2nd taniguchi_ba 20 26 415/10/4 html5_elements&api
