globe-map.html

<!- <link rel="import" href="bower_components/polymer/polymer.html"> ->


<!--<script src="https://d3js.org/d3.v4."></script>-->
<!--<script src="bower_components/d3/d3.js"></script>-->
<script src="bower_components/d3/d3.min.js"></script>
<!--<script src="https://d3js.org/topojson.v2.min.js"></script>-->
<script src="bower_components/topojson/topojson.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<!--<script src="https://d3js.org/d3-geo-projection.v2.js"></script>-->
<!--<script src="bower_components/d3-geo-projection/d3.geo.projection.min.js"></script>-->
<script src="geodesic.js"></script>
<script src="versor.js"></script>
<!--
`globe-map`
A globe map.

@demo demo/index.html
-->

<dom-module id="globe-map">
    <template>
        <style>
            :host {
                display: inline-block;
            }
        </style>
        <template is="dom-if" if="{{config.rotation.ui_enabled}}">
            <div id="rotation_div">
                <!--<h3>rotation</h3>-->
                <input type="button" value="recenter" id="reset_rotation_button" onclick="{{resetRotation}}">
            </div>
        </template>
        <template is="dom-if" if="{{config.nt_indicatrice.ui_enabled}}">
            <div id="not_tissot_indicatrices_div">
                <form id="not_tissot_indicatrices_form" oninput="{{nt_form_input}}">
                    <strong>not tissot indicatrices:</strong><br/>

                    enabled: <input name="enabled" type="checkbox" checked=true onchange="{{nt_form_enable}}"><br/>

                    longitudinal period: <input name="lon_period" type="range" min="10" max="360" value="90" step="10">
                    <output name="lon_period_out">2</output><br/>

                    latitudinal period: <input name="lat_period" type="range" min="10" max="181" value="2" step="10">
                    <output name="lat_period_out">2</output><br/>

                    circle radius: <input name="nt_radius" type="range" min="5" max="30" value="5" step="5">
                    <output name="nt_radius_out">10</output><br/>
                </form>
            </div>
        </template>

        <template is="dom-if" if="{{config.geodesic_graticule.ui_enabled}}">
            <div class="geodesic_graticules">
                <form id="geodesic_graticule_form" oninput="{{geo_grat_change}}">
                    <strong>geodesic graticules:</strong><br/>

                    enabled: <input name="enabled" type="checkbox" checked=true onchange="{{geo_grat_enable}}"><br/>

                    subdivisions: <input name="subdivisions" type="range" min="1" max="12" value="2">
                    <output name="subdivisions_out">2</output><br/>
                </form>
            </div>
        </template>

        <template is="dom-if" if="{{config.mercator_tiles.ui_enabled}}">
            <div class="mercator_tiles">
                <form id="mercator_tiles_form" oninput="{{mercator_tiles_change}}">
                    <strong>mercator tiles:</strong><br/>

                    enabled: <input name="enabled" type="checkbox" checked=true onchange="{{mercator_tiles_enable}}"><br/>

                    level: <input name="level" type="range" min="0" max="5" value="2">
                    <output name="level_out">2</output><br/>
                </form>
            </div>
        </template>

        <template is="dom-if" if="{{config.projection_selection.enabled}}">
            <div class="projection_selection">
                <form id="projection_selection_form" onchange="{{change_projections}}">
                    <strong>projections:</strong><br/>

                    <template is="dom-repeat" items="{{projections}}" as="current">
                        projection <span>{{index}}:</span>
                        <select name="chosen_projection">
                            <template is="dom-repeat" items="{{projection_names}}">
                                <template is="dom-if" if="{{_string_equals(current,item)}}">
                                    <option value="{{item}}" selected>{{item}}</option>
                                </template>
                                <template is="dom-if" if="{{_string_not_equals(current,item)}}">
                                    <option value="{{item}}">{{item}}</option>
                                </template>
                            </template>
                        </select>
                        <!--<input type='select' list="projection_list" name="chosen_projection" value="{{current}}">-->
                        <!--<datalist id="projection_list">-->
                            <!--<template is="dom-repeat" items="{{projection_names}}">-->
                                <!--<option value="{{item}}">-->
                            <!--</template>-->
                        <!--</datalist>-->
                        <br/>
                    </template>
                </form>
            </div>
        </template>
        <div id="canvas_div" style="display:flex;align-items:center;justify-content:center;flex-wrap:wrap;">

        </div>
    </template>

    <script>
        Polymer({

            is: 'globe-map',

            properties: {
                config: {
                    type: Object,
                    value: function () {
                        return {
                            rotation:{
                                enabled: false,
                                ui_enabled: false,
                            },
                            nt_indicatrice:{
                                enabled: false,
                                ui_enabled: false,
                                circle_precision: 10,
                            },
                            geodesic_graticule:{
                                enabled: false,
                                ui_enabled: false,
                            },
                            mercator_tiles:{
                                enabled: false,
                                ui_enabled: false,
                            },
                            projection_selection:{
                                enabled: false,
                            }
                        }
                    }
                },
                projections: {
                    type: Array,
                    value: ['Orthographic'],
                },
                width: {
                    type: Number,
                    value: 400,
                },
                height: {
                    type: Number,
                    value: 400,
                },
                precision:{
                    type: Number,
                    value: 0.1,
                },
                rotation:{
                    type:Array,
                    value:[0,0,0],
                }
            },

            _string_equals: function(s1, s2){
                return s1===s2;
            },
            _string_not_equals: function(s1, s2){
                return s1!=s2;
            },

            mergeConfig: function(newConfig){
                var defaultConfig = this.properties.config.value();
                for(key in newConfig){
                    for(subkey in newConfig[key]) {
                        defaultConfig[key][subkey] = newConfig[key][subkey];
                    }
                }
                return defaultConfig;
            },

            all_projections: function(width, height, precision) {
                var all_projections = {};
                for(proj_type in this.even_more_projections){
                    if(proj_type != 'Esoteric') {
                        for (projection in this.even_more_projections[proj_type]) {

                            var proj = this.even_more_projections[proj_type][projection];

                            if (typeof(proj) != "function") continue;

                            //check if supports rotation
                            var proj_instance = proj()
                                .scale(width / 6.5)
                                .translate([width / 2, height / 2])
                                .precision(precision)
                            if (proj_instance.rotate != null) {
                                all_projections[projection] = proj_instance;
                            }
                        }
                    }
                }

                return all_projections;

            },

            even_more_projections: {
                Azimuthal: {
                    AzimuthalEqualArea: d3.geoAzimuthalEqualArea,
                    AzimuthalEquidistant: d3.geoAzimuthalEquidistant,
                    Gnomonic: d3.geoGnomonic,
                    Orthographic: d3.geoOrthographic,
                    Stereographic: d3.geoStereographic,
                },
                Conic: {
                    Albers: d3.geoAlbers,
//                    ConicConformal: d3.geoConicConformal,
                    ConicEqualArea: d3.geoConicEqualArea,
                    ConicEquidistant: d3.geoConicEquidistant,
                },
                Cylindrical: {
                    Equirectangular: d3.geoEquirectangular,
                    Mercator: d3.geoMercator,
                    TransverseMercator: d3.geoTransverseMercator,
                },
                Interesting: {
                    Armadillo: d3.geoArmadillo,
                    Aitoff: d3.geoAitoff,
                    Berghaus: d3.geoBerghaus,
                    Craig: d3.geoCraig,
                    CylindricalEqualArea: d3.geoCylindricalEqualArea,
                    CylindricalStereographic: d3.geoCylindricalStereographic,
                    Eckert5: d3.geoEckert5,
                    Eisenlohr: d3.geoEisenlohr,
                    Fahey: d3.geoFahey,
                    Foucaut: d3.geoFoucaut,
                    Gingery: d3.geoGingery,
                    Ginzburg9: d3.geoGinzburg9,
                    Gringorten: d3.geoGringorten,
                    Hammer: d3.geoHammer,
                    HammerRetroazimuthal: d3.geoHammerRetroazimuthal,
                    Healpix: d3.geoHealpix,
                    Hill: d3.geoHill,
                    Lagrange: d3.geoLagrange,
                    Mollweide: d3.geoMollweide,
                    NaturalEarth: d3.geoNaturalEarth,
                    Satellite: d3.geoSatellite,
                    Times: d3.geoTimes,
                    VanDerGrinten4: d3.geoVanDerGrinten4,
                    InterruptedHomolosine: d3.geoInterruptedHomolosine,
                    InterruptedBoggs: d3.geoInterruptedBoggs,
                    InterruptedMollweideHemispheres: d3.geoInterruptedMollweideHemispheres,
                    PolyhedralButterfly: d3.geoPolyhedralButterfly,
                    PolyhedralWaterman: d3.geoPolyhedralWaterman,
                },
                Esoteric: {
                    Airy: d3.geoAiry,
                    AlbersUsa: d3.geoAlbersUsa,
                    August: d3.geoAugust,
                    Baker: d3.geoBaker,
                    Boggs: d3.geoBoggs,
                    Bonne: d3.geoBonne,
                    Bottomley: d3.geoBottomley,
                    Bromley: d3.geoBromley,
                    ChamberlinAfrica: d3.geoChamberlinAfrica,
                    Collignon: d3.geoCollignon,
                    Craster: d3.geoCraster,
                    Eckert1: d3.geoEckert1,
                    Eckert2: d3.geoEckert2,
                    Eckert3: d3.geoEckert3,
                    Eckert4: d3.geoEckert4,
                    Eckert6: d3.geoEckert6,
                    Equirectangular: d3.geoEquirectangular,
                    Gilbert: d3.geoGilbert,
                    Ginzburg4: d3.geoGinzburg4,
                    Ginzburg5: d3.geoGinzburg5,
                    Ginzburg6: d3.geoGinzburg6,
                    Ginzburg8: d3.geoGinzburg8,
                    Guyou: d3.geoGuyou,
                    Homolosine: d3.geoHomolosine,
                    Kavrayskiy7: d3.geoKavrayskiy7,
                    Larrivee: d3.geoLarrivee,
                    Laskowski: d3.geoLaskowski,
                    Littrow: d3.geoLittrow,
                    Loximuthal: d3.geoLoximuthal,
                    Miller: d3.geoMiller,
                    ModifiedStereographicAlaska: d3.geoModifiedStereographicAlaska,
                    ModifiedStereographicGs48: d3.geoModifiedStereographicGs48,
                    ModifiedStereographicGs50: d3.geoModifiedStereographicGs50,
                    ModifiedStereographicMiller: d3.geoModifiedStereographicMiller,
                    ModifiedStereographicLee: d3.geoModifiedStereographicLee,
                    MtFlatPolarParabolic: d3.geoMtFlatPolarParabolic,
                    MtFlatPolarQuartic: d3.geoMtFlatPolarQuartic,
                    MtFlatPolarSinusoidal: d3.geoMtFlatPolarSinusoidal,
                    NaturalEarth2: d3.geoNaturalEarth2,
                    NellHammer: d3.geoNellHammer,
                    Patterson: d3.geoPatterson,
                    Polyconic: d3.geoPolyconic,
                    RectangularPolyconic: d3.geoRectangularPolyconic,
                    Robinson: d3.geoRobinson,
                    Sinusoidal: d3.geoSinusoidal,
                    SinuMollweide: d3.geoSinuMollweide,
                    TwoPointAzimuthalUsa: d3.geoTwoPointAzimuthalUsa,
                    TwoPointEquidistantUsa: d3.geoTwoPointEquidistantUsa,
                    VanDerGrinten: d3.geoVanDerGrinten,
                    VanDerGrinten2: d3.geoVanDerGrinten2,
                    VanDerGrinten3: d3.geoVanDerGrinten3,
                    Wagner4: d3.geoWagner4,
                    Wagner6: d3.geoWagner6,
                    Wagner7: d3.geoWagner7,
                    Wiechel: d3.geoWiechel,
                    Winkel3: d3.geoWinkel3,
                    InterruptedSinusoidal: d3.geoInterruptedSinusoidal,
                    InterruptedSinuMollweide: d3.geoInterruptedSinuMollweide,
                    InterruptedMollweide: d3.geoInterruptedMollweide,
                    PolyhedralCollignon: d3.geoPolyhedralCollignon,
                    GringortenQuincuncial: d3.geoGringortenQuincuncial,
                    PeirceQuincuncial: d3.geoPeirceQuincuncial,
                }
            },

            // local DOM ready
            ready: function() {
                var config = this.mergeConfig(this.config);
                var width = this.width;
                var height = this.height;
                var precision = this.precision;
                var circle_precision = config.nt_indicatrice.circle_precision;
                var initial_rotation = this.rotation;

                var all_projections = this.all_projections(width, height, precision);
                this.projection_names = Object.keys(all_projections);

                // get the projections
                var data = this.projections.map(function(i){return all_projections[i]});
                var canvas_pad = 10;

                var get_projection_bounds = function(projection, width, height){
                    const sphere = {type: "Sphere"};
                    const bounds = d3.geoPath(projection).bounds(sphere);

                    return bounds;
                };

                var canvases = null;
                var render = function () {
                };

                this.change_projections = function() {
                    var new_data = null;

                    // get projections and rotate them
                    if(canvases != null && this.$$('#projection_selection_form')) {
                        // Get the chosen projections from the local DOM projection selection form
                        var selected_projections = d3.select(this.$$("#projection_selection_form"))
                            .selectAll('select')
                            .nodes()
                            .map(function(x){return x.value;});
                        new_data = selected_projections.map(function(i){return all_projections[i]});

                        //if there is an existing projection, copy the rotation
                        if(canvases.data()[0]) {
                            const rotation = canvases.data()[0].rotate();
                            new_data.map(function (x) {
                                x.rotate(rotation)
                            });
                        }
                    } else {
                        //if no existing projections, use initial rotation
                        new_data = data;
                        new_data.forEach(function(projection){projection.rotate(initial_rotation)});
                    }

                    canvases = d3.select(this.$.canvas_div)
                        .selectAll('canvas')
                        .data(new_data);

                    canvases = canvases
                        .enter()
                        .append('canvas')
                        .merge(canvases)
                        .attr('width', width)
                        .attr('height', height)
                        .each(function(projection, i, selection) {
                            // render a sphere in the projection to work out bounds
                            const sphere = {type: "Sphere"};
                            const t = [width/2, height/2];
                            projection.translate(t);
                            const bounds = d3.geoPath(projection).bounds(sphere);


                            //set element size to fit projection
                            var elem = selection[i];
                            elem.width = bounds[1][0] - bounds[0][0] + 2*canvas_pad;
                            elem.height = bounds[1][1] - bounds[0][1] + 2*canvas_pad;

                            // translate projection into new bounds
                            var new_bounds = [-bounds[0][0] + t[0] + canvas_pad, -bounds[0][1] + t[1] + canvas_pad];
                            projection.translate(new_bounds);
                        })
                        .attr('id', function (d, i) {
                            return i;
                        });
//                    .style('width', String(width/2)+"px")
//                    .style('height', String(height/2)+"px")
//                    .each(function(){this.getContext("2d").scale(2,2)})

                    if(config.rotation.enabled) {
                        canvases.call(d3.drag()
                            .on("start", dragstarted)
                            .on("drag", dragged));
                    }

                    render();

                }.bind(this);
                this.change_projections();

                function dragstarted(projection) {
                    v0 = versor.cartesian(projection.invert(d3.mouse(this)));
                    r0 = projection.rotate();
                    q0 = versor(r0);
                }

                function dragged(projection) {
                    var v1 = versor.cartesian(projection.rotate(r0).invert(d3.mouse(this))),
                        q1 = versor.multiply(q0, versor.delta(v0, v1)),
                        r1 = versor.rotation(q1);
                    for (i in canvases.data()) {
                        canvases.data()[i].rotate(r1);
                    }
                    render();
                }

                var circles = null;
                var show_circles = true;

                var triangles = null;
                var show_triangles = true;

                var mercator_tiles = null;
                var show_mercator_tiles = true;

                var make_circles = function (radius, precision, lon, lat) {
                    // generate geodesic circles for map
                    var circlegen = d3.geoCircle()
                        .radius(radius)
                        .precision(precision)
                        .center(function (i) {
                            return i;
                        });

                    //create a set of circles to avoid duplication
                    var circle_polygons =
                        d3.set(d3.cross(d3.range(-180, 180, lon), d3.range(-90, 90.1, lat)))
                            .values()
                            .map(function (xy) {
                                var center = xy.split(',');
                                return circlegen(center.map(parseFloat));
                            });

                    circles = {
                        "type": "GeometryCollection",
                        "geometries": circle_polygons
                    };
                };
                if (config.nt_indicatrice.enabled) {
                    make_circles(5, circle_precision, 90, 10);
                }


                var g_g_form = this.$.geodesic_graticule_form;
                var make_triangles = function (subdivisions) {
                    // simply a geodesic shape to generate the lines for the circles.
                    triangles = d3.geodesic.multipolygon(subdivisions);
                };
                if(config.geodesic_graticule.enabled) {
                    make_triangles(2);
                }

                var mercator_prj = d3.geoMercator();
                var make_mercator_tiles = function (level) {
                    level = parseFloat(level);
                    console.log(level);
                    var testvar = 360.0/parseFloat(level+1);
                    console.log(testvar);

//                    var p_minx = -180.0;
//                    var p_maxx = 180.0;
//                    var p_miny = -90.0;
//                    var p_maxy = 90.0;

                    var p_minx, p_maxx, p_miny, p_maxy;
                    [p_minx, p_miny] = mercator_prj([-180.0, -85.0]);
                    [p_maxx, p_maxy] = mercator_prj([180.0, 85.0]);

                    console.log(p_minx, p_miny, p_maxx, p_maxy);

                    var inc = 0.0;

                    mercator_tiles = d3.set(d3.cross(d3.range(p_minx, p_maxx + inc, (p_maxx-p_minx)/parseFloat(Math.pow(2,level))),
                                                     d3.range(p_miny, p_maxy + inc, (p_maxy-p_miny)/parseFloat(Math.pow(2, level)))))
                        .values()
                        .map(function(xy){
                            var center = xy.split(',');
                            minx = parseFloat(center[0]);
                            miny = parseFloat(center[1]);
                            maxx = minx + ((p_maxx-p_minx) / parseFloat(Math.pow(2, level)));
                            maxy = miny + ((p_maxy-p_miny) / parseFloat(Math.pow(2, level)));

                            [minx, miny] = mercator_prj.invert([minx, miny]);
                            [maxx, maxy] = mercator_prj.invert([maxx, maxy]);

                            var stepsize = (maxx - minx)/10.0;
                            var inc = stepsize/3.0;
                            var coords = [];
                            coords = coords.concat(
                                d3.range(minx, maxx + inc, stepsize)
                                    .map(function(x) {
                                        return [x, miny]
                                    }));
                            coords = coords.concat(
                                d3.range(miny, maxy + inc, stepsize)
                                    .map(function(x) {
                                        return [maxx, x]
                                    })
                            );
                            coords = coords.concat(
                                d3.range(maxx, minx + inc, - stepsize)
                                    .map(function(x) {
                                        return [x, maxy]
                                    })
                            );
                            coords = coords.concat(
                                d3.range(maxy, miny + inc, - stepsize)
                                    .map(function(x) {
                                        return [minx, x]
                                    })
                            );
                            var polygon =  {
                                type: "LineString",
                                coordinates: [
//                                    [
                                    [minx, miny],
                                    [maxx, miny],
                                    [maxx, maxy],
                                    [minx, maxy],
                                    [minx, miny]
//                                    ]
                                ]
                            };

                            polygon.coordinates = coords;
                            return polygon;
                        });
                    mercator_tiles = {
                        type: "GeometryCollection",
                        geometries: mercator_tiles
                    };
                    console.log(mercator_tiles);
                };
                if(config.mercator_tiles.enabled){
                    make_mercator_tiles(2);
                }

                this.resetRotation = function () {
                    canvases.data().forEach(function (proj) {
                        proj.rotate([0, 0, 0])
                    });
                    render();
                };
                this.nt_form_input = function () {
                    var nt_form = this;

                    nt_form.nt_radius_out.value = nt_form.nt_radius.value;

                    nt_form.lon_period_out.value = nt_form.lon_period.value;

                    nt_form.lat_period_out.value = nt_form.lat_period.value;

                    make_circles(+this.nt_radius.value,
                        circle_precision,
                        +this.lon_period.value,
                        +this.lat_period.value);
                    render();
                };
                this.nt_form_enable = function () {
                    show_circles = this.checked;
                    render();
                };
                this.geo_grat_change = function () {
                    this.subdivisions_out.value = this.subdivisions.value;
                    make_triangles(this.subdivisions.value);
                    render();
                };
                this.mercator_tiles_change = function() {
                  this.level_out.value = this.level.value;
                  make_mercator_tiles(this.level.value);
                  render();
                };
                this.geo_grat_enable = function () {
                    show_triangles = this.checked;
                    render();
                };
                this.mercator_tiles_enable = function() {
                    show_mercator_tiles = this.checked;
                    render();
                }

                // download the shapes and then render the map
                d3.json("https://unpkg.com/world-atlas@1/world/110m.json").then(function(world) {
                    //create a sphere for the border of the map
                    var sphere = {type: "Sphere"};
                    //load the country boundaries
                    var land = topojson.feature(world, world.objects.countries);

                    render = function() {
                        canvases.each(function (projection, i) {
                            var context = this.getContext("2d");
                            // create pathing function for the projection
                            var path = d3.geoPath()
                                .projection(projection)
                                .context(context);
                            var mercator_path = d3.geoPath().projection(d3.geoMercator()).context(context);
                            context.clearRect(0, 0, width, height);

                            // save drawing context state
                            context.save();

                            // draw the sphere of the earth
                            context.beginPath(), path(sphere), context.fillStyle = "#fff", context.fill();

                            // clip the canvas so that only draws in the sphere are visible
                            context.clip();

                            // draw the land
                            context.beginPath(), path(land);
                            context.fillStyle = "#b5ffb2", context.fill();
                            context.strokeStyle = "#89c587", context.stroke();

                            // draw the circles
                            if(show_circles) {
                                context.beginPath(), path(circles);
                                context.globalAlpha = 0.4;
                                context.fillStyle = "#ff99aa", context.fillOpacity = 0.2, context.fill();
                                context.globalAlpha = 1;
                                context.strokeStyle = "#e08192", context.stroke();
                            }

                            // draw the triangles
                            if(show_triangles) {
                                context.beginPath(), path(triangles);
                                context.strokeStyle = "#1b32e0", context.stroke();
                            }

                            if(show_mercator_tiles) {
                                context.beginPath(), path(mercator_tiles);
                                context.strokeStyle = "#000000", context.stroke();
                            }

                            // restore the drawing context state
                            context.restore();

                            //stroke the border of the earth
                            context.beginPath(), path(sphere), context.stroke();
                        })
                    };
                    render();
                })
            }
        });
    </script>
</dom-module>