Skip to content

Instantly share code, notes, and snippets.

@Fil

Fil/index.html

Created August 14, 2020 16:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Fil/6a768c90c4ccba298cf1dd950cfd529a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Fil/6a768c90c4ccba298cf1dd950cfd529a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Fil created this gist Aug 14, 2020.
    18 changes: 18 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/topojson-client@3"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <title>Document</title>
    </head>
    <body>
    <script src="https://unpkg.com/topojson-client@3"></script>
    <div style="background:black">
    <canvas id="test"></canvas>
    </div>
    <script src="script.js"></script>
    </body>
    </html>
    101 changes: 101 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,101 @@
    function getPixelRatio() {
    var ctxForConfig = document.createElement("canvas").getContext("2d");
    var dpr = window.devicePixelRatio || 1;
    var bsr = ctxForConfig.webkitBackingStorePixelRatio ||
    ctxForConfig.mozBackingStorePixelRatio ||
    ctxForConfig.msBackingStorePixelRatio ||
    ctxForConfig.oBackingStorePixelRatio ||
    ctxForConfig.backingStorePixelRatio || 1;
    return dpr / bsr;
    }

    function getHiDPICanvasConfig(w, h) {
    var ratio = getPixelRatio();
    var config = {
    style: {}
    };
    config.ratio = ratio;
    config.width = w * ratio;
    config.height = h * ratio;
    config.style.width = w + "px";
    config.style.height = h + "px";
    return config;
    }
    var width = 900;
    var height = 600;
    var canvasConfig = getHiDPICanvasConfig(width, height);
    var canvas = d3.select("#test");
    canvas.attr("width", canvasConfig.width)
    .attr("height", canvasConfig.height)
    .style("width", canvasConfig.style.width)
    .style("height", canvasConfig.style.height);
    var context = canvas.node().getContext("2d")
    context.setTransform(canvasConfig.ratio, 0, 0, canvasConfig.ratio, 0, 0);
    var projection = d3.geoMercator()
    .precision(0.1)
    .translate([width / 2, height / 2]);
    var path = d3.geoPath(projection, context);
    var scale = projection.scale();
    var translate = projection.translate();

    function zoomToGeoJson() {
    var geoJson = {
    "type": "FeatureCollection",
    "features": [{
    "type": "Feature",
    "properties": {},
    "geometry": {
    "type": "LineString",
    "coordinates": [
    [
    -471.35742187499994,
    44.276671273775186
    ],
    [
    -462.919921875,
    37.50972584293751
    ],
    [
    -451.14257812499994,
    38.54816542304656
    ]
    ]
    }
    }]
    };
    projection.fitExtent([
    [10, 10],
    [width - 10, height - 10]
    ], geoJson);

    canvas.property("__zoom", d3.zoomIdentity.translate(...projection.translate()).scale(projection.scale()));

    }

    fetch('https://jsonblob.com/api/50717bc5-de3c-11ea-b828-1fb275255dfd')
    .then(response => response.json())
    .then(world => {
    zoomToGeoJson();
    renderFeature();

    var zoom = d3.zoom()
    .scaleExtent([0.1, Infinity])
    .on("zoom", zoomByProjection);

    canvas.call(zoom);

    function zoomByProjection() {
    context.clearRect(0, 0, width, height);
    var transform = d3.event.transform;
    projection.translate([transform.x, transform.y]);
    projection.scale(transform.k);
    renderFeature();
    }

    function renderFeature() {
    context.beginPath();
    context.fillStyle = "red";
    path(topojson.mesh(world));
    context.fill();
    }
    });